styled history nodes into rects

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -40,46 +40,11 @@ function History(props: Record<string, unknown>): JSX.Element {
   const dispatch = useDispatch();
 
   const svgRef = React.useRef(null);
-  const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
+  const root = JSON.parse(JSON.stringify(hierarchy));
   // 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;
 
-  function labelCurrentNode(d3root) {
-    // iterates through the parents of a node and applies a color property
-    if (d3root.data.index === currLocation.index) {
-      // node.data aka d3root.data allows us to access associated node data. So if node.index === currLocation.index...
-
-      let currNode = d3root; // make our input the currNode
-
-      while (currNode.parent) {
-        // while there are parent nodes
-        currNode.color = '#999'; // change or give the node a color property
-        currNode = currNode.parent; // change currNode to the parent
-      }
-
-      currNode.color = '#999'; // when there are no more parent nodes, change or give the last node a color property
-
-      return d3root; // return the modified d3root
-    }
-
-    let found;
-
-    if (!d3root.children) {
-      // if root has no children array
-      return found; // return undefined
-    }
-
-    d3root.children.forEach((child) => {
-      // for each child node within the children array
-      if (!found) {
-        // if found is undefined
-        found = labelCurrentNode(child); //
-      }
-    });
-    return found; // return's the found child node
-  }
-
   function findDiff(index) {
     // determines the difference between our current index and the index-1 snapshot and produces an html string
     const statelessCleaning = (obj: {
@@ -202,9 +167,6 @@ function History(props: Record<string, unknown>): JSX.Element {
 
     const g = svg.append('g').attr('transform', `translate(${centerOffset},${margin.top})`);
 
-    // Label current node
-    const currNode = labelCurrentNode(d3root);
-
     const link = g
       .selectAll('.link')
       .data(d3root.descendants().slice(1))
@@ -234,6 +196,22 @@ function History(props: Record<string, unknown>): JSX.Element {
       })
       .attr('transform', (d) => `translate(${d.x},${d.y})`);
 
+    node
+      .append('rect')
+      .attr('width', 100) // Width of rectangle
+      .attr('height', 40) // Height of rectangle
+      .attr('x', -50) // Center the rectangle horizontally
+      .attr('y', -20) // Center the rectangle vertically
+      .attr('rx', 8) // Rounded corners
+      .attr('ry', 8); // Rounded corners
+
+    // Add text with "Snapshot" prefix
+    node
+      .append('text')
+      .attr('dy', '0.31em')
+      .attr('text-anchor', 'middle')
+      .text((d) => `Snapshot ${d.data.index + 1}`);
+
     // Add click handler for nodes
     node
       .on('click', (event, d) => {
@@ -303,14 +281,6 @@ function History(props: Record<string, unknown>): JSX.Element {
         d3.selectAll('.tooltip').remove();
       });
 
-    node.append('circle').attr('r', 20);
-
-    node
-      .append('text')
-      .attr('dy', '0.31em')
-      .attr('text-anchor', 'middle')
-      .text((d) => `${d.data.name}.${d.data.branch}`);
-
     return svg.node();
   };
 

src/app/styles/components/d3graph.css

@@ -6,15 +6,15 @@
   transition: all 200ms ease;
 }
 
-/* Node circle styling */
-.node circle {
+/* Node rectangle styling */
+.node rect {
   fill: #ffffff;
   stroke: #e5e7eb;
   stroke-width: 2px;
   transition: all 200ms ease;
 }
 
-.node:hover circle {
+.node:hover rect {
   fill: #14b8a6;
   stroke: #0d9488;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
@@ -29,16 +29,15 @@
 }
 
 /* Parent node specific styling */
-.node--internal circle {
+.node--internal rect {
   fill: #ffffff;
   stroke: #e5e7eb;
 }
 
-.node--internal:hover circle {
+.node--internal:hover rect {
   fill: #14b8a6;
   stroke: #0d9488;
 }
-
 .node--internal text {
   font-family: 'Outfit', sans-serif;
   font-size: 14px;