Merge pull request #110 from Linkurious/develop

v5.1.0

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 5.0.3
+current_version = 5.1.0
 commit = False
 tag = False
 serialize =

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.17.0

.version

@@ -1 +1 @@
-5.0.3
+5.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-react",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "A light adaptation of Ogma for React application",
   "keywords": [
     "ogma",
@@ -47,7 +47,7 @@
     "doc:publish": "npm run build:demo && gh-pages -d demo/dist"
   },
   "peerDependencies": {
-    "@linkurious/ogma": "^5.0.2",
+    "@linkurious/ogma": "^5.1.0",
     "react": "^18.0.8",
     "react-dom": "^18.0.8"
   },
@@ -62,11 +62,11 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/leaflet": "^1.7.9",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.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",
+    "@vitejs/plugin-react": "latest",
+    "@vitest/coverage-v8": "latest",
     "@vitest/ui": "latest",
     "canvas": "^2.11.0",
     "dts-bundle-generator": "^9.0.0",
@@ -90,4 +90,4 @@
   },
   "homepage": "https://github.com/linkurious/ogma-react#readme",
   "dependencies": {}
-}
+}

src/transformations/edgeFilter.tsx

@@ -13,17 +13,17 @@ import { useOgma } from "../context";
 import { TransformationProps } from "./types";
 import { toggle, useTransformationCallbacks } from "./utils";
 
