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