[GraphCaption] node Size caption

copied from retina
relates #21

Author: paulgirard

src/components/GraphCaption/NodeSizeCaption.tsx

@@ -0,0 +1,82 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { GraphCaptionProps } from ".";
+import { Size } from "../../core/appearance/types";
+import { shortenNumber } from "../GraphFilters/utils";
+import { useSigmaAtom, useVisualGetters } from "../../core/context/dataContexts";
+
+const NodeSizeCaption: FC<
+  Pick<GraphCaptionProps, "minimal"> & {
+    nodesSize: Size;
+    range?: { min: number; max: number };
+  }
+> = ({ minimal, nodesSize, range }) => {
+  const sigma = useSigmaAtom();
+  // update nodeSize Size to camera updates from Sigma
+  const { getNodeSize } = useVisualGetters();
+
+  const [nodeSizeState, setNodeSizeState] = useState<
+    | {
+        minValue: number;
+        minRadius: number;
+        maxValue: number;
+        maxRadius: number;
+      }
+    | undefined
+  >(undefined);
+
+  const refreshState = useCallback(() => {
+    if (!sigma || !nodesSize.field || !range || !getNodeSize || !range) return null;
+
+    setNodeSizeState({
+      minValue: range.min,
+      minRadius: sigma.scaleSize(getNodeSize({ [nodesSize.field]: range.min })),
+      maxValue: range.max,
+      maxRadius: sigma.scaleSize(getNodeSize({ [nodesSize.field]: range.max })),
+    });
+  }, [getNodeSize, sigma, nodesSize.field, range]);
+
+  // Refresh caption when metric changes:
+  useEffect(() => {
+    refreshState();
+  }, [refreshState]);
+
+  // Refresh caption on camera update:
+  useEffect(() => {
+    sigma.getCamera().addListener("updated", refreshState);
+    return () => {
+      sigma.getCamera().removeListener("updated", refreshState);
+    };
+  }, [sigma, refreshState]);
+
+  if (nodesSize.field) {
+    return (
+      <div className="graph-caption-item">
+        <h4 className="fs-6">{nodesSize.field}:</h4>
+        {nodeSizeState && (
+          <div className="node-sizes">
+            <div>
+              <div className="circle-wrapper">
+                <div
+                  className="dotted-circle"
+                  style={{ width: nodeSizeState?.minRadius * 2, height: nodeSizeState?.minRadius * 2 }}
+                />
+              </div>
+              <div className="caption text-center">{shortenNumber(nodeSizeState?.minValue)}</div>
+            </div>
+            <div className="ms-2">
+              <div className="circle-wrapper">
+                <div
+                  className="dotted-circle"
+                  style={{ width: nodeSizeState?.maxRadius * 2, height: nodeSizeState?.maxRadius * 2 }}
+                />
+              </div>
+              <div className="caption text-center">{shortenNumber(nodeSizeState?.maxValue)}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  } else return null;
+};
+
+export default NodeSizeCaption;

src/components/GraphCaption/index.tsx

@@ -0,0 +1,76 @@
+import { FC, useMemo } from "react";
+
+import { useAppearance, useFilteredGraph, useGraphDataset, useSigmaAtom } from "../../core/context/dataContexts";
+import NodeSizeCaption from "./NodeSizeCaption";
+import { fromPairs, mapValues } from "lodash";
+import { DatalessGraph, ItemData } from "../../core/graph/types";
+
+export interface GraphCaptionProps {
+  minimal?: boolean;
+}
+
+const getAttributeRanges = (graph: DatalessGraph, itemData: Record<string, ItemData>, fields: string[]) => {
+  return graph.nodes().reduce((acc, n) => {
+    return mapValues(acc, (value, field) => {
+      const fieldValue = itemData[n][field];
+      if (fieldValue && (typeof fieldValue === "number" || !isNaN(+fieldValue)))
+        return { min: Math.min(value.min, +fieldValue), max: Math.max(value.max, +fieldValue) };
+      return value;
+    });
+  }, fromPairs(fields.map((f) => [f, { min: Infinity, max: -Infinity }])));
+};
+
+const GraphCaption: FC<GraphCaptionProps> = ({ minimal }) => {
+  const appearance = useAppearance();
+  const filteredGraph = useFilteredGraph();
+  const { nodeData, edgeData } = useGraphDataset();
+
+  // min-max values for ranking caption items
+  const rankingDataRanges = useMemo(() => {
+    const ranges: Record<"node" | "edge", Record<string, { min: number; max: number }>> = { node: {}, edge: {} };
+    // should we iterate on nodes
+    const nodeRankingFields = [appearance.nodesColor, appearance.nodesSize]
+      .map((appearanceSpec) => {
+        if (appearanceSpec.type === "ranking") {
+          return appearanceSpec.field;
+        }
+        return null;
+      })
+      .filter((f): f is string => f !== null);
+
+    if (nodeRankingFields.length > 0) {
+      ranges.node = getAttributeRanges(filteredGraph, nodeData, nodeRankingFields);
+    }
+    // should we iterate on edges
+    const edgeRankingFields = [appearance.edgesColor, appearance.edgesSize]
+      .map((appearanceSpec) => {
+        if (appearanceSpec.type === "ranking") {
+          return appearanceSpec.field;
+        }
+        return null;
+      })
+      .filter((f): f is string => f !== null);
+
+    if (edgeRankingFields.length > 0) {
+      ranges.edge = getAttributeRanges(filteredGraph, edgeData, edgeRankingFields);
+    }
+
+    return ranges;
+  }, [appearance, filteredGraph, nodeData, edgeData]);
+
+  //sigma.getNodeDisplayData(id).size
+
+  return (
+    <div title="caption" className="graph-caption">
+      <NodeSizeCaption
+        minimal={minimal}
+        nodesSize={appearance.nodesSize}
+        range={
+          appearance.nodesSize.field !== undefined ? rankingDataRanges.node[appearance.nodesSize.field] : undefined
+        }
+      />
+    </div>
+  );
+};
+
+export default GraphCaption;

src/styles/_graph-caption.scss

@@ -0,0 +1,24 @@
+.graph-caption {
+  // z-index: $zindex-caption;
+
+  .node-sizes {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  .circle-wrapper {
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    min-width: 30px;
+    justify-content: center;
+  }
+
+  .dotted-circle {
+    border-radius: 100%;
+    background: #cccccc66;
+    border: 2px dotted black;
+  }
+}

src/styles/index.scss

@@ -60,3 +60,4 @@
 @import "filters";
 @import "slider";
 @import "highlighjs";
+@import "graph-caption";

src/views/graphPage/GraphRendering.tsx

@@ -15,6 +15,7 @@ import { MarqueeController } from "./controllers/MarqueeController";
 import { EventsController } from "./controllers/EventsController";
 import NodeProgramBorder from "../../utils/bordered-node-program";
 import { resetCamera } from "../../core/sigma";
+import GraphCaption from "../../components/GraphCaption";
 
 function useFullScreen(): { toggle: () => void; isFullScreen: boolean } {
   const [isFullScreen, setFullScreen] = useState<boolean>(false);
@@ -86,6 +87,14 @@ const InteractionsController: FC = () => {
   );
 };
 
+const GraphCaptionLayer: FC = () => {
+  return (
+    <div className="position-absolute" style={{ left: 10, bottom: 10 }}>
+      <GraphCaption minimal />
+    </div>
+  );
+};
+
 export const GraphRendering: FC = () => {
   const sigmaGraph = useSigmaGraph();
   const { hoveredNode, hoveredEdge } = useSigmaState();
@@ -127,6 +136,7 @@ export const GraphRendering: FC = () => {
         </div>
       </SigmaContainer>
       <InteractionsController />
+      <GraphCaptionLayer />
     </>
   );
 };