From bf400502e57e0454a02189ab120577992df31b04 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Mon, 31 Jan 2022 17:30:26 -0500
Subject: [PATCH] feat: Show squiggle function on the graph

---
 lib/comparisonView.js | 15 +++++++++------
 lib/findPaths.js      |  2 +-
 lib/labeledGraph.js   | 16 ++++++++++++----
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/lib/comparisonView.js b/lib/comparisonView.js
index 50a34a1..59867e4 100644
--- a/lib/comparisonView.js
+++ b/lib/comparisonView.js
@@ -22,12 +22,15 @@ const estimatedMergeSortSteps = conservativeNumMergeSortSteps; // pander to huma
 
 /* Misc. helpers */
 let buildLinks = (quantitativeComparisons) =>
-  quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({
-    source: element1,
-    target: element2,
-    distance: distance,
-    reasoning: reasoning,
-  }));
+  quantitativeComparisons.map(
+    ([element1, element2, distance, reasoning, squiggleString]) => ({
+      source: element1,
+      target: element2,
+      distance: distance,
+      reasoning: reasoning,
+      squiggleString: squiggleString,
+    })
+  );
 
 Array.prototype.containsArray = function (val) {
   var hash = {};
diff --git a/lib/findPaths.js b/lib/findPaths.js
index 330ce05..b44dd50 100644
--- a/lib/findPaths.js
+++ b/lib/findPaths.js
@@ -288,7 +288,7 @@ export function CreateTable({ tableRows }) {
     return result;
   }
   return (
-    <div>
+    <div className="w-full">
       <table className="w-full">
         <thead>
           <tr>
diff --git a/lib/labeledGraph.js b/lib/labeledGraph.js
index 2367928..93b3eed 100644
--- a/lib/labeledGraph.js
+++ b/lib/labeledGraph.js
@@ -7,7 +7,7 @@ import {
   formatLargeOrSmall,
 } from "./utils.js";
 
-const displayWidthPercentage = 0.85; // 0.7
+const displayWidthPercentage = 0.7; // 0.85; // 0.7
 
 let getlength = (number) => number.toString().length;
 
@@ -29,7 +29,7 @@ function drawGraphInner({ nodes, links }) {
   // let width = 900 - margin.left - margin.right;
 
   let initialWindowWidth = window.innerWidth;
-  let margin = { top: 0, right: 10, bottom: 30, left: 10 };
+  let margin = { top: 0, right: 10, bottom: 20, left: 10 };
   let width =
     initialWindowWidth * displayWidthPercentage - margin.left - margin.right;
 
@@ -142,10 +142,16 @@ function drawGraphInner({ nodes, links }) {
       // X position of start node on the X axis
       let end = x(d.target);
       // X position of end node
-      return height - 32 - Math.abs(start - end) / 2; //height-30
+      return height - 36 - Math.abs(start - end) / 2; //height-30
     })
     .text(function (d) {
-      return formatLargeOrSmall(Number(d.distance));
+      let distanceFormatted = formatLargeOrSmall(Number(d.distance));
+      if (d.distance == d.squiggleString || !d.squiggleString) {
+        return distanceFormatted;
+      } else {
+        return `${d.squiggleString} → ${distanceFormatted}`;
+      }
+
       // return (truncateValueForDisplay(Number(d.distance)))
       //return(Number(d.distance).toPrecision(2).toString())
     })
@@ -158,6 +164,8 @@ export function DrawGraph({
   listOfElements,
   links,
 }) {
+  console.log("LINKS:");
+  console.log(links);
   if (isListOrdered) {
     let nodes = orderedList.map((id, pos) => ({
       ...listOfElements[id],