added reactivity to transformation function props (#33)

* added reactivity to transformation function props

* try to add test

* (butchered) tests with vitest

* unbutchered, start adding tests

* added tests for transformation updates

* finished update tests to vitest

* update package-lock

* fixed build

package.json

@@ -42,73 +42,46 @@
     "build:umd": "./scripts/umd.js",
     "build:files": "scripts/prepublish.js && cp README.md dist",
     "format": "prettier -w src/**/*.{ts,tsx} web/**/*.tsx test/**/*.tsx",
-    "test": "jest",
-    "test:unit": "jest --ci --coverage --reporters=default --reporters=jest-junit",
+    "test": "vitest",
+    "test:unit": "vitest run --coverage --reporter=junit --reporter=default --outputFile reports/unit/junit-test-results.xml",
     "typecheck": "tsc --noEmit",
     "types": "dts-bundle-generator -o ./dist/index.d.ts ./src/index.ts --no-banner",
     "postversion": "sync_versions",
     "doc:publish": "npm run doc && gh-pages -d web"
   },
   "peerDependencies": {
-    "@linkurious/ogma": ">=4.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.5.4"
+    "@linkurious/ogma": "^4.4.1",
+    "react": "^18.0.8",
+    "react-dom": "^18.0.8",
+    "typescript": "^4.8.4"
   },
   "devDependencies": {
     "@geist-ui/core": "^2.3.8",
     "@geist-ui/icons": "^1.0.1",
     "@linkurious/code-tools": "0.0.12",
     "@mapbox/typehead": "^1.1.0",
-    "@next/bundle-analyzer": "^13.0.0",
-    "@types/enzyme": "^3.10.11",
-    "@types/jest": "^27.4.1",
+    "@next/bundle-analyzer": "^12.1.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/leaflet": "^1.7.9",
+    "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "canvas": "^2.9.1",
-    "dts-bundle-generator": "^7.0.0",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "@vitest/coverage-c8": "^0.24.5",
+    "@vitest/ui": "latest",
+    "canvas": "^2.11.0",
+    "dts-bundle-generator": "^6.5.0",
     "gh-pages": "^3.2.3",
-    "jest": "^27.5.1",
-    "jest-junit": "^13.0.0",
-    "jsdom": "^19.0.0",
-    "jsdom-global": "^3.0.2",
+    "jsdom": "latest",
     "leaflet": "^1.8.0",
     "prettier": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "ts-jest": "^27.1.4",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
-  },
-  "jest": {
-    "globals": {
-      "ts-jest": {
-        "tsconfig": "tsconfig.json"
-      }
-    },
-    "transform": {
-      "\\.(ts|tsx)$": "ts-jest"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "tsx",
-      "json"
-    ],
-    "testRegex": "/(test|__tests__)/.*\\.(test|spec)\\.tsx?",
-    "setupFiles": [
-      "<rootDir>/test/setup.ts"
-    ],
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ],
-    "coverageDirectory": "reports"
-  },
-  "jest-junit": {
-    "outputFile": "reports/junit-test-results.xml"
+    "tslib": "^2.5.0",
+    "typescript": "^4.8.4",
+    "vite": "latest",
+    "vitest": "latest"
   },
   "repository": {
     "type": "git",
@@ -121,7 +94,6 @@
   },
   "homepage": "https://github.com/linkurious/ogma-react#readme",
   "dependencies": {
-    "@types/lodash.throttle": "^4.1.6",
     "lodash.throttle": "^4.1.1"
   }
 }

src/ogma.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useState,
   useEffect,
   useLayoutEffect,

src/transformations/edgeFilter.tsx

@@ -10,9 +10,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface EdgeFilterProps<ED, ND>
+export interface EdgeFilterProps<ED, ND>
   extends EdgeFilterOptions<ED, ND>,