-export interface EdgeFilterProps<ED, ND>
-  extends EdgeFilterOptions<ED, ND>,
-    TransformationProps<ED, ND, EdgeFilterOptions<ED, ND>> {}
+export interface EdgeFilterProps<ND, ED>
+  extends EdgeFilterOptions<ND, ED>,
+    TransformationProps<ND, ED, EdgeFilterOptions<ND, ED>> {}
 
 function EdgeFilterComponent<ND = any, ED = any>(
-  props: EdgeFilterProps<ED, ND>,
-  ref?: Ref<EdgeFilterTransformation<ED, ND>>
+  props: EdgeFilterProps<ND, ED>,
+  ref?: Ref<EdgeFilterTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
-    useState<EdgeFilterTransformation<ED, ND>>();
+    useState<EdgeFilterTransformation<ND, ED>>();
 
   useImperativeHandle(ref, () => transformation!, [transformation]);
 
@@ -32,6 +32,7 @@ function EdgeFilterComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/edgeGrouping.tsx

@@ -19,7 +19,7 @@ export interface EdgeGroupingProps<ED, ND>
 
 function EdgeGroupingComponent<ND = any, ED = any>(
   props: EdgeGroupingProps<ED, ND>,
-  ref?: Ref<EdgeGroupingTransformation<ED, ND>>,
+  ref?: Ref<EdgeGroupingTransformation<ED, ND>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function EdgeGroupingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/neighborGeneration.tsx

@@ -19,7 +19,7 @@ export interface NeighborGenerationProps<ND, ED>
 
 function NeighborGenerationComponent<ND = any, ED = any>(
   props: NeighborGenerationProps<ND, ED>,
-  ref: Ref<NeighborGenerationTransformation<ND, ED>>,
+  ref: Ref<NeighborGenerationTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NeighborGenerationComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/neighborMerging.tsx

@@ -19,7 +19,7 @@ export interface NeighborMergingProps<ND, ED>
 
 function NeighborMergingComponent<ND = any, ED = any>(
   props: NeighborMergingProps<ND, ED>,
-  ref: Ref<NeighborMergingTransformation<ND, ED>>,
+  ref: Ref<NeighborMergingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NeighborMergingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/nodeCollapsing.tsx

@@ -19,7 +19,7 @@ export interface NodeCollapsingProps<ND, ED>
 
 export function NodeCollapsingComponent<ND = any, ED = any>(
   props: NodeCollapsingProps<ND, ED>,
-  ref: Ref<NodeCollapsingTransformation<ND, ED>>,
+  ref: Ref<NodeCollapsingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ export function NodeCollapsingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
 

src/transformations/nodeFilter.tsx

@@ -19,7 +19,7 @@ export interface NodeFilterProps<ED, ND>
 
 function NodeFilterComponent<ND = any, ED = any>(
   props: NodeFilterProps<ND, ED>,
-  ref?: Ref<NodeFilterTransformation<ND, ED>>,
+  ref?: Ref<NodeFilterTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NodeFilterComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/nodeGrouping.tsx

@@ -19,7 +19,7 @@ export interface NodeGroupingProps<ND, ED>
 
 function NodeGroupingComponent<ND, ED>(
   props: NodeGroupingProps<ND, ED>,
-  ref?: Ref<NodeGroupingTransformation<ND, ED>>,
+  ref?: Ref<NodeGroupingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -31,6 +31,7 @@ function NodeGroupingComponent<ND, ED>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/types.ts

@@ -1,5 +1,6 @@
 import { Transformation } from "@linkurious/ogma";
 
+export interface TransformationContext {}
 /** TODO: expose that in Ogma */
 export interface TransformationOptions {
   duration?: number;
@@ -9,15 +10,15 @@ export interface TransformationOptions {
 export interface TransformationProps<
   ND,
   ED,
-  O extends TransformationOptions = TransformationOptions,
+  C extends TransformationContext = TransformationContext,
 > {
   disabled?: boolean;
-  onEnabled?: (transformation: Transformation<ND, ED, O>) => void;
-  onDisabled?: (transformation: Transformation<ND, ED, O>) => void;
-  onDestroyed?: (transformation: Transformation<ND, ED, O>) => void;
-  onUpdated?: (transformation: Transformation<ND, ED, O>) => void;
+  onEnabled?: (transformation: Transformation<ND, ED, C>) => void;
+  onDisabled?: (transformation: Transformation<ND, ED, C>) => void;
+  onDestroyed?: (transformation: Transformation<ND, ED, C>) => void;
+  onUpdated?: (transformation: Transformation<ND, ED, C>) => void;
   onSetIndex?: (
-    transformation: Transformation<ND, ED, O>,
-    index: number,
+    transformation: Transformation<ND, ED, C>,
+    index: number
   ) => void;
 }

src/transformations/utils.ts

@@ -1,10 +1,9 @@
 import Ogma, { Transformation } from "@linkurious/ogma";
-import { TransformationProps, TransformationOptions } from "./types";
-
-export function toggle<ND, ED, O extends TransformationOptions>(
+import { TransformationProps, TransformationContext } from "./types";
+export function toggle<ND, ED, O extends TransformationContext>(
   transformation: Transformation<ND, ED, O>,
   disabled: boolean,
-  duration?: number,
+  duration?: number
 ) {
   if (disabled === transformation.isEnabled()) {
     if (disabled) transformation.disable(duration as number);
@@ -15,32 +14,32 @@ export function toggle<ND, ED, O extends TransformationOptions>(
 export function useTransformationCallbacks<
   ND,
   ED,
-  O extends TransformationOptions,
+  C extends TransformationContext,
 >(
-  props: TransformationProps<ND, ED, O>,
-  transformation: Transformation<ND, ED, O>,
-  ogma: Ogma,
+  props: TransformationProps<ND, ED, C>,
+  transformation: Transformation<ND, ED, C>,
+  ogma: Ogma<ND, ED>
 ) {
   const enabledListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onEnabled && props.onEnabled(transformation);
   };
   const disabledListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onDisabled && props.onDisabled(transformation);
   };
   const updatedListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onUpdated && props.onUpdated(transformation);
@@ -49,7 +48,7 @@ export function useTransformationCallbacks<
     target,
     index,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
     index: number;
   }) => {
     if (target !== transformation) return;
@@ -58,7 +57,7 @@ export function useTransformationCallbacks<
   const destroyedListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onDestroyed && props.onDestroyed(transformation);
@@ -70,10 +69,15 @@ export function useTransformationCallbacks<
       .off(destroyedListener);
   };
   ogma.events
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationEnabled", enabledListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationDisabled", disabledListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationDestroyed", destroyedListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationSetIndex", setIndexListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationRefresh", updatedListener);
   const cleanup = () => {
     ogma.events

test/transformations/nodeGrouping.test.tsx

@@ -60,12 +60,12 @@ describe("Node grouping", () => {
           count = count | 8;
         }}
       />,
-      div,
+      div
     );
     return (ref.current as OgmaLib).transformations
       .afterNextUpdate()
       .then(() => {
-        expect(count).toEqual(2);
+        expect(count).toEqual(10);
       })
       .then(() => userEvent.click(screen.getByText("setGrouping")))
       .then(() => ref.current?.transformations.afterNextUpdate())