feat: comparison changer

lib/comparisonView.js

@@ -373,17 +373,19 @@ export default function ComparisonView({ listOfElementsForView }) {
         </div>
 
         {/* Results section */}
-        <div>
+        <div className={isListOrdered ? "" : "hidden"}>
           {/* Graph */}
+          <div className="flex items-center text-center ">
           <DrawGraph
             isListOrdered={isListOrdered}
             orderedList={orderedList}
             listOfElements={listOfElements}
             links={buildLinks(quantitativeComparisons)}>
           </DrawGraph>
+          </div>
 
           {/* Comparison table */}
-          <div className={isListOrdered ? "inline items-center text-center mt-10" : "hidden"}>
+          <div className="flex items-center text-center ">
             <CreateTable
               isListOrdered={isListOrdered}
               orderedList={orderedList}
@@ -429,7 +431,7 @@ export default function ComparisonView({ listOfElementsForView }) {
             <button
               className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
               onClick={() => changeShowLoadComparisons(!showLoadComparisons)}>
-              Show/edit comparisons
+              Load comparisons
             </button>
           </div>
           {/* Button: Change dataset */}
@@ -451,10 +453,11 @@ export default function ComparisonView({ listOfElementsForView }) {
           <div className="text-left">
             <DisplayAsMarkdown
               markdowntext={`
+${""/*
 ## Comparisons
 ### Binary comparisons
 ${JSON.stringify(binaryComparisons, null, 4)}
-
+*/}
 ### Numerical comparisons
 ${JSON.stringify(nicelyFormatLinks(quantitativeComparisons, listOfElements), null, 4)}
               `}

lib/comparisonsChanger.js

@@ -67,7 +67,8 @@ Your old input was: ${value}`
   }
   return (
     <form onSubmit={handleSubmitInner} className="inline">
-      <br/>
+      <p>Load comparisons in the same style as in "Show comparisons".</p>
+      <p>These will override your current comparisons.</p>
       <br/>
       <textarea 
         value={value} 

lib/findPaths.js

@@ -248,7 +248,7 @@ export function CreateTable({ tableRows }) {
     }
     return (
         <div>
-            <table className="">
+            <table className="w-full">
                 <thead>
                     <tr >
                         <th >Id</th>

lib/labeledGraph.js

@@ -21,6 +21,12 @@ function drawGraphInner({ nodes, links }) {
     // Calculate the dimensions
     let margin = { top: 0, right: 30, bottom: 20, left: 30 };
     let width = 900 - margin.left - margin.right;
+
+   
+    let initialWindowWidth = window.innerWidth
+    let margin = { top: 0, right: 10, bottom: 30, left: 10 };
+    let width = initialWindowWidth*0.7 - margin.left - margin.right;
+    
     var x = d3.scalePoint()
         .range([0, width])
         .domain(nodeids)