removed scrolling for map and perforamnce and added scrolling for tree and history

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -114,6 +114,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       if (!delta) return 'No state changes';
 
       const changedState = findStateChangeObj(delta);
+      console.log('changed state', formatters.html.format(changedState[0]));
       return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';
     } catch (error) {
       console.error('Error in findDiff:', error);
@@ -129,9 +130,20 @@ function History(props: Record<string, unknown>): JSX.Element {
     const svg = d3.select(svgRef.current);
     svg.selectAll('*').remove();
 
-    const treeLayout = d3.tree().nodeSize([FIXED_NODE_WIDTH, FIXED_NODE_HEIGHT]);
-    const d3root = treeLayout(d3.hierarchy(root));
+    // Create tree layout with fixed node size
+    const treeLayout = d3
+      .tree()
+      .nodeSize([FIXED_NODE_WIDTH, FIXED_NODE_HEIGHT])
+      .separation((a, b) => {
+        // Increase separation between unrelated subtrees
+        return a.parent === b.parent ? 1.2 : 2;
+      });
+
+    // Create hierarchy and compute initial layout
+    const d3root = d3.hierarchy(root);
+    treeLayout(d3root);
 
+    // Calculate the bounds of the tree
     let minX = Infinity;
     let maxX = -Infinity;
     let minY = Infinity;
@@ -144,15 +156,24 @@ function History(props: Record<string, unknown>): JSX.Element {
       maxY = Math.max(maxY, d.y);
     });
 
+    // Calculate the actual dimensions needed
     const actualWidth = maxX - minX + FIXED_NODE_WIDTH;
     const actualHeight = maxY - minY + FIXED_NODE_HEIGHT;
 
+    // Set SVG dimensions to accommodate the tree
+    const svgWidth = Math.max(actualWidth + margin.left + margin.right, totalWidth);
     svg
-      .attr('width', Math.max(actualWidth + margin.left + margin.right, totalWidth))
+      .attr('width', svgWidth)
       .attr('height', Math.max(actualHeight + margin.top + margin.bottom, totalHeight));
 
-    const centerOffset = totalWidth / 2 - (maxX - minX) / 2;
-    const g = svg.append('g').attr('transform', `translate(${centerOffset},${margin.top})`);
+    // Calculate center offset to keep root centered
+    const rootOffset = -d3root.x;
+    const horizontalCenter = svgWidth / 2;
+
+    // Create container group and apply transforms
+    const g = svg
+      .append('g')
+      .attr('transform', `translate(${horizontalCenter + rootOffset},${margin.top})`);
 
     // Draw links
     const link = g
@@ -163,13 +184,12 @@ function History(props: Record<string, unknown>): JSX.Element {
       .attr('class', (d) => {
         return d.data.index === currLocation.index ? 'link current-link' : 'link';
       })
-      .attr(
-        'd',
-        (d) =>
-          `M${d.x},${d.y}C${d.x},${(d.y + d.parent.y) / 2} ${d.parent.x},${
-            (d.y + d.parent.y) / 2
-          } ${d.parent.x},${d.parent.y}`,
-      );
+      .attr('d', (d) => {
+        return `M${d.x},${d.y}
+                C${d.x},${(d.y + d.parent.y) / 2}
+                  ${d.parent.x},${(d.y + d.parent.y) / 2}
+                  ${d.parent.x},${d.parent.y}`;
+      });
 
     // Create node groups
     const node = g
@@ -189,7 +209,7 @@ function History(props: Record<string, unknown>): JSX.Element {
         dispatch(changeSlider(d.data.index));
       });
 
-    // Add rectangles for nodes
+    // Add rectangles for nodes with consistent size
     node
       .append('rect')
       .attr('width', 180)
@@ -199,7 +219,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       .attr('rx', 8)
       .attr('ry', 8);
 
-    // Add snapshot title
+    // Add snapshot titles
     node
       .append('text')
       .attr('dy', '-25')
@@ -216,7 +236,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       .attr('height', 65)
       .append('xhtml:div')
       .style('font-size', '12px')
-      .style('overflow', 'hidden')
+      .style('overflow-y', 'auto')
       .style('text-align', 'center')
       .html((d) => findDiff(d.data.index));
 

src/app/components/StateRoute/Tree.tsx

@@ -55,20 +55,22 @@ const Tree = (props: TreeProps) => {
 
   return (
     <>
-      {snapshot && (
-        // @ts-ignore
-        <JSONTree
+      <div className='tree-component'>
+        {snapshot && (
           // @ts-ignore
-          data={snapshots[currLocation.index] || snapshot} // data to be rendered, a snapshot object
-          theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
-          shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
-          getItemString={getItemString} // allows the customization of how arrays, objects, and iterable nodes are displayed.
-          labelRenderer={(raw: any[]) => {
-            //  renders a label if the first element of raw is a number.
-            return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
-          }}
-        />
-      )}
+          <JSONTree
+            // @ts-ignore
+            data={snapshots[currLocation.index] || snapshot} // data to be rendered, a snapshot object
+            theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
+            shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
+            getItemString={getItemString} // allows the customization of how arrays, objects, and iterable nodes are displayed.
+            labelRenderer={(raw: any[]) => {
+              //  renders a label if the first element of raw is a number.
+              return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
+            }}
+          />
+        )}
+      </div>
     </>
   );
 };

src/app/styles/components/d3graph.css

@@ -15,8 +15,7 @@
 }
 
 .node:hover rect {
-  fill: #14b8a6;
-  stroke: #0d9488;
+  stroke: #14b8a6;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
@@ -35,8 +34,7 @@
 }
 
 .node--internal:hover rect {
-  fill: #14b8a6;
-  stroke: #0d9488;
+  stroke: #14b8a6;
 }
 .node--internal text {
   font-family: 'Outfit', sans-serif;
@@ -46,9 +44,8 @@
 }
 
 /* Current/active node styling */
-.node.active circle {
-  fill: #14b8a6;
-  stroke: #0d9488;
+.node.active rect {
+  stroke: #14b8a6;
 }
 
 /* Link styling */
@@ -90,4 +87,8 @@ div.tooltip {
 /* Container styling */
 .display {
   background-color: #f9fafb;
+  height: 100%;
+  width: 100%;
+  overflow: auto; /* Enable scrolling */
+  position: relative; /* Create new stacking context */
 }

src/app/styles/components/diff.css

@@ -1,9 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 .jsondiffpatch-delta {
   font-family: 'Outfit', sans-serif;
-  font-size: 16px;
+  font-size: 12px;
   margin: 0;
-  padding: 0 0 0 12px;
   display: inline-block;
 }
 .jsondiffpatch-delta pre {

src/app/styles/layout/_stateContainer.scss

@@ -1,13 +1,14 @@
 .state-container {
   overflow: auto;
-}
-
-.app-body {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.app-content {
+.app-content,
+.app-body {
   height: 100%;
+  overflow: hidden; /* Prevent double scrollbars */
 }
 
 .main-navbar-container--structural {
@@ -152,4 +153,11 @@
 .json-tree {
   overflow: auto;
   list-style: none;
+  padding: 16px;
+  margin: 0 0 50px;
+}
+
+.tree-component {
+  height: 100%;
+  overflow: auto;
 }