added auto scroll for history link

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable */
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
@@ -41,6 +41,8 @@ function History(props: Record<string, unknown>): JSX.Element {
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy));
+  const historyEndRef = useRef<HTMLDivElement>(null);
+
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -239,21 +241,26 @@ function History(props: Record<string, unknown>): JSX.Element {
       .style('padding-left', '8px')
       .html((d) => findDiff(d.data.index));
 
+    if (historyEndRef.current) {
+      historyEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
     return svg.node();
   };
 
   useEffect(() => {
     makeD3Tree();
-  }, [root /*, currLocation*/]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
+  }, [root, currLocation]);
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
   }, []);
 
-  // then rendering each node in History tab to render using D3, which will share area with LegendKey
   return (
-    <div className='display'>
-      <svg ref={svgRef} width={totalWidth} height={totalHeight} />
+    <div className='history-view'>
+      <div className='display'>
+        <svg ref={svgRef} width={totalWidth} height={totalHeight} />
+        <div ref={historyEndRef} className='history-end-anchor' />
+      </div>
     </div>
   );
 }

src/app/containers/ActionContainer.tsx

@@ -33,7 +33,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     if (actionsEndRef.current) {
       actionsEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [snapshots]); // Dependency on snapshots array
+  }, [snapshots]);
 
   const displayArray = (obj: Obj): void => {
     if (

src/app/styles/components/d3graph.css

@@ -87,10 +87,9 @@ div.tooltip {
 /* Container styling */
 .display {
   background-color: var(--bg-secondary);
-  height: 100%;
-  width: 100%;
+  flex: 1;
+  min-height: 0;
   overflow: auto;
-  position: relative;
 }
 
 /* State changes text container styling */

src/app/styles/layout/_mainContainer.scss

@@ -11,3 +11,15 @@
   height: 100%;
   overflow: auto;
 }
+
+.history-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-end-anchor {
+  height: 1px;
+  width: 100%;
+}

src/app/styles/layout/_stateContainer.scss

@@ -5,10 +5,16 @@
   flex-direction: column;
 }
 
-.app-content,
 .app-body {
   height: 100%;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
 }
 
 .main-navbar-container--structural {