-    EnabledState {}
+  EnabledState { }
 
 function EdgeFilterComponent<ND = any, ED = any>(
   props: EdgeFilterProps<ED, ND>,
@@ -26,7 +26,11 @@ function EdgeFilterComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addEdgeFilter(props);
+    console.log('props', props)
+    const newTransformation = ogma.transformations.addEdgeFilter({
+      ...props,
+      enabled: !props.disabled
+    });
     setTransformation(newTransformation);
     return () => {
       newTransformation.destroy();
@@ -36,10 +40,16 @@ function EdgeFilterComponent<ND = any, ED = any>(
 
   useEffect(() => {
     if (transformation) {
+      console.log('props.disabled', props.disabled)
       toggle(transformation, !!props.disabled, props.duration);
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    console.log('setoptions', props.disabled)
+    transformation?.setOptions(props);
+  }, [props.criteria])
+
   return null;
 }
 

src/transformations/edgeGrouping.tsx

@@ -10,9 +10,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface EdgeGroupingProps<ED, ND>
+export interface EdgeGroupingProps<ED, ND>
   extends EdgeGroupingOptions<ED, ND>,
-    EnabledState {}
+  EnabledState { }
 
 function EdgeGroupingComponent<ND = any, ED = any>(
   props: EdgeGroupingProps<ED, ND>,
@@ -26,7 +26,10 @@ function EdgeGroupingComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addEdgeGrouping(props);
+    const newTransformation = ogma.transformations.addEdgeGrouping({
+      ...props,
+      enabled: !props.disabled,
+    });
     setTransformation(newTransformation);
     return () => {
       newTransformation.destroy();
@@ -40,6 +43,10 @@ function EdgeGroupingComponent<ND = any, ED = any>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.selector, props.generator, props.groupIdFunction, props.separateEdgesByDirection])
+
   return null;
 }
 

src/transformations/neighborGeneration.tsx

@@ -13,9 +13,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface NeighborGenerationProps<ND, ED>
+export interface NeighborGenerationProps<ND, ED>
   extends NeighborGenerationOptions<ND, ED>,
-    EnabledState {}
+  EnabledState { }
 
 function NeighborGenerationComponent<ND = any, ED = any>(
   props: NeighborGenerationProps<ND, ED>,
@@ -29,7 +29,10 @@ function NeighborGenerationComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addNeighborGeneration(props);
+    const newTransformation = ogma.transformations.addNeighborGeneration({
+      ...props,
+      enabled: !props.disabled,
+    });
     setTransformation(newTransformation);
     return () => {
       newTransformation.destroy();
@@ -43,6 +46,10 @@ function NeighborGenerationComponent<ND = any, ED = any>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.edgeGenerator, props.nodeGenerator, props.neighborIdFunction, props.selector])
+
   return null;
 }
 

src/transformations/neighborMerging.tsx

@@ -13,9 +13,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface NeighborMergingProps<ND, ED>
+export interface NeighborMergingProps<ND, ED>
   extends NeighborMergingOptions<ND, ED>,
-    EnabledState {}
+  EnabledState { }
 
 function NeighborMergingComponent<ND = any, ED = any>(
   props: NeighborMergingProps<ND, ED>,
@@ -29,7 +29,10 @@ function NeighborMergingComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addNeighborMerging(props);
+    const newTransformation = ogma.transformations.addNeighborMerging({
+      ...props,
+      enabled: !props.disabled,
+    });
     setTransformation(newTransformation);
     return () => {
       newTransformation.destroy();
@@ -43,6 +46,10 @@ function NeighborMergingComponent<ND = any, ED = any>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.dataFunction, props.selector])
+
   return null;
 }
 

src/transformations/nodeCollapsing.tsx

@@ -13,9 +13,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface NodeCollapsingProps<ND, ED>
+export interface NodeCollapsingProps<ND, ED>
   extends NodeCollapsingOptions<ND, ED>,
-    EnabledState {}
+  EnabledState { }
 
 export function NodeCollapsingComponent<ND = any, ED = any>(
   props: NodeCollapsingProps<ND, ED>,
@@ -29,7 +29,10 @@ export function NodeCollapsingComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addNodeCollapsing(props);
+    const newTransformation = ogma.transformations.addNodeCollapsing({
+      ...props,
+      enabled: !props.disabled
+    });
     setTransformation(newTransformation);
 
     return () => {
@@ -44,6 +47,10 @@ export function NodeCollapsingComponent<ND = any, ED = any>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.edgeGenerator, props.selector])
+
   return null;
 }
 

src/transformations/nodeFilter.tsx

@@ -10,9 +10,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface NodeFilterProps<ED, ND>
+export interface NodeFilterProps<ED, ND>
   extends NodeFilterOptions<ED, ND>,
-    EnabledState {}
+  EnabledState { }
 
 function NodeFilterComponent<ND = any, ED = any>(
   props: NodeFilterProps<ND, ED>,
@@ -26,7 +26,10 @@ function NodeFilterComponent<ND = any, ED = any>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addNodeFilter(props);
+    const newTransformation = ogma.transformations.addNodeFilter({
+      ...props,
+      enabled: !props.disabled,
+    });
     setTransformation(newTransformation);
     return () => {
       newTransformation.destroy();
@@ -40,6 +43,10 @@ function NodeFilterComponent<ND = any, ED = any>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.criteria])
+
   return null;
 }
 

src/transformations/nodeGrouping.tsx

@@ -10,9 +10,9 @@ import { useOgma } from "../context";
 import { EnabledState } from "./types";
 import { toggle } from "./utils";
 
-interface NodeGroupingProps<ND, ED>
+export interface NodeGroupingProps<ND, ED>
   extends NodeGroupingOptions<ND, ED>,
-    EnabledState {}
+  EnabledState { }
 
 function NodeGroupingComponent<ND, ED>(
   props: NodeGroupingProps<ND, ED>,
@@ -27,7 +27,10 @@ function NodeGroupingComponent<ND, ED>(
   ]);
 
   useEffect(() => {
-    const newTransformation = ogma.transformations.addNodeGrouping(props);
+    const newTransformation = ogma.transformations.addNodeGrouping({
+      ...props,
+      enabled: !props.disabled,
+    });
     setTransformation(newTransformation);
 
     return () => {
@@ -42,6 +45,11 @@ function NodeGroupingComponent<ND, ED>(
     }
   }, [props.disabled]);
 
+  useEffect(() => {
+    transformation?.setOptions(props);
+  }, [props.groupIdFunction, props.groupSelfLoopEdges, props.edgeGenerator, props.nodeGenerator, props.groupEdges, props.padding,
+  props.selector, props.showContents, props.separateEdgesByDirection])
+
   return null;
 }
 

src/transformations/utils.ts

@@ -9,4 +9,4 @@ export function toggle(
     if (disabled) transformation.disable(duration as number);
     else transformation.enable(duration as number);
   }
-}
+}