fix: fixing misc small bugs and updating tutorial

tutorial/index.css

@@ -201,3 +201,24 @@ footer {
 .center {
   text-align: center;
 }
+
+.QA {
+  margin: auto;
+  padding: 2em;
+  width: calc(100% - 4em);
+  text-align: center;
+}
+
+.question {
+  font-style: italic;
+  margin: auto;
+  margin-bottom: 6px;
+  width: 80%;
+}
+
+.answer {
+  background-color: black;
+  margin: 0px 1em;
+  color: black;
+  padding: 8px;
+}

tutorial/tutorial.html

@@ -79,15 +79,21 @@ <h2>Setup & Materials</h2>
             src="./images/Screenshots/Tutorial-Housing/setup2.png"
           />
         </div>
+        <div class="QA">
+          <p class="question">
+            In this tutorial, triple-click the black bar with your mouse to
+            reveal the answers.
+          </p>
+          <p class="answer">Secret revealed. You did it!</p>
+        </div>
       </div>
       <div class="step">
         <h2>1. Get an overview of what has been done so far</h2>
         <p>
           The dataset in this analysis has a fair number of features to describe
-          each property, from number of bathrooms to whether the house has a
-          waterfront view. However, per the markdown shown below, the author of
+          each property. However, the author of
           <code>houses_kc.ipynb</code> seems to have picked just a single
-          feature <code>sqft_living</code> for their first model.
+          feature <code>sqft_living</code> for their first model:
         </p>
         <div class="center">
           <img
@@ -100,21 +106,39 @@ <h2>1. Get an overview of what has been done so far</h2>
           Did the author explore any of the other features? One good way to get
           an overview is to take a peek at how this notebook has evolved over
           time. Using the <b>activity pane</b> (shown below) scroll down to the
-          earliest version of the notebook. We can see from this that the author
-          created 109 versions of the notebook over the span of about 1 hour.
-          The <b>minimap</b> with the colorful ticks next to each version row
-          shows us how the author started with just 1 cell and added, edited,
-          and deleted cells over time.
+          earliest version of the notebook.
         </p>
+
         <div class="center">
           <img
             class="verdant-screenshot"
-            style="width: 50em"
+            style="height: 20em"
             src="./images/Screenshots/Tutorial-Housing/overview_step2.png"
           />
         </div>
+        <div class="QA">
+          <p class="question">
+            Question: Looking at the earliest version, what date and time did
+            the author first start working on this notebook?
+          </p>
+          <p class="answer">January 25, 2021 at 3:46pm</p>
+        </div>
+        <p>
+          The <b>notebook minimap</b> with the colorful ticks next to each
+          version row shows us which cells changed in a given notebook version.
+          Green indicates a cell added, red a cell deleted, blue a cell changed,
+          and so on.
+        </p>
+        <div class="QA">
+          <p class="question">
+            Question: Use your mouse to hover over the vertical line tick in the
+            minimap for <b>v19</b>. Which cell was changed in v19 and how?
+          </p>
+          <p class="answer">Code cell 7 was added</p>
+        </div>
         <p>
-          Now try clicking on a version, like <b>v37</b> (shown below) to open
+          Now let's get back to figuring out what the author tried in this
+          analysis. Try clicking on a version <b>v37</b> (shown below) to open
           the full notebook at that version as a <b>ghost notebook</b>:
         </p>
         <div class="center">
@@ -127,25 +151,77 @@ <h2>1. Get an overview of what has been done so far</h2>
         <p>
           The diff notation in the <b>ghost notebook</b> highlights what content
           was added (green), deleted (red), or edited (blue) in this version.
+          Next, try using the arrows at the top of the ghost book to move ahead
+          in time a couple of versions, and watch how the notebook changes:
+        </p>
+        <div class="center">
+          <img
+            class="verdant-screenshot"
+            style="width: 50em"
+            src="./images/Screenshots/Tutorial-Housing/overview_step4.png"
+          />
+        </div>
+        <div class="QA">
+          <p class="question">
+            Question: Glance through versions v37 to v50 of the notebook. Other
+            than sqft_living, what are 2 other features the author plotted
+            compared to price?
+          </p>
+          <p class="answer">zipcode, bedrooms, or bathrooms</p>
+        </div>
+        <p>
+          Hopefully you've spotted a few charts in these versions, however it's
+          a bit tedious to skim one at a time though versions. Next let's learn
+          some strategies to more directly find specific things from history!
         </p>
       </div>
       <div class="step">
-        <h2>2. See how the data features have been visualized</h2>
+        <h2>2. Track model improvements</h2>
         <p>
-          One way to figure this out is to head to the search tab of Verdant and
-          type in "plot"
+          For this notebook, it would be helpful to know what kind of model
+          performance the author has gotten so far for predicting house prices.
+          What kind of models have they tried and what were their results?
+        </p>
+        <p>
+          There are a few ways in Verdant to find specific history. Head over to
+          the Artifacts tab, where you should see a table like this:
         </p>
         <div class="center">
           <img
             class="verdant-screenshot"
-            style="width: 20em"
-            src="./images/Screenshots/Tutorial-Housing/search_step1.png"
+            style="height: 30em"
+            src="./images/Screenshots/Tutorial-Housing/artifact_table.png"
           />
         </div>
+        <p>
+          For each cell & output in your current notebook, this table lists how
+          many versions exist of that cell. Cells are abbreviated <b>C</b> for
+          code and <b>M</b> for markdown. Each cell has a number that identifies
+          it, like <b>C2</b>. This id is unique, permanent, and never changes,
+          so that you can always recover a specific cell even after it's been
+          deleted.
+        </p>
+        <div class="QA">
+          <p class="question">
+            Question: How many versions exist for C4 (Code Cell 4)?
+          </p>
+          <p class="answer">33</p>
+        </div>
       </div>
       <div class="step">
-        <h2>3. Track model improvements</h2>
-        <p>using inspector and artifact detail view</p>
+        <h2>3. Review data visualizations</h2>
+        <p>
+          There are several ways to get an overview of past data visualizations
+          in Verdant. One way to figure this out is to head over to the search
+          tab of Verdant and type in "plot".
+        </p>
+        <div class="center">
+          <img
+            class="verdant-screenshot"
+            style="width: 20em"
+            src="./images/Screenshots/Tutorial-Housing/search_step1.png"
+          />
+        </div>
       </div>
     </div>
     <footer>

verdant/verdant-model/history/store/output-history.ts

@@ -59,9 +59,9 @@ export class OutputHistory extends NodeHistory<NodeyOutput> {
         let b = outList_b[index];
 
         // Important! ignore the execution count, only compare
-        // the data field of the output
-        let raw_a = JSON.stringify(a.data);
-        let raw_b = JSON.stringify(b.data);
+        // the data (or text) field of the output
+        let raw_a = a.data ? JSON.stringify(a.data) : JSON.stringify(a.text);
+        let raw_b = b.data ? JSON.stringify(b.data) : JSON.stringify(b.text);
 
         // retrieve from storage if needed
         if (OutputHistory.isOffsite(a)) {

verdant/verdant-model/sampler/namer.ts

@@ -87,7 +87,7 @@ export namespace Namer {
 
   export function describeChange(nodey: NodeyCell, changes: ChangeType[]) {
     if (changes[0] === ChangeType.OUTPUT_CHANGED)
-      return `${Namer.getCellVersionTitle(nodey)}'s ${changes.join(", ")}`;
-    return `${Namer.getCellVersionTitle(nodey)} was ${changes.join(", ")}`;
+      return `${Namer.getCellTitle(nodey)}'s ${changes.join(", ")}`;
+    return `${Namer.getCellTitle(nodey)} was ${changes.join(", ")}`;
   }
 }

verdant/verdant-ui/redux/viewStates/search.ts

@@ -65,10 +65,6 @@ export const searchReducer = (
 
 function search(query: string, history: History) {
   query = query?.trim();
-  if (query && query.length > 0) {
-    let res = history?.store?.search(query);
-    console.log("results are", res);
-    return res;
-  }
+  if (query && query.length > 0) return history?.store?.search(query);
   return [];
 }