improve visual settings

Author: yilinxia

src/lib/consts.ts

@@ -45,7 +45,7 @@ export const DEFAULT_EDGE_SIZE_RATIO = 1;
 export const EDGE_SIZE_RATIO_STEP = 0.001;
 
 export const MIN_LABEL_SIZE = 5;
-export const MAX_LABEL_SIZE = 50;
+export const MAX_LABEL_SIZE = 30;
 export const DEFAULT_LABEL_SIZE = 14;
 export const LABEL_SIZE_STEP = 1;
 

src/lib/graph.ts

@@ -45,7 +45,8 @@ export function applyNodeLabelSizes(
   const minSize = typeof minLabelSize === "number" ? minLabelSize : DEFAULT_LABEL_SIZE;
   const maxSize = typeof maxLabelSize === "number" ? maxLabelSize : DEFAULT_LABEL_SIZE;
   const extentDelta = nodeSizeExtents[1] - nodeSizeExtents[0];
-  const factor = (maxSize - minSize) / (extentDelta || 1);
+  // Guard against tiny ranges to avoid blowing up the factor
+  const safeDelta = Math.max(extentDelta, 1e-6);
   graph.forEachNode((node, nodeData) => {
     let nodeSize: number;
     if (nodeSizeField === "pagerank") {
@@ -57,7 +58,13 @@ export function applyNodeLabelSizes(
     } else {
       nodeSize = nodeData.rawSize;
     }
-    graph.setNodeAttribute(node, "labelSize", minSize + (nodeSize - nodeSizeExtents[0]) * factor);
+    // Normalize to [0, 1]
+    const tRaw = (nodeSize - nodeSizeExtents[0]) / safeDelta;
+    const t = Math.max(0, Math.min(1, tRaw));
+    // Smoothstep easing for gradual change
+    const eased = t * t * (3 - 2 * t);
+    const label = minSize + (maxSize - minSize) * eased;
+    graph.setNodeAttribute(node, "labelSize", label);
   });
 }
 

src/utils/threshold.ts

@@ -9,5 +9,12 @@ export function stateToInputThreshold(v: number): number {
 export function inputToStateThreshold(v: number): number {
   if (v <= MIN_LABEL_THRESHOLD) return Infinity;
   if (v >= MAX_LABEL_THRESHOLD) return 0;
-  return 6 / v;
+  // Create a smooth, continuous mapping from slider value to threshold
+  // Map [MIN_LABEL_THRESHOLD, MAX_LABEL_THRESHOLD] to [Infinity, 0.1]
+  const normalized = (v - MIN_LABEL_THRESHOLD) / (MAX_LABEL_THRESHOLD - MIN_LABEL_THRESHOLD);
+  // Use smoothstep easing for gradual, natural-feeling control
+  const eased = normalized * normalized * (3 - 2 * normalized);
+  // Map to a reasonable threshold range: Infinity -> 20 -> 10 -> 5 -> 2 -> 0.1
+  const threshold = Math.max(0.1, 20 * Math.pow(0.5, eased * 4));
+  return threshold;
 }

src/views/Settings.tsx

@@ -1,7 +1,7 @@
 import cx from "classnames";
 import { isEqual, keyBy, uniqBy } from "lodash";
 import Slider, { SliderProps } from "rc-slider";
-import React, { FC, useContext, useState, useMemo } from "react";
+import React, { FC, useContext, useState, useMemo, useEffect } from "react";
 import { FaTimes, FaUndo } from "react-icons/fa";
 import { FaGear, FaNetworkWired } from "react-icons/fa6";
 import { VscSettings } from "react-icons/vsc";
@@ -38,6 +38,21 @@ const Settings: FC = () => {
   const maxLabelSize = typeof navState.maxLabelSize === "number" ? navState.maxLabelSize : DEFAULT_LABEL_SIZE;
   const labelThresholdRatio =
     typeof navState.labelThresholdRatio === "number" ? navState.labelThresholdRatio : DEFAULT_LABEL_THRESHOLD;
+  // Local UI state for smoother sliders
+  const [localMinLabelSize, setLocalMinLabelSize] = useState<number>(minLabelSize);
+  const [localMaxLabelSize, setLocalMaxLabelSize] = useState<number>(maxLabelSize);
+  const [localLabelThresholdRatio, setLocalLabelThresholdRatio] = useState<number>(labelThresholdRatio);
+
+  // Keep local slider values in sync if navState changes elsewhere
+  useEffect(() => {
+    setLocalMinLabelSize(minLabelSize);
+  }, [minLabelSize]);
+  useEffect(() => {
+    setLocalMaxLabelSize(maxLabelSize);
+  }, [maxLabelSize]);
+  useEffect(() => {
+    setLocalLabelThresholdRatio(labelThresholdRatio);
+  }, [labelThresholdRatio]);
 
   const { fields, fieldsIndex } = data;
 
@@ -170,21 +185,27 @@ const Settings: FC = () => {
         <div className="pb-3">
           <Slider
             range
-            value={[minLabelSize, maxLabelSize]}
+            value={[localMinLabelSize, localMaxLabelSize]}
             min={MIN_LABEL_SIZE}
             max={MAX_LABEL_SIZE}
             step={LABEL_SIZE_STEP}
             marks={{
               [MIN_LABEL_SIZE]: MIN_LABEL_SIZE,
               [MAX_LABEL_SIZE]: MAX_LABEL_SIZE,
-              [minLabelSize]: minLabelSize,
-              [maxLabelSize]: maxLabelSize,
+              [localMinLabelSize]: localMinLabelSize,
+              [localMaxLabelSize]: localMaxLabelSize,
             }}
             onChange={
-              (([minLabelSize, maxLabelSize]: number[]) => {
-                setNavState({ ...navState, minLabelSize, maxLabelSize });
+              (([minValue, maxValue]: number[]) => {
+                setLocalMinLabelSize(minValue);
+                setLocalMaxLabelSize(maxValue);
               }) as SliderProps["onChange"]
             }
+            onAfterChange={
+              (([minValue, maxValue]: number[]) => {
+                setNavState({ ...navState, minLabelSize: minValue, maxLabelSize: maxValue });
+              }) as SliderProps["onAfterChange"]
+            }
             // Styles:
             {...RANGE_STYLE}
           />
@@ -279,7 +300,7 @@ const Settings: FC = () => {
         </h3>
         <div className="pb-3">
           <Slider
-            value={labelThresholdRatio}
+            value={localLabelThresholdRatio}
             min={MIN_LABEL_THRESHOLD}
             max={MAX_LABEL_THRESHOLD}
             step={LABEL_THRESHOLD_STEP}
@@ -300,6 +321,8 @@ const Settings: FC = () => {
             }}
             onChange={
               ((v: number) => {
+                setLocalLabelThresholdRatio(v);
+                // Update graph in real-time for better responsiveness
                 setNavState({ ...navState, labelThresholdRatio: v });
               }) as SliderProps["onChange"]
             }