[gephi-lite] WIP on making filters liter

Author: jacomyal

packages/gephi-lite/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "license": "gpl-3.0",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build && npm run generate-json-schema",
     "serve": "vite preview",
     "test": "vitest run src",

packages/gephi-lite/src/components/GraphFilters/FilterCreator.tsx

@@ -1,18 +1,27 @@
 import { useReadAtom } from "@ouestware/atoms";
+import { isNil } from "lodash";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useFilters, useGraphDataset, usePreferences } from "../../core/context/dataContexts";
 import { filteredGraphsAtom } from "../../core/graph";
 
-export const FilteredGraphSummary: FC<{ filterIndex: number }> = ({ filterIndex }) => {
+export const FilteredGraphSummary: FC<{ filterIndex?: number }> = ({ filterIndex }) => {
   const { t } = useTranslation();
+  const { locale } = usePreferences();
+  const { fullGraph } = useGraphDataset();
+  const { filters } = useFilters();
   const filteredGraphs = useReadAtom(filteredGraphsAtom);
-  const relatedGraph = filteredGraphs[filterIndex]?.graph;
+  const relatedGraph = !isNil(filterIndex) ? filteredGraphs[filterIndex]?.graph : fullGraph;
 
   return (
-    <div>
-      {relatedGraph.order} {t("graph.model.nodes", { count: relatedGraph.order })}, {relatedGraph.size}{" "}
-      {t("graph.model.edges", { count: relatedGraph.size })}
-    </div>
+    <section className="filter-graph">
+      {isNil(filterIndex) && <div>{t("filters.full_graph")}</div>}
+      {filterIndex === filters.length - 1 && <div>{t("filters.visible_graph")}</div>}
+      <div>
+        {relatedGraph.order.toLocaleString(locale)} {t("graph.model.nodes", { count: relatedGraph.order })},{" "}
+        {relatedGraph.size.toLocaleString(locale)} {t("graph.model.edges", { count: relatedGraph.size })}
+      </div>
+    </section>
   );
 };