Upgrades dependencies

Details:
- Upgrades _almost_ all dependencies
- ESLint remains at v8 because of some incompatibilities with some other
  dependencies and v9
- Fixes some new errors with Sigma / React-Sigma types integration

package.json

@@ -25,26 +25,26 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
-    "@octokit/auth-oauth-device": "^6.0.1",
-    "@octokit/core": "^5.1.0",
-    "@playwright/test": "^1.41.1",
-    "@react-sigma/core": "^3.4.2",
-    "@sigma/node-image": "^3.0.0-beta.3",
+    "@octokit/auth-oauth-device": "^7.1.1",
+    "@octokit/core": "^6.1.2",
+    "@playwright/test": "^1.44.1",
+    "@react-sigma/core": "^4.0.2",
+    "@sigma/node-image": "^3.0.0-beta.9",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/byte-size": "^8.1.2",
-    "@types/chroma-js": "^2.4.3",
+    "@types/chroma-js": "^2.4.4",
     "@types/file-saver": "^2.0.7",
     "@types/is-url": "^1.2.32",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.10",
-    "@types/react": "^18.2.48",
-    "@types/react-color": "^3.0.11",
-    "@types/react-dom": "^18.2.18",
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.3.0",
     "@types/react-highlight": "^0.12.8",
     "@types/react-slider": "^1.3.6",
     "@types/tether": "^1.4.9",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "bootstrap": "^5.3.2",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "bootstrap": "^5.3.3",
     "byte-size": "^8.1.1",
     "chroma-js": "^2.4.2",
     "classnames": "^2.5.1",
@@ -53,7 +53,7 @@
     "file-saver": "^2.0.5",
     "graphology": "^0.25.4",
     "graphology-communities-louvain": "^2.0.1",
-    "graphology-gexf": "^0.12.1",
+    "graphology-gexf": "^0.13.0",
     "graphology-graphml": "^0.5.2",
     "graphology-layout": "^0.6.1",
     "graphology-layout-force": "^0.2.4",
@@ -62,55 +62,55 @@
     "graphology-metrics": "^2.2.0",
     "graphology-operators": "^1.6.0",
     "highlight.js": "^11.9.0",
-    "http-proxy-middleware": "^2.0.6",
-    "i18next": "^23.8.1",
-    "i18next-browser-languagedetector": "^7.2.0",
+    "http-proxy-middleware": "^3.0.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-scanner": "^4.4.0",
     "is-url": "^1.2.4",
     "isomorphic-fetch": "^3.0.0",
     "iwanthue": "^2.0.0",
     "locale-emoji": "^0.3.0",
     "lodash": "^4.17.21",
     "minisearch": "^6.3.0",
-    "prettier": "^3.2.4",
-    "rc-slider": "^10.5.0",
-    "react": "^18.2.0",
+    "prettier": "^3.3.1",
+    "rc-slider": "^10.6.2",
+    "react": "^18.3.1",
     "react-animate-height": "^3.2.3",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.12",
+    "react-error-boundary": "^4.0.13",
     "react-highlight": "^0.15.0",
-    "react-hook-form": "^7.49.3",
-    "react-i18next": "^14.0.1",
-    "react-icons": "^5.0.1",
+    "react-hook-form": "^7.51.5",
+    "react-i18next": "^14.1.2",
+    "react-icons": "^5.2.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-linkify": "^1.0.0-alpha",
-    "react-router": "^6.21.3",
-    "react-router-dom": "^6.21.3",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
     "react-slider": "^2.0.6",
     "react-tether": "^3.0.3",
     "react-use-konami": "^1.1.0",
-    "sass": "^1.70.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.2"
+    "sass": "^1.77.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.13",
+    "vitest": "^1.6.0"
   },
   "overrides": {
-    "sigma": "3.0.0-beta.6"
+    "sigma": "3.0.0-beta.19"
   },
   "devDependencies": {
     "@types/color": "^3.0.6",
     "@types/react-linkify": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.2.4",
-    "vite-plugin-checker": "^0.6.2"
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "prettier": "^3.3.1",
+    "vite-plugin-checker": "^0.6.4"
   }
 }

src/core/appearance/utils.ts

@@ -1,7 +1,6 @@
 import chroma from "chroma-js";
 import { forEach, identity } from "lodash";
-import { EdgeLabelDrawingFunction } from "sigma/rendering/edge-labels";
-import { NodeLabelDrawingFunction } from "sigma/rendering/node-labels";
+import { EdgeLabelDrawingFunction, NodeLabelDrawingFunction } from "sigma/rendering";
 import { EdgeDisplayData, NodeDisplayData } from "sigma/types";
 
 import {

src/core/graph/types.ts

@@ -1,5 +1,6 @@
 import { MultiGraph } from "graphology";
-import { GraphType } from "graphology-types";
+import { Attributes, GraphType } from "graphology-types";
+import Sigma from "sigma";
 
 import { ItemType, Scalar } from "../types";
 import { GraphOrigin } from "./import/types";
@@ -16,20 +17,21 @@ export interface GraphMetadata {
  * Items data:
  * ***********
  */
-export interface EdgeRenderingData {
+export interface EdgeRenderingData extends Attributes {
   label?: string | null;
   color?: string;
   weight?: number;
   rawWeight?: number;
 }
-export interface NodeRenderingData {
+export interface NodeRenderingData extends Attributes {
   label?: string | null;
   color?: string;
   size?: number;
   x: number;
   y: number;
   rawSize?: number;
   image?: string | null;
+  fixed?: boolean;
 }
 
 // At the moment, all other attributes must be stored as scalar values, for
@@ -64,6 +66,8 @@ export type SigmaGraph = MultiGraph<NodeRenderingData, EdgeRenderingData>;
 export type DataGraph = MultiGraph<ItemData, ItemData>;
 export type FullGraph = MultiGraph<ItemData & NodeRenderingData, ItemData & EdgeRenderingData>;
 
+export type GephiLiteSigma = Sigma<NodeRenderingData, EdgeRenderingData, Attributes>;
+
 /**
  * States:
  * *******

src/core/sigma/index.ts

@@ -3,7 +3,6 @@ import { max } from "lodash";
 import Sigma from "sigma";
 
 import { filteredGraphAtom, graphDatasetAtom, sigmaGraphAtom } from "../graph";
-import { SigmaGraph } from "../graph/types";
 import { atom } from "../utils/atoms";
 import { Producer, producerToAction } from "../utils/producers";
 import { SigmaState } from "./types";
@@ -86,9 +85,11 @@ export const resetHighlightedNodes: Producer<SigmaState, []> = () => {
  * Public API:
  * ***********
  */
-export const sigmaAtom = atom<Sigma<SigmaGraph>>(
-  new Sigma(sigmaGraphAtom.get(), document.createElement("div"), { allowInvalidContainer: true }),
-);
+const INITIAL_SIGMA_INSTANCE = new Sigma(sigmaGraphAtom.get(), document.createElement("div"), {
+  allowInvalidContainer: true,
+});
+export type GephiLiteSigma = typeof INITIAL_SIGMA_INSTANCE;
+export const sigmaAtom = atom(INITIAL_SIGMA_INSTANCE);
 export const sigmaStateAtom = atom<SigmaState>(getEmptySigmaState());
 
 /**

src/utils/sigma.ts

@@ -6,9 +6,11 @@ import { CameraState } from "sigma/types";
 
 import { wait } from "./promises";
 
+type LightAttributes = { [key: string]: unknown };
+
 export async function getGraphSnapshot(
   graph: Graph,
-  settings: Partial<Settings>,
+  settings: Partial<Settings<LightAttributes, LightAttributes, LightAttributes>>,
   {
     width,
     height,

src/views/graphPage/Selection.tsx

@@ -168,7 +168,7 @@ function SelectedItem<
       </h4>
       {attributes && (
         <ul className="ms-4 list-unstyled small">
-          {attributes.map(([key, value], i) => (
+          {attributes.map(([key, value]) => (
             <li key={key}>
               <span className="text-muted">{key}:</span>{" "}
               <ReactLinkify {...DEFAULT_LINKIFY_PROPS}>

src/views/graphPage/controllers/AppearanceController.tsx

@@ -9,10 +9,11 @@ import {
   DEFAULT_NODE_SIZE,
 } from "../../../core/appearance/utils";
 import { useAppearance, useGraphDataset, useSelection, useSigmaState } from "../../../core/context/dataContexts";
+import { GephiLiteSigma } from "../../../core/graph/types";
 import { memoizedBrighten } from "../../../utils/colors";
 
 export const AppearanceController: FC = () => {
-  const sigma = useSigma();
+  const sigma: GephiLiteSigma = useSigma();
   const selection = useSelection();
   const { showEdges } = useAppearance();
   const { metadata } = useGraphDataset();

src/views/graphPage/controllers/EventsController.tsx

@@ -9,12 +9,13 @@ import {
   useSelectionActions,
   useSigmaActions,
 } from "../../../core/context/dataContexts";
+import { GephiLiteSigma } from "../../../core/graph/types";
 import { LayoutMapping } from "../../../core/layouts/types";
 
 const DRAG_EVENTS_TOLERANCE = 3;
 
 export const EventsController: FC = () => {
-  const sigma = useSigma();
+  const sigma: GephiLiteSigma = useSigma();
   const registerEvents = useRegisterEvents();
 
   const selection = useSelection();

src/views/graphPage/controllers/SettingsController.tsx

@@ -1,24 +1,20 @@
 import { useSigma } from "@react-sigma/core";
 import { FC, useEffect } from "react";
-import Sigma from "sigma";
-import { drawStraightEdgeLabel } from "sigma/rendering/edge-labels";
-import { drawDiscNodeHover } from "sigma/rendering/node-hover";
-import { drawDiscNodeLabel } from "sigma/rendering/node-labels";
+import { drawDiscNodeHover, drawDiscNodeLabel, drawStraightEdgeLabel } from "sigma/rendering";
 import { DEFAULT_SETTINGS } from "sigma/settings";
 
 import { getDrawEdgeLabel, getNodeDrawFunction } from "../../../core/appearance/utils";
 import { useAppearance, useGraphDataset } from "../../../core/context/dataContexts";
-import { SigmaGraph } from "../../../core/graph/types";
-import { resetCamera, sigmaAtom } from "../../../core/sigma";
+import { GephiLiteSigma, resetCamera, sigmaAtom } from "../../../core/sigma";
 import { inputToStateThreshold } from "../../../utils/labels";
 
 export const SettingsController: FC<{ setIsReady: () => void }> = ({ setIsReady }) => {
-  const sigma = useSigma();
+  const sigma = useSigma() as GephiLiteSigma;
   const graphDataset = useGraphDataset();
   const graphAppearance = useAppearance();
 
   useEffect(() => {
-    sigmaAtom.set(sigma as Sigma<SigmaGraph>);
+    sigmaAtom.set(sigma);
     resetCamera({ forceRefresh: true });
   }, [sigma]);
 

tsconfig.json

@@ -13,10 +13,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "strictFunctionTypes": false,
     "noEmit": true,
     "jsx": "react-jsx",
     "types": ["vite/client", "vitest/globals"],
-    "typeRoots": ["node_modules"]
+    "typeRoots": ["node_modules"],
   },
-  "include": ["src", "types"]
+  "include": ["src", "types"],
 }