history nodes styled, working on state properties that are objects

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -21,7 +21,7 @@ const defaultMargin: DefaultMargin = {
 };
 
 // Fixed node separation distances
-const FIXED_NODE_HEIGHT = 120; // Vertical distance between nodes
+const FIXED_NODE_HEIGHT = 200; // Vertical distance between nodes
 const FIXED_NODE_WIDTH = 220; // Horizontal distance between nodes
 
 // main function exported to StateRoute
@@ -212,8 +212,8 @@ function History(props: Record<string, unknown>): JSX.Element {
     // Add rectangles for nodes with consistent size
     node
       .append('rect')
-      .attr('width', 180)
-      .attr('height', 80)
+      .attr('width', 250)
+      .attr('height', 120)
       .attr('x', -90)
       .attr('y', -40)
       .attr('rx', 8)
@@ -232,12 +232,11 @@ function History(props: Record<string, unknown>): JSX.Element {
       .append('foreignObject')
       .attr('x', -85)
       .attr('y', -15)
-      .attr('width', 170)
-      .attr('height', 65)
+      .attr('width', 250)
+      .attr('height', 200)
       .append('xhtml:div')
       .style('font-size', '12px')
-      .style('overflow-y', 'auto')
-      .style('text-align', 'center')
+      .style('text-align', 'left')
       .html((d) => findDiff(d.data.index));
 
     return svg.node();

src/app/styles/components/d3graph.css

@@ -10,12 +10,13 @@
 .node rect {
   fill: #ffffff;
   stroke: #e5e7eb;
-  stroke-width: 2px;
+  stroke-width: 1px;
   transition: all 200ms ease;
 }
 
 .node:hover rect {
   stroke: #14b8a6;
+  stroke-width: 2px;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
@@ -35,6 +36,7 @@
 
 .node--internal:hover rect {
   stroke: #14b8a6;
+  stroke-width: 2px;
 }
 .node--internal text {
   font-family: 'Outfit', sans-serif;
@@ -46,6 +48,7 @@
 /* Current/active node styling */
 .node.active rect {
   stroke: #14b8a6;
+  stroke-width: 2px;
 }
 
 /* Link styling */

src/app/styles/components/diff.css

@@ -1,149 +1,87 @@
 @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: 12px;
+  font-size: 14px;
   margin: 0;
+  padding: 0;
   display: inline-block;
 }
 .jsondiffpatch-delta pre {
   font-family: 'Outfit', sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   margin: 0;
   padding: 0;
   display: inline-block;
 }
 ul.jsondiffpatch-delta {
   list-style-type: none;
-  padding: 0 0 0 20px;
+  padding: 0 0 0 12px;
   margin: 0;
 }
 .jsondiffpatch-delta ul {
   list-style-type: none;
-  padding: 0 0 0 20px;
+  padding: 0 0 0 12px;
   margin: 0;
 }
+
 .jsondiffpatch-added .jsondiffpatch-property-name,
 .jsondiffpatch-added .jsondiffpatch-value pre,
 .jsondiffpatch-modified .jsondiffpatch-right-value pre,
 .jsondiffpatch-textdiff-added {
-  background: #5a6c46;
+  color: #14b8a6;
 }
 .jsondiffpatch-deleted .jsondiffpatch-property-name,
 .jsondiffpatch-deleted pre,
 .jsondiffpatch-modified .jsondiffpatch-left-value pre,
 .jsondiffpatch-textdiff-deleted {
-  background: #fccdda;
   text-decoration: line-through;
+  color: #dc2626;
 }
-.jsondiffpatch-unchanged,
-.jsondiffpatch-movedestination {
-  color: #81929e;
-}
-.jsondiffpatch-unchanged,
-.jsondiffpatch-movedestination > .jsondiffpatch-value {
-  transition: all 0.5s;
-  -webkit-transition: all 0.5s;
-  overflow-y: hidden;
-}
-.jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-showing .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 100px;
-}
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 0;
-}
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value,
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  display: block;
-}
-.jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-visible .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 100px;
-}
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 0;
-}
-.jsondiffpatch-unchanged-showing .jsondiffpatch-arrow,
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow {
-  display: none;
-}
+
 .jsondiffpatch-value {
   display: inline-block;
 }
 .jsondiffpatch-property-name {
   display: inline-block;
-  padding-right: 5px;
-  vertical-align: top;
+  padding-right: 4px;
 }
+
 .jsondiffpatch-property-name:after {
   content: ': ';
 }
-.jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
-  content: ': [';
-}
-.jsondiffpatch-child-node-type-array:after {
-  content: '],';
-}
-div.jsondiffpatch-child-node-type-array:before {
-  content: '[';
-}
-div.jsondiffpatch-child-node-type-array:after {
-  content: ']';
-}
-.jsondiffpatch-child-node-type-object > .jsondiffpatch-property-name:after {
-  content: ': {';
-}
-.jsondiffpatch-child-node-type-object:after {
-  content: '},';
-}
-div.jsondiffpatch-child-node-type-object:before {
-  content: '{';
-}
-div.jsondiffpatch-child-node-type-object:after {
-  content: '}';
-}
-.jsondiffpatch-value pre:after {
-  content: ',';
-}
+
 li:last-child > .jsondiffpatch-value pre:after,
 .jsondiffpatch-modified > .jsondiffpatch-left-value pre:after {
   content: '';
 }
+
 .jsondiffpatch-modified .jsondiffpatch-value {
   display: inline-block;
 }
+
 .jsondiffpatch-modified .jsondiffpatch-right-value {
-  margin-left: 5px;
-}
-.jsondiffpatch-moved .jsondiffpatch-value {
-  display: none;
+  margin-left: 6px;
 }
+
 .jsondiffpatch-moved .jsondiffpatch-moved-destination {
   display: inline-block;
-  background: #ffffbb;
-  color: #888;
+  color: #ffffbb;
 }
+
 .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {
   content: ' => ';
 }
-ul.jsondiffpatch-textdiff {
-  padding: 0;
-}
+
 .jsondiffpatch-textdiff-location {
-  color: #bbb;
+  color: #ffffbb;
   display: inline-block;
   min-width: 60px;
 }
+
 .jsondiffpatch-textdiff-line {
   display: inline-block;
 }
+
 .jsondiffpatch-textdiff-line-number:after {
   content: ',';
 }
-.jsondiffpatch-error {
-  background: red;
-  color: white;
-  font-weight: bold;
-}