we do a little optimization

Author: electron271

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 
 # sensitive files
 .env
+
+# Million Lint
+.million

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@million/lint": "^1.0.14",
     "@react-sigma/core": "^4.0.3",
     "@react-sigma/layout-circular": "^4.0.3",
     "@react-sigma/layout-core": "^4.0.3",

src/App.tsx

@@ -102,8 +102,8 @@ export const LoadGraph = () => {
         });
 
         // map weight to size of edges
-        const minEdgeMult = 0.1; // minimum multiplier from weight to size
-        const maxEdgeMult = 10; // maximum multiplier from weight to size
+        const minEdgeMult = 0.05; // minimum multiplier from weight to size
+        const maxEdgeMult = 5; // maximum multiplier from weight to size
         graph.forEachEdge((edge) => {
           const weight = graph.getEdgeAttribute(edge, "weight");
           const size =
@@ -150,7 +150,7 @@ export const LoadGraph = () => {
         const sensibleSettings = forceAtlas2.inferSettings(graph);
         forceAtlas2.assign(graph, {
           // assign the forceAtlas2 layout
-          iterations: 50,
+          iterations: 15,
           settings: {
             scalingRatio: 500,
             ...sensibleSettings,

src/Utils.tsx

@@ -70,7 +70,7 @@ function getMinMaxWeightedDegrees(graph: Graph) {
 function getNodeSize(graph: Graph, node: string) {
   const degree = weightedDegree(graph, node);
   const { minDegree, maxDegree } = getMinMaxWeightedDegrees(graph);
-  return scale(degree, minDegree, maxDegree, 1.5, 10);
+  return scale(degree, minDegree, maxDegree, 1.5, 5);
 }
 
 // Get color of a target node

src/components/Controls.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, memo } from "react";
 
 import {
   ControlsContainer,
@@ -13,7 +13,7 @@ import "../index.css";
 
 // import { LayoutsControl } from "../../common/LayoutsControl";
 
-export const Complete: FC = () => {
+export const Complete: FC = memo(() => {
   return (
     // this crap <>
     // you have to wrap it in an empty element???? 
@@ -31,4 +31,4 @@ export const Complete: FC = () => {
       </ControlsContainer>
     </>
   );
-};
+});

src/components/DescriptionPanel.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState, useMemo } from "react";
 import { BsInfoCircle } from "react-icons/bs";
 import { MdExpandLess, MdExpandMore } from "react-icons/md";
 import AnimateHeight from "react-animate-height";
@@ -20,6 +20,16 @@ const Panel: FC<PropsWithChildren<{ title: ReactNode | string; initiallyDeployed
       }, DURATION);
   }, [isDeployed]);
 
+  const memoizedAnimateHeight = useMemo(() => (
+    <AnimateHeight duration={DURATION} height={isDeployed ? "auto" : 0}>
+      {children}
+    </AnimateHeight>
+  ), [isDeployed, children]);
+
+  const memoizedMdExpandLess = useMemo(() => (
+    <MdExpandLess style={{ fontSize: "1.5rem" }} />
+  ), []);
+
   return (
     <div className="panel dark:bg-black dark:text-white" ref={dom}>
       <h2 className="flex items-center justify-between">
@@ -30,15 +40,13 @@ const Panel: FC<PropsWithChildren<{ title: ReactNode | string; initiallyDeployed
           className="p-2"
         >
           {isDeployed ? (
-            <MdExpandLess style={{ fontSize: "1.5rem" }} />
+            memoizedMdExpandLess
           ) : (
             <MdExpandMore style={{ fontSize: "1.5rem" }} />
           )}
         </button>
       </h2>
-      <AnimateHeight duration={DURATION} height={isDeployed ? "auto" : 0}>
-        {children}
-      </AnimateHeight>
+      {memoizedAnimateHeight}
     </div>
   );
 };

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from 'tailwindcss'
+import MillionLint from '@million/lint';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [MillionLint.vite(), react()],
   css: {
     postcss: {
       plugins: [tailwindcss()],