[Caption] node/edge size/color finished

- but edge by source/target

src/components/GraphCaption/CaptionItemTitle.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import cx from "classnames";
+
+const ICON_NAMES = {
+  color: {
+    node: "icon-node_color",
+    edge: "icon-node_link_color",
+  },
+  size: {
+    node: "icon-node_size",
+    edge: "icon-node_link_weight",
+  },
+};
+
+export const CaptionItemTitle: FC<{ itemType: "node" | "edge"; vizVariable: "color" | "size"; field: string }> = ({
+  itemType,
+  field,
+  vizVariable,
+}) => {
+  const { t } = useTranslation();
+  const label = t(`graph.caption.${vizVariable}`, {
+    itemType: t(`graph.model.${itemType}s`, { count: 2 }) + "",
+  }).toString();
+
+  return (
+    <div className="d-flex align-items-center mb-1">
+      <i title={label} className={cx("fs-4 me-1", ICON_NAMES[vizVariable][itemType])} />
+      <div className="d-flex flex-column justify-content-center m-2">
+        <span className="text-muted small">{label}</span>
+        <h4 className="fs-5 m-0">{field}</h4>
+      </div>
+    </div>
+  );
+};

src/components/GraphCaption/ColorSlider.tsx

@@ -1,17 +1,15 @@
 import { FC, HTMLProps, useCallback } from "react";
 import ReactSlider from "react-slider";
-import cx from "classnames";
 
 import { ColorScalePointType } from "../../core/appearance/types";
 import { last, range } from "lodash";
 import { RangeExtends } from ".";
 import { shortenNumber } from "../GraphFilters/utils";
 
 export const ColorSlider: FC<{
-  itemType: "node" | "edge";
   colorScalePoints: ColorScalePointType[];
   extend: RangeExtends;
-}> = ({ itemType, colorScalePoints, extend }) => {
+}> = ({ colorScalePoints, extend }) => {
   const formatValueFromScalePoint = useCallback(
     (value: number) =>
       shortenNumber(
@@ -53,7 +51,7 @@ export const ColorSlider: FC<{
   return (
     <ReactSlider
       className="horizontal-slider"
-      thumbClassName={cx("thumb", itemType === "edge" && "rectangle")}
+      thumbClassName="thumb"
       trackClassName="track"
       disabled
       snapDragDisabled

src/components/GraphCaption/ItemColorCaption.tsx

@@ -1,11 +1,12 @@
 import { FC } from "react";
-import { capitalize, sortBy, toPairs } from "lodash";
+import { sortBy, toPairs } from "lodash";
 import cx from "classnames";
 
 import { Color } from "../../core/appearance/types";
 import { GraphCaptionProps, PartitionExtends, RangeExtends } from ".";
 import { useTranslation } from "react-i18next";
 import { ColorSlider } from "./ColorSlider";
+import { CaptionItemTitle } from "./CaptionItemTitle";
 
 export const ItemsColorCaption: FC<
   Pick<GraphCaptionProps, "minimal"> & {
@@ -19,10 +20,8 @@ export const ItemsColorCaption: FC<
   if (itemsColor.field)
     return (
       <div className="graph-caption-item">
-        <h4 className="fs-6">
-          {t("graph.caption.color", { itemType: capitalize(t(`graph.model.${itemType}s`, { count: 2 }) + "") })}{" "}
-          {itemsColor.field}
-        </h4>
+        <CaptionItemTitle itemType={itemType} field={itemsColor.field} vizVariable="color" />
+
         {/* PARTITION */}
         {itemsColor.type === "partition" && "occurrences" in extend && (
           <div className={cx(minimal && "minimal", "item-colors partition")}>
@@ -51,7 +50,7 @@ export const ItemsColorCaption: FC<
         {/* RANKING */}
         {itemsColor.type === "ranking" && "min" in extend && (
           <div className={cx(minimal && "minimal", "item-colors ranking")}>
-            <ColorSlider colorScalePoints={itemsColor.colorScalePoints} extend={extend} itemType={itemType} />
+            <ColorSlider colorScalePoints={itemsColor.colorScalePoints} extend={extend} />
           </div>
         )}
       </div>

src/components/GraphCaption/ItemSizeCaption.tsx

@@ -8,6 +8,7 @@ import { useSigmaAtom, useVisualGetters } from "../../core/context/dataContexts"
 import { capitalize } from "lodash";
 import { useTranslation } from "react-i18next";
 import { EdgeIcon, NodeIcon } from "../common-icons";
+import { CaptionItemTitle } from "./CaptionItemTitle";
 
 const ItemSizeCaption: FC<
   Pick<GraphCaptionProps, "minimal"> & {
@@ -46,7 +47,7 @@ const ItemSizeCaption: FC<
   // Refresh caption when metric changes:
   useEffect(() => {
     refreshState();
-  }, [refreshState]);
+  }, [refreshState, itemSizeState]);
 
   // Refresh caption on camera update:
   useEffect(() => {
@@ -59,29 +60,7 @@ const ItemSizeCaption: FC<
   if (itemsSize.field) {
     return (
       <div className="graph-caption-item">
-        <h4 className="fs-6 d-flex">
-          <span
-            className="d-flex align-items-center me-1"
-            title={
-              t("graph.caption.size", { itemType: capitalize(t(`graph.model.${itemType}s`, { count: 2 }) + "") }) ||
-              undefined
-            }
-          >
-            {itemType === "node" ? (
-              <>
-                <NodeIcon size="0.5rem" />
-                <NodeIcon size="1rem" />
-              </>
-            ) : (
-              <>
-                <EdgeIcon size="0.6rem" />
-                <EdgeIcon size="1rem" />
-              </>
-            )}
-          </span>
-
-          {itemsSize.field}
-        </h4>
+        <CaptionItemTitle vizVariable="size" itemType={itemType} field={itemsSize.field} />
         {itemSizeState && (
           <div className="item-sizes">
             <div className="item-size">
@@ -90,7 +69,7 @@ const ItemSizeCaption: FC<
                   className={cx(itemType === "node" ? "dotted-circle" : "dotted-rectangle")}
                   style={{
                     width: itemSizeState?.minSize,
-                    height: itemType === "node" ? itemSizeState?.minSize : undefined,
+                    height: itemSizeState?.minSize,
                   }}
                 />
               </div>
@@ -102,7 +81,7 @@ const ItemSizeCaption: FC<
                   className={cx(itemType === "node" ? "dotted-circle" : "dotted-rectangle")}
                   style={{
                     width: itemSizeState?.maxSize,
-                    height: itemType === "node" ? itemSizeState?.maxSize : undefined,
+                    height: itemSizeState?.maxSize,
                   }}
                 />
               </div>

src/components/GraphCaption/index.tsx

@@ -1,5 +1,9 @@
-import { FC, useMemo } from "react";
+import { FC, useMemo, useState } from "react";
 import { fromPairs, mapValues } from "lodash";
+import { useTranslation } from "react-i18next";
+import { BiCollapseAlt } from "react-icons/bi";
+import { AiFillQuestionCircle } from "react-icons/ai";
+import cx from "classnames";
 
 import { useAppearance, useFilteredGraph, useGraphDataset } from "../../core/context/dataContexts";
 import ItemSizeCaption from "./ItemSizeCaption";
@@ -51,6 +55,8 @@ const GraphCaption: FC<GraphCaptionProps> = ({ minimal }) => {
   const appearance = useAppearance();
   const filteredGraph = useFilteredGraph();
   const { nodeData, edgeData } = useGraphDataset();
+  const { t } = useTranslation();
+  const [collapsed, setCollapsed] = useState<boolean>(false);
 
   // min-max values for ranking caption items
   const vizAttributesExtends = useMemo(() => {
@@ -123,35 +129,54 @@ const GraphCaption: FC<GraphCaptionProps> = ({ minimal }) => {
     : undefined;
 
   return (
-    <div title="caption" className="graph-caption">
-      {appearance.nodesColor.field !== undefined && vizAttributesExtends.node[appearance.nodesColor.field] && (
-        <ItemsColorCaption
-          itemType="node"
-          minimal={minimal}
-          itemsColor={appearance.nodesColor}
-          extend={vizAttributesExtends.node[appearance.nodesColor.field]}
-        />
+    <div title="caption" className={cx("graph-caption", collapsed ? "collapsed" : "border")}>
+      <div className="d-flex flex-column justify-content-end align-items-start align-self-end">
+        <div>
+          <button
+            title={`${t(collapsed ? "graph.caption.expand" : "graph.caption.collapse")} `}
+            className="btn btn-ico btn-dark btn-sm"
+            onClick={(e) => {
+              setCollapsed(!collapsed);
+            }}
+          >
+            {collapsed ? <AiFillQuestionCircle size="1rem" /> : <BiCollapseAlt />}
+          </button>
+        </div>
+      </div>
+      {!collapsed && (
+        <>
+          <div className="caption-items">
+            {appearance.nodesColor.field !== undefined && vizAttributesExtends.node[appearance.nodesColor.field] && (
+              <ItemsColorCaption
+                itemType="node"
+                minimal={minimal}
+                itemsColor={appearance.nodesColor}
+                extend={vizAttributesExtends.node[appearance.nodesColor.field]}
+              />
+            )}
+            <ItemSizeCaption
+              minimal={minimal}
+              itemType="node"
+              itemsSize={appearance.nodesSize}
+              extend={nodeSizeExtends && "min" in nodeSizeExtends ? nodeSizeExtends : undefined}
+            />
+            {appearance.edgesColor.field !== undefined && vizAttributesExtends.edge[appearance.edgesColor.field] && (
+              <ItemsColorCaption
+                itemType="edge"
+                minimal={minimal}
+                itemsColor={appearance.edgesColor}
+                extend={vizAttributesExtends.edge[appearance.edgesColor.field]}
+              />
+            )}
+            <ItemSizeCaption
+              minimal={minimal}
+              itemType="edge"
+              itemsSize={appearance.edgesSize}
+              extend={edgeSizeExtends && "min" in edgeSizeExtends ? edgeSizeExtends : undefined}
+            />
+          </div>
+        </>
       )}
-      <ItemSizeCaption
-        minimal={minimal}
-        itemType="node"
-        itemsSize={appearance.nodesSize}
-        extend={nodeSizeExtends && "min" in nodeSizeExtends ? nodeSizeExtends : undefined}
-      />
-      {appearance.edgesColor.field !== undefined && vizAttributesExtends.edge[appearance.edgesColor.field] && (
-        <ItemsColorCaption
-          itemType="edge"
-          minimal={minimal}
-          itemsColor={appearance.edgesColor}
-          extend={vizAttributesExtends.edge[appearance.edgesColor.field]}
-        />
-      )}
-      <ItemSizeCaption
-        minimal={minimal}
-        itemType="edge"
-        itemsSize={appearance.edgesSize}
-        extend={edgeSizeExtends && "min" in edgeSizeExtends ? edgeSizeExtends : undefined}
-      />
     </div>
   );
 };

src/locales/en.json

@@ -309,8 +309,9 @@
       }
     },
     "caption": {
-      "color": " {{itemType}} colors:",
-      "size": "{{itemType}} size:"
+      "color": "Color {{itemType}} by",
+      "size": "Size {itemType}} by",
+      "title": "Caption"
     }
   },
   "statistics": {

src/locales/fr.json

@@ -1,24 +1,25 @@
 {
-    "home": {
-        "greeting": "Bonjour",
-        "blabla": "Très heureux de vous voir"
+  "home": {
+    "greeting": "Bonjour",
+    "blabla": "Très heureux de vous voir"
+  },
+  "graph": {
+    "model": {
+      "nodes": "nœuds",
+      "edges": "liens"
     },
-    "graph": {
-        "model": {
-            "nodes": "nœuds"
-        },
-        "caption": {
-            "color": "Couleur des {{itemType}} :",
-            "size": "Taille des {{itemType}} :"
-        }
-    },
-    "welcome": {
-        "logo": "Gephi logo",
-        "open_recent": "Récemment ouvert",
-        "open_graph": "Ouvrir un fichier de graphe",
-        "title": "Bienvenue sur Gephi Lite",
-        "disclaimer-1": "Gephi Lite est actuellement en phase active de développement.",
-        "disclaimer-2": "N'hésitez pas à consulter le projet sur GitHub pour en savoir plus sur les fonctionnalités à venir ou pour signaler des anomalies.",
-        "no_recent": "Aucun fichier distant n'a été ouvert sur ce navigateur pour l'instant."
+    "caption": {
+      "color": "Couleur des {{itemType}} par",
+      "size": "Taille des {{itemType}} par"
     }
+  },
+  "welcome": {
+    "logo": "Gephi logo",
+    "open_recent": "Récemment ouvert",
+    "open_graph": "Ouvrir un fichier de graphe",
+    "title": "Bienvenue sur Gephi Lite",
+    "disclaimer-1": "Gephi Lite est actuellement en phase active de développement.",
+    "disclaimer-2": "N'hésitez pas à consulter le projet sur GitHub pour en savoir plus sur les fonctionnalités à venir ou pour signaler des anomalies.",
+    "no_recent": "Aucun fichier distant n'a été ouvert sur ce navigateur pour l'instant."
+  }
 }