chore: save progress

packages/webpage-refactor/components/graph/graph.js

@@ -40,8 +40,10 @@ const getEdgeLabel = async (squiggleString) => {
 
 export function Graph({ listOfElements, links }) {
   const containerRef = useRef();
+  const [visibility, setVisibility] = useState("invisible");
 
   const callEffect = async (listOfElements, links) => {
+    setVisibility("invisible");
     cytoscape.use(spread); // spread
 
     let nodeElements = listOfElements.map((element) => {
@@ -73,7 +75,7 @@ export function Graph({ listOfElements, links }) {
             //"text-valign": "bottom",
             "text-justification": "auto",
           },
-          padding: 10,
+          padding: 2,
         },
         {
           selector: "edge",
@@ -108,13 +110,14 @@ export function Graph({ listOfElements, links }) {
         name: "spread", // circle, grid, dagre
         minDist: 10,
         //prelayout: false,
-        //animate: "end", // whether to transition the node positions
-        animationDuration: 0, // duration of animation in ms if enabled
+        // animate: false, // whether to transition the node positions
+        // animationDuration: 250, // duration of animation in ms if enabled
       },
       userZoomingEnabled: false,
       userPanningEnabled: false,
     };
     cytoscape(config);
+    setTimeout(() => setVisibility(""), 700);
   };
   useEffect(async () => {
     await callEffect(listOfElements, links);
@@ -123,7 +126,9 @@ export function Graph({ listOfElements, links }) {
 
   return (
     <div>
-      <div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
+      <div className={visibility}>
+        <div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
+      </div>
       <button
         className={effectButtonStyle}
         onClick={() => callEffect(listOfElements, links)}

packages/webpage-refactor/components/homepage.js

@@ -13,7 +13,7 @@ export function Homepage({ listOfElementsInit }) {
 
   // list of elements
   const [listOfElements, setListOfElements] = useState(
-    listOfElementsInit.slice(0, 5)
+    listOfElementsInit //.slice(0, 5)
   );
 
   // number of steps
@@ -104,14 +104,14 @@ export function Homepage({ listOfElementsInit }) {
   };
 
   return (
-    <div>
+    <div className="block w-full items-center sm:w-full mt-10">
       <ProgressIndicator
         numStepsNow={numStepsNow}
         numElements={listOfElements.length}
       />
       {/* Comparisons section */}
       <div className={"" /*isListOrdered ? "hidden" : ""*/}>
-        <div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
+        <div className="flex justify-evenly mt-10">
           <DisplayElementForComparison
             element={pairCurrentlyBeingCompared[0]}
           ></DisplayElementForComparison>

packages/webpage-refactor/lib/truncateNums.js

@@ -1,25 +1,36 @@
-export const truncateValueForDisplay = (value) => {
-  if (value > 10) {
-    return Number(Math.round(value).toPrecision(2));
-  } else if (value > 1) {
-    return Math.round(value * 10) / 10;
-  } else if (num > 0) {
-    let candidateNumSignificantDigits =
-      -Math.floor(Math.log(num) / Math.log(10)) + 1;
-    let numSignificantDigits = topOutAt100AndValidate(
-      candidateNumSignificantDigits
-    );
-    result = num.toFixed(numSignificantDigits);
-  } else if (-1 < num) {
-    let candidateNumSignificantDigits =
-      -Math.floor(Math.log(Math.abs(num)) / Math.log(10)) + 1;
-    let numSignificantDigits = topOutAt100AndValidate(
-      candidateNumSignificantDigits
-    );
-    result = num.toFixed(numSignificantDigits);
-  } else if (num <= -1) {
-    result = "-" + toLocale(truncateValueForDisplay(-num));
+let topOutAt100AndValidate = (x) => {
+  // return 10;
+  if (x == x) {
+    return x > 99 ? 99 : x < 0 ? 2 : x;
   } else {
-    result = toLocale(num); //return "~0"
+    return 10;
   }
 };
+
+export const truncateValueForDisplay = (value) => {
+  let result;
+  if (value > 10) {
+    result = Number(Math.round(value).toPrecision(2));
+  } else if (value > 1) {
+    result = Math.round(value * 10) / 10;
+  } else if (value > 0) {
+    let candidateNumSignificantDigits =
+      -Math.floor(Math.log(value) / Math.log(10)) + 1;
+    let numSignificantDigits = topOutAt100AndValidate(
+      candidateNumSignificantDigits
+    );
+    result = value.toFixed(numSignificantDigits);
+  } else if (-1 < value) {
+    let candidateNumSignificantDigits =
+      -Math.floor(Math.log(Math.abs(value)) / Math.log(10)) + 1;
+    let numSignificantDigits = topOutAt100AndValidate(
+      candidateNumSignificantDigits
+    );
+    result = value.toFixed(numSignificantDigits);
+  } else if (value <= -1) {
+    result = "-" + toLocale(truncateValueForDisplay(-value));
+  } else {
+    result = toLocale(value); //return "~0"
+  }
+  return result;
+};

packages/webpage-refactor/pages/_app.js

@@ -7,7 +7,7 @@ import { Title } from "../components/title.js";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <div className="block flex-col items-center justify-center min-h-screen py-2">
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
       {/* Webpage name & favicon */}
       <div className="mt-10">
         <Head>
@@ -15,7 +15,7 @@ function MyApp({ Component, pageProps }) {
           <link rel="icon" href="/favicon.ico" />
         </Head>
         {/* Content */}
-        <main className="flex flex-col items-center w-full flex-1 px-20 text-center">
+        <main className="inline flex-col items-center w-full flex-1 px-20 text-center">
           <Title />
           <Component {...pageProps} />
         </main>

packages/webpage-refactor/styles/cytoscape.css

@@ -1,5 +1,5 @@
 .simple-react-cytoscape {
-  width: 600px;
-  height: 600px;
+  width: 900px;
+  height: 900px;
   border-style: dashed;
 }