feat: align graph

lib/comparisonView.js

@@ -319,10 +319,16 @@ export default function ComparisonView({ listOfElementsForView }) {
   }) => {
     if (!dontPushSubmitButtonAnyMore) {
       if (inputValue < 1 && inputValue > 0) {
-        inputValue = 1 / inputValue;
-        [element1, element2] = [element2, element1];
+        let inverse = 1 / inputValue;
+        if (squiggleString == inputValue) {
+          inputValue = inverse;
+          squiggleString = inverse;
+        } else {
+          inputValue = inverse;
           squiggleString = `(${squiggleString})^(-1)`;
         }
+        [element1, element2] = [element2, element1];
+      }
       console.log(`posList@nextStepInput:`);
       console.log(posList);
       let [successStatus, result] = nextStepSimple(
@@ -470,7 +476,7 @@ export default function ComparisonView({ listOfElementsForView }) {
         {/* Results section */}
         <div className={isListOrdered ? "" : "hidden"}>
           {/* Graph */}
-          <div className="flex items-center text-center ">
+          <div className="flex items-center text-center">
             <DrawGraph
               isListOrdered={isListOrdered}
               orderedList={orderedList}

lib/labeledGraph.js

@@ -7,7 +7,7 @@ import {
   formatLargeOrSmall,
 } from "./utils.js";
 
-const displayWidthPercentage = 0.7; // 0.85; // 0.7
+const displayWidthPercentage = 0.85; // 0.85; // 0.7
 
 let getlength = (number) => number.toString().length;
 
@@ -48,7 +48,7 @@ function drawGraphInner({ nodes, links }) {
   // Build the d3 graph
 
   removeOldSvg();
-  var svg = d3
+  let svg = d3
     .select("#graph")
     .append("svg")
     .attr("width", width + margin.left + margin.right)
@@ -147,6 +147,7 @@ function drawGraphInner({ nodes, links }) {
     })
     .text(function (d) {
       let distanceFormatted = formatLargeOrSmall(Number(d.distance));
+      return distanceFormatted;
       if (d.distance == d.squiggleString || !d.squiggleString) {
         return distanceFormatted;
       } else {
@@ -158,6 +159,7 @@ function drawGraphInner({ nodes, links }) {
       //return(Number(d.distance).toPrecision(2).toString())
     })
     .style("text-anchor", "middle");
+  // background
 }
 
 export function DrawGraph({
@@ -174,8 +176,11 @@ export function DrawGraph({
     drawGraphInner({ nodes, links });
   }
   return (
-    <div>
-      <div id="graph"></div>
+    <div className="flex w-full items-center ">
+      <div
+        id="graph"
+        className="mx-auto flex justify-center w-full bg-red"
+      ></div>
     </div>
   );
 }