updated tutorial for history

Author: jasnoo

src/app/components/Diff.tsx

@@ -15,7 +15,7 @@ function Diff(props: DiffProps): JSX.Element {
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState; // k/v pairs of mainstate store object being created
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
-  let previous:unknown;
+  let previous: unknown;
 
   // previous follows viewIndex or sliderIndex
   if (viewIndex !== -1) {
@@ -66,7 +66,6 @@ function Diff(props: DiffProps): JSX.Element {
   const html: StatelessCleanning = formatters.html.format(delta, previousDisplay);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
-
   if (previous === undefined || delta === undefined) {
     return (
       <div className='no-data-message'>

src/app/components/StateRoute/History.tsx

@@ -177,6 +177,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       .enter()
       .append('g')
       .style('cursor', 'pointer')
+      .attr('class', `snapshotNode`)
       .on('click', (event, d) => {
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
@@ -253,6 +254,7 @@ function History(props: Record<string, unknown>): JSX.Element {
 
     node
       .append('circle')
+
       .attr('fill', (d) => {
         if (d.data.index === currLocation.index) {
           return 'red';

src/app/components/StateRoute/Tree.tsx

@@ -49,7 +49,7 @@ const Tree = (props: TreeProps) => {
   const [store, dispatch] = useStoreContext();
 
   useEffect(() => {
-    dispatch(setCurrentTabInApp('history'));
+    dispatch(setCurrentTabInApp('tree'));
   }, []);
 
   return (

src/app/components/Tutorial.tsx

@@ -242,7 +242,7 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
           {
             title: 'Webmetrics Tab',
             element: '.web-metrics-container',
-            intro: 'This section will show 4 webmetrics for your page.',
+            intro: 'This section will show 4 webmetrics for your page when it loads.',
             position: 'top',
           },
           {
@@ -273,7 +273,57 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
             title: 'TTFB',
             element: document.querySelectorAll('.metric')[3],
             intro:
-              "<strong>Time to first Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
+              "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
+            position: 'top',
+          },
+        ];
+        break;
+      case 'history':
+        steps = [
+          {
+            title: 'History Tab',
+            element: '.display',
+            intro:
+              'The history tab shows all snapshots as a timeline and includes branches to represent divergent state history created from time traveling backwards and making new state changes.',
+            position: 'top',
+          },
+          {
+            title: 'Viewing History Snapshot',
+            element: document.querySelectorAll('.snapshotNode')[0],
+            intro:
+              'Each node will represent a snapshot in the page. <ul><li>A single snapshot will show as a node while multiple snapshots will be represented as a timeline.</li><li>Highlighting over one will show any state changes compared to the previous snapshot. </li><li>Clicking a node will set the snapshot as the current one.</li></ul>',
+            position: 'top',
+          },
+          {
+            title: 'Navigating through Snapshots',
+            element: '.routedescription',
+            intro: 'All snapshots can also be seen and navigated here as well.',
+            position: 'right',
+          },
+
+          {
+            title: 'Clicking on Jump Button',
+            element: document.querySelectorAll('.individual-action')[0],
+            intro:
+              'The button on the right of each snapshot can be used to jump to a given point in state to view the state history at that point.',
+            position: 'right',
+          },
+          {
+            title: 'Renaming The Snapshot',
+            element: document.querySelectorAll('.action-component-text')[0],
+            intro:
+              'A snapshot can be renamed to provided more clarity or distinguish specific snapshots.',
+            position: 'left',
+          },
+        ];
+        break;
+      case 'tree':
+        steps = [
+          {
+            title: 'Tree Tab',
+            element: '.display',
+            intro:
+              'The tree tab can be used to view a text display of the state snapshots in a JSON format.',
             position: 'top',
           },
         ];