fix expand and collapse

Author: yilinxia

src/lib/consts.ts

@@ -15,6 +15,7 @@ export const ARG_DATA_URI = import.meta.env.BASE_URL + "/arg_clusters.gexf";
 // Palettes
 export const PALETTES = RAW_PALETTES as Record<number, string[]>;
 export const MAX_PALETTE_SIZE = Math.max(...Object.keys(PALETTES).map((s) => +s));
+export const EXPAND_STEP_SIZE = 10; // Number of items to show when expanding
 export const GRADIENT = ["#99f3cb", "#222123"];
 
 // Graph rendering

src/lib/context.ts

@@ -6,7 +6,7 @@ import { ComputedData } from "./computedData";
 import { Data } from "./data";
 import { NavState } from "./navState";
 
-export const PANELS = ["main", "readability"] as const;
+export const PANELS = ["main", "settings"] as const;
 export type Panel = (typeof PANELS)[number];
 
 export const AppContext = createContext<{ portalTarget: HTMLDivElement }>({

src/views/ContextPanel.tsx

@@ -11,7 +11,7 @@ import { useNotifications } from "../lib/notifications";
 import Filters from "./Filters";
 import GraphSumUp from "./GraphSumUp";
 import NodesAppearanceBlock from "./NodesAppearanceBlock";
-import ReadabilityBlock from "./ReadabilityBlock";
+import Settings from "./Settings";
 import SelectedNodePanel from "./SelectedNodePanel";
 
 const ContextPanel: FC = () => {
@@ -31,8 +31,8 @@ const ContextPanel: FC = () => {
   );
 
   let content: JSX.Element;
-  if (panel === "readability") {
-    content = <ReadabilityBlock />;
+  if (panel === "settings") {
+    content = <Settings />;
   } else if (selectedNode) {
     content = <SelectedNodePanel node={navState?.selectedNode as string} data={selectedNode} />;
   } else {
@@ -60,9 +60,9 @@ const ContextPanel: FC = () => {
               <MdOutlinePreview /> Explore
             </button>
             <button
-              className={cx("btn ms-2 mt-1", panel === "readability" ? selectedButtonClass : "btn-outline-dark")}
-              onClick={() => setPanel("readability")}
-              disabled={panel === "readability"}
+              className={cx("btn ms-2 mt-1", panel === "settings" ? selectedButtonClass : "btn-outline-dark")}
+              onClick={() => setPanel("settings")}
+              disabled={panel === "settings"}
             >
               <VscSettings /> Settings
             </button>

src/views/EditionPanel.tsx

@@ -131,7 +131,7 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
               <button
                 type="button"
                 className="btn btn-outline-light btn-sm btn-inline"
-                onClick={() => setPanel("readability")}
+                onClick={() => setPanel("settings")}
               >
                 <VscSettings className="small" /> Settings
               </button>{" "}

src/views/Filters.tsx

@@ -10,7 +10,7 @@ import { MdBubbleChart } from "react-icons/md";
 import { RiFilterOffFill } from "react-icons/ri";
 
 import { RangeMetric, SearchMetrics, TermsMetric } from "../lib/computedData";
-import { MAX_PALETTE_SIZE, RANGE_STYLE } from "../lib/consts";
+import { MAX_PALETTE_SIZE, EXPAND_STEP_SIZE, RANGE_STYLE } from "../lib/consts";
 import { GraphContext } from "../lib/context";
 import { ContentField, QualiField, QuantiField, getFilterableFields, getValue } from "../lib/data";
 import { Filter, RangeFilter, SearchFilter, TermsFilter } from "../lib/navState";
@@ -38,11 +38,11 @@ const SearchFilterComponent: FC<{
         setFilter(
           value
             ? {
-                type: "search",
-                field: field.id,
-                value: value,
-                normalizedValue: normalize(value),
-              }
+              type: "search",
+              field: field.id,
+              value: value,
+              normalizedValue: normalize(value),
+            }
             : null,
         );
       }}
@@ -73,17 +73,30 @@ const TermsFilterComponent: FC<{
   const { data: graphData, setHovered } = useContext(GraphContext);
   const [alphaSort, setAlphaSort] = useState(false);
   const [expanded, setExpanded] = useState(false);
+  const [currentLimit, setCurrentLimit] = useState(MAX_PALETTE_SIZE);
   const maxCount = max(data.values.map((v) => v.globalCount)) as number;
   const filteredValues = filter?.values ? new Set(filter.values) : null;
 
   const showExpandToggle = data.values.length > MAX_PALETTE_SIZE;
+
+  const handleExpand = () => {
+    const newLimit = Math.min(currentLimit + EXPAND_STEP_SIZE, data.values.length);
+    setCurrentLimit(newLimit);
+    setExpanded(true);
+  };
+
+  const handleCollapse = () => {
+    setCurrentLimit(MAX_PALETTE_SIZE);
+    setExpanded(false);
+  };
+
   const values = useMemo(
     () =>
       take(
         alphaSort ? sortBy(data.values, (value) => value.label.toLowerCase()) : data.values,
-        showExpandToggle && !expanded ? MAX_PALETTE_SIZE : Infinity,
+        currentLimit,
       ),
-    [showExpandToggle, expanded, alphaSort, data.values],
+    [currentLimit, alphaSort, data.values],
   );
 
   return (
@@ -172,17 +185,21 @@ const TermsFilterComponent: FC<{
         })}
       </ul>
       {showExpandToggle && (
-        <button className="btn btn-link p-0 btn-sm" onClick={() => setExpanded((v) => !v)}>
-          {expanded ? (
-            <>
-              <FiMinus /> Only show {MAX_PALETTE_SIZE} first values
-            </>
-          ) : (
-            <>
-              <FiPlus /> Show all values ({data.values.length - values.length} more)
-            </>
+        <div className="d-flex flex-column gap-2 mt-2">
+          <div className="text-muted small">
+            Showing {currentLimit} of {data.values.length} values
+          </div>
+          {currentLimit < data.values.length && (
+            <button className="btn btn-link p-0 btn-sm" onClick={handleExpand}>
+              <FiPlus /> Show {Math.min(EXPAND_STEP_SIZE, data.values.length - currentLimit)} more values ({data.values.length - currentLimit} remaining)
+            </button>
           )}
-        </button>
+          {expanded && (
+            <button className="btn btn-link p-0 btn-sm text-muted" onClick={handleCollapse}>
+              <FiMinus /> Collapse to {MAX_PALETTE_SIZE} values
+            </button>
+          )}
+        </div>
       )}
     </>
   );
@@ -207,9 +224,9 @@ const RangeFilterComponent: FC<{
     (v) =>
       v === currentMin || v === currentMax
         ? {
-            label: shortenNumber(v),
-            style: { fontWeight: "bold", background: "white", padding: "0 0.2em", zIndex: 1 },
-          }
+          label: shortenNumber(v),
+          style: { fontWeight: "bold", background: "white", padding: "0 0.2em", zIndex: 1 },
+        }
         : shortenNumber(v),
   );
   const [inputValues, setInputValues] = useState<{ min: number; max: number }>({ min: currentMin, max: currentMax });

src/views/ReadabilityBlock.tsx src/views/Settings.tsxsrc/views/ReadabilityBlock.tsx renamed to src/views/Settings.tsx

@@ -29,7 +29,7 @@ interface Option {
   field?: string;
 }
 
-const ReadabilityBlock: FC = () => {
+const Settings: FC = () => {
   // const { navState, setNavState } = useContext(GraphContext);
   const { navState, setNavState, setShowEditionPanel, setShowEdgePanel, data } = useContext(GraphContext);
   const [initialNavState] = useState<NavState>(navState);
@@ -62,7 +62,7 @@ const ReadabilityBlock: FC = () => {
   const cancel = () => setNavState(initialNavState);
 
   return (
-    <div className="readability-block block">
+    <div className="settings-block block">
       <h1 className="fs-4 mt-4">
         <VscSettings /> Settings
       </h1>
@@ -312,4 +312,4 @@ const ReadabilityBlock: FC = () => {
   );
 };
 
-export default ReadabilityBlock;
+export default Settings;