began styling history nodes

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -181,45 +181,41 @@ function History(props: Record<string, unknown>): JSX.Element {
         `translate(${margin.left},${d3root.height === 0 ? totalHeight / 2 : margin.top})`, //Set the position of the group 'g' by translating it horizontally by 'margin.left' pixels and vertically based on the conditional expression.
       );
 
-    const link = g //responsible for rendering the links or connectors between the nodes in the d3 Tree
-      .selectAll('.link') // select all elements that contain the string '.link' and return a selection
+    const link = g
+      .selectAll('.link')
       .data(d3root.descendants().slice(1))
       .enter()
       .append('path')
-      .attr('class', 'link')
-      .attr('stroke', '#161617')
-      .attr('fill', 'none')
+      .attr('class', (d) => {
+        return d.data.index === currLocation.index ? 'link current-link' : 'link';
+      })
       .attr(
-        //defines the path attribute (d) for each link (edge) between nodes, using a Bézier curve (C) to connect the source node's coordinates (d.x, d.y) to the midpoint between the source and target nodes and then to the target node's coordinates (d.parent.x, d.parent.y)
         '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('class', (d) => {
-        // Adding a class based on the current node's data
-        if (d.data.index === currLocation.index) {
-          return 'link current-link'; // Apply both 'link' and 'current-link' classes
-        }
-        return 'link'; // Apply only the 'link' class
-      });
+      );
 
-    const node = g //responsible for rendering nodes in d3 visualization tree
+    const node = g
       .selectAll('.node')
       .data(d3root.descendants())
       .enter()
       .append('g')
-      .style('cursor', 'pointer')
-      .attr('class', `snapshotNode`)
+      .attr('class', (d) => {
+        const baseClass = 'node';
+        const internalClass = d.children ? ' node--internal' : '';
+        const activeClass = d.data.index === currLocation.index ? ' active' : '';
+        return baseClass + internalClass + activeClass;
+      })
+      .attr('transform', (d) => `translate(${d.x},${d.y})`);
+
+    // Add click handler for nodes
+    node
       .on('click', (event, d) => {
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
-        /*
-          created popup div and appended it to display div(returned in this function) 
 
-          D3 doesn't utilize z-index for priority, rather decides on placement by order of rendering needed to define the return div with a className to have a target to append to with the correct level of priority
-        */
         function renderToolTip() {
           const [x, y] = d3.pointer(event);
           const div = d3
@@ -268,10 +264,6 @@ function History(props: Record<string, unknown>): JSX.Element {
         if (event.relatedTarget.id !== `tt-${d.data.index}`) {
           d3.selectAll('.tooltip').transition().delay(100).remove();
         }
-      })
-
-      .attr('transform', function (d) {
-        return `translate(${d.x},${d.y})`;
       });
 
     const tooltip = d3
@@ -283,25 +275,14 @@ function History(props: Record<string, unknown>): JSX.Element {
         d3.selectAll('.tooltip').remove();
       });
 
-    node
-      .append('circle')
-      .attr('fill', (d) => {
-        if (d.data.index === currLocation.index) {
-          return '#284b63';
-        }
-        return d.color ? d.color : '#555';
-      })
-      .attr('r', 18);
+    node.append('circle').attr('r', 18);
 
     node
       .append('text')
       .attr('dy', '0.31em')
       .attr('text-anchor', 'middle')
-      .attr('fill', 'white')
-      .text((d) => `${d.data.name}.${d.data.branch}`)
-      .clone(true)
-      .lower()
-      .attr('stroke', 'white');
+      .text((d) => `${d.data.name}.${d.data.branch}`);
+
     return svg.node();
   };
 

src/app/styles/components/d3graph.css

@@ -1,95 +1,95 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
-body {
-	background-color: black;
+/* Base node styling */
+.node {
+  cursor: pointer;
+  fill-opacity: 1;
+  transition: all 200ms ease;
 }
 
-.node {
-	cursor: pointer;
-	fill-opacity: 0.8;
+/* Node circle styling */
+.node circle {
+  fill: #ffffff;
+  stroke: #e5e7eb;
+  stroke-width: 2px;
+  transition: all 200ms ease;
 }
 
-/*   this represents leaf nodes aka nodes with no children */
-.node text {
-	fill: #fae6e4;
-	background-color: red;
-	font-size: 10px;
-	font-family: 'Outfit', sans-serif;
+.node:hover circle {
+  fill: #14b8a6;
+  stroke: #0d9488;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
-/*   modifies text of parent nodes (has children) */
-.node--internal text {
-	fill: white;
-	font-size: 10px;
+/* Node text styling */
+.node text {
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  fill: #374151;
 }
-.link {
-	fill: none;
-	stroke: #161617;
-	stroke-opacity: 0.4;
-	stroke-width: 3px;
+
+/* Parent node specific styling */
+.node--internal circle {
+  fill: #ffffff;
+  stroke: #e5e7eb;
 }
 
-div.tooltip {
-	position: absolute;
-	padding: 0.5rem 1rem;
-	color: white;
-	z-index: 100;
-	font-size: 14px;
-	font-family: 'Outfit', sans-serif;
-	background: rgb(17, 17, 17, 0.9);
-	box-shadow: rgb(33 33 33 / 20%) 0px 1px 2px;
-	border-radius: 5px;
-	max-width: 300px;
+.node--internal:hover circle {
+  fill: #14b8a6;
+  stroke: #0d9488;
 }
 
-.d3-tip {
-	line-height: 1;
-	padding: 6px;
-	background: #679dca;
-	color: #2b2f39;
-	border-radius: 4px;
-	font-size: 13px;
-	max-width: 400px;
-	overflow-wrap: break-word;
-	font-family: 'Overpass Mono', monospace;
+.node--internal text {
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  fill: #374151;
 }
 
-/* Creates a small triangle extender for the tooltip */
-.d3-tip:after {
-	box-sizing: border-box;
-	display: inline;
-	font-size: 15px;
-	line-height: 1;
-	color: #679dca;
-	content: '\25BC';
-	position: absolute;
-	text-align: center;
+/* Current/active node styling */
+.node.active circle {
+  fill: #14b8a6;
+  stroke: #0d9488;
 }
 
-/* Style northward tooltips specifically */
-.d3-tip.n:after {
-	margin: -2px 0 0 0;
-	top: 100%;
-	left: 0;
+/* Link styling */
+.link {
+  fill: none;
+  stroke: #e5e7eb;
+  stroke-width: 2px;
+  transition: stroke 200ms ease;
 }
 
-.history-d3-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	height: calc(100% - 70px);
+.link:hover {
+  stroke: #d1d5db;
 }
 
-.perf-d3-container {
-	height: calc(100% - 70px);
+/* Current path highlight */
+.link.current-link {
+  stroke: #14b8a6;
+  stroke-opacity: 0.6;
 }
 
-.perf-d3-svg {
-	display: block;
+/* Tooltip styling */
+div.tooltip {
+  position: absolute;
+  padding: 12px 16px;
+  color: #374151;
+  z-index: 100;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  max-width: 300px;
+  transition: all 200ms ease;
 }
 
-.perf-chart-labels {
-	font: 1.3em sans-serif;
-	fill: #2a2f3a;
-	pointer-events: none;
-	text-anchor: middle;
-}
+/* Container styling */
+.history-d3-container svg {
+  background-color: #f9fafb;
+}