feat: introduce weighting and popularity

src/Analysis.tsx

@@ -15,6 +15,8 @@ interface Params {
   arrowSize: number;
   fontSize: number;
   distance: number;
+  weighting: boolean;
+  popularity: boolean;
 }
 
 export default function Analysis() {
@@ -25,6 +27,8 @@ export default function Analysis() {
     arrowSize: 20,
     fontSize: 10,
     distance: 2,
+    weighting: true,
+    popularity: true,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -56,6 +60,26 @@ export default function Analysis() {
       </button>
       <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
+        <div className="control">
+          <div className="checkBox">
+            <label>weighting</label>
+            <input
+              type="checkbox"
+              checked={params.weighting}
+              onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
+              onMouseUp={() => loadImage()}
+            /></div>
+
+          <div className="checkBox">
+            <label>popularity</label>
+            <input
+              type="checkbox"
+              checked={params.popularity}
+              onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
+            />
+          </div>
+        </div>
+
         <div className="control">
           <label>distance between nodes</label>
           <input

src/App.css

@@ -50,7 +50,7 @@ h3 {
 
   button,
   img {
-    padding: 0 1em;
+    padding: 0px 1em 4px 1em;
     margin: 3px auto;
   }
 }
@@ -146,7 +146,8 @@ button {
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 1px solid #404040;
+  justify-content: center;
+  border: 2px solid #404040;
   padding: 8px;
 }