Skip to content

Commit cd7e797

Browse files
Jeremyea3001Copilot
Jeremyea3001
and
Copilot
authored
small improvements and refactoring (#166)
* small improvements and refactoring * updated test and readme * Update README.md forgot that Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * comment updates --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 4d605b4 commit cd7e797

File tree

5 files changed

+174
-111
lines changed

5 files changed

+174
-111
lines changed

‎README.md‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ yarn i <YOUR_LINK_WITH_API_KEY>
4444
yarn add @linkurious/ogma-react
4545
```
4646

47-
You will need the CSS or Styled Components (see [`web/src/index.css`](https://github.com/Linkurious/ogma-react/blob/develop/demo/src/index.css) for an example). No CSS is included by default.
47+
You will need the CSS or Styled Components (see [`demo/src/index.css`](https://github.com/Linkurious/ogma-react/blob/develop/demo/src/index.css) for an example). No CSS is included by default.
4848

4949
```tsx
5050
import { Ogma, NodeStyle, Popup, useEvent } from '@linkurious/ogma-react';
5151
import OgmaLib, { MouseButtonEvent, Node as OgmaNode } from '@linkurious/ogma';
5252
...
5353
const [clickedNode, setClickedNode] = useState<OgmaNode|null>(null);
5454
const ogmaRef = useRef<OgmaLib>();
55-
const onMouseMove = useEvent('mousemove', ({ target }) => {
55+
const onMousemove = useEvent('mousemove', ({ target }) => {
5656
if (target && target.isNode) console.log(target.getId());
5757
});
5858

@@ -62,7 +62,7 @@ const onClick = useEvent('click', ({ target }) => {
6262

6363
<Ogma
6464
options={...}
65-
onMouseMove={onMouseMove}
65+
onMousemove={onMousemove}
6666
onClick={onClick}
6767
ref={ogmaRef}
6868
onReady={(ogma) => console.log('ogma instance initialized')}
@@ -79,7 +79,7 @@ const onClick = useEvent('click', ({ target }) => {
7979

8080
## Usage
8181

82-
See the [`web/src/App.tsx`](https://github.com/Linkurious/ogma-react/blob/develop/web/src/App.tsx) file for a complete example.
82+
See the [`demo/src/App.tsx`](https://github.com/Linkurious/ogma-react/blob/develop/demo/src/App.tsx) file for a complete example.
8383

8484
```tsx
8585
const graph: Ogma.RawGraph = ...;
@@ -234,14 +234,14 @@ Main visualisation component. You can use `onReady` or `ref` prop to get a refer
234234

235235
| Prop | Type | Default | Description |
236236
| ---------- | ---------------------- | ------- | ----------- |
237-
| `options?` | [`Ogma.Options`](https://doc.linkurio.us/ogma/latest/api.html#Options) | `{}` | Ogma options |
237+
| `className?` | `string` | `ogma-container` | className for the ogma container |
238238
| `graph?` | `Ogma.RawGraph` | `null` | The graph to render |
239+
| `onEventName?` | `(event: EventTypes<ND, ED>[K]) => void` | `null` | The handler for an [event](https://doc.linkurious.com/ogma/latest/api/events.html). The passed in function should always be the result of the `useEvent` hook to have a stable function identity and avoid reassigning the same handler at every render. |
239240
| `onReady?` | `(ogma: Ogma) => void` | `null` | Callback when the Ogma instance is ready |
240-
| `ref?` | `React.Ref<Ogma>` | `null` | Reference to the Ogma instance |
241-
| `children?` | `React.ReactNode` | `null` | The children of the component, such as `<Popup>` or `<Tooltip>` or your custom component. Ogma instance is avalable to the children components through `useOgma()` hook |
241+
| `options?` | [`Ogma.Options`](https://doc.linkurio.us/ogma/latest/api.html#Options) | `{}` | Ogma options |
242242
| `theme?` | [`Ogma.Theme`](https://doc.linkurious.com/ogma/latest/api/types/theme.html) | `null` | The theme of the graph. Keep in mind that adding `<NodeStyle>` and `<EdgeStyle>` components will overwrite the theme's styles |
243-
| `onEventName?` | `(event: EventTypes<ND, ED>[K]) => void` | `null` | The handler for an [event](https://doc.linkurious.com/ogma/latest/api/events.html). The passed in function should always be the result of the `useEvent` hook to have a stable function identity and avoid reassigning the same handler at every render. |
244-
| `className?` | `string` | `ogma-container` | className for the ogma container |
243+
| `children?` | `React.ReactNode` | `null` | The children of the component, such as `<Popup>` or `<Tooltip>` or your custom component. Ogma instance is avalable to the children components through `useOgma()` hook |
244+
| `ref?` | `React.Ref<Ogma>` | `null` | Reference to the Ogma instance |
245245

246246
### `<NodeStyle />`
247247

@@ -367,8 +367,8 @@ Wrapper to the Ogma `StyleClass` class. It allows you to apply styles to nodes a
367367
| Prop | Type | Default | Description |
368368
| ------------ | ------------------------------ | ------- | -------------------------------------------- |
369369
| **`name`** | `string` | | The class name to apply the styles to |
370-
| `nodeAttributes` | [`Ogma.NodeAttributesValue`](https://doc.linkurious.com/ogma/latest/api/types/nodeattributesvalue.html) | `{}` | Attributes to apply to the nodes or edges |
371-
| `edgeAttributes` | [`Ogma.EdgeAttributesValue`](https://doc.linkurious.com/ogma/latest/api/types/edgeattributesvalue.html) | `{}` | Attributes to apply to the edges |
370+
| `edgeAttributes?` | [`Ogma.EdgeAttributesValue`](https://doc.linkurious.com/ogma/latest/api/types/edgeattributesvalue.html) | `{}` | Attributes to apply to the edges |
371+
| `nodeAttributes?` | [`Ogma.NodeAttributesValue`](https://doc.linkurious.com/ogma/latest/api/types/nodeattributesvalue.html) | `{}` | Attributes to apply to the nodes or edges |
372372

373373

374374
### Example
@@ -395,18 +395,19 @@ Custom popup UI layer.
395395

396396
| Prop | Type | Default | Description |
397397
| ------------------ | ------------------ | ----------------------- | ----------------------------------------------------------- |
398-
| `position` | `Point \| (ogma: Ogma) => Point` | `null` | Position of the popup |
399-
| `size?` | `{ width: number \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | Size of the popup |
400-
| `children` | `React.ReactNode` | `null` | The children of the component |
401-
| `isOpen` | `boolean` | `true` | Whether the popup is open |
402-
| `onClose` | `() => void` | `null` | Callback when the popup is closed |
403-
| `placement` | `'top' \| 'bottom' \| 'right'\| 'left'` | Placement of the popup |
404-
| `ref?` | `React.Ref<Popup>` | `null` | Reference to the popup |
405398
| `closeOnEsc?` | `boolean` | `true` | Whether to close the popup when the user presses the ESC key |
406-
| `popupClass?` | `string` | `'ogma-popup'` | Class name to apply to the popup container |
399+
| `closePopupClass?` | `string` | `'ogma-popup--close'` | Class name to apply to the close button |
407400
| `contentClass?` | `string` | `'ogma-popup--content'` | Class name to apply to the popup content |
401+
| `isOpen?` | `boolean` | `true` | Whether the popup is open |
402+
| `onClose?` | `() => void` | `null` | Callback when the popup is closed |
403+
| `placement?` | `'top' \| 'bottom' \| 'right'\| 'left'` | Placement of the popup |
408404
| `popupBodyClass?` | `string` | `'ogma-popup--body'` | Class name to apply to the popup body |
409-
| `closePopupClass?` | `string` | `'ogma-popup--close'` | Class name to apply to the close button |
405+
| `popupClass?` | `string` | `'ogma-popup'` | Class name to apply to the popup container |
406+
| `position` | `Point \| (ogma: Ogma) => Point` | `null` | Position of the popup |
407+
| `size?` | `{ width: number \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | Size of the popup |
408+
| `children?` | `React.ReactNode` | `null` | The children of the component |
409+
| `ref?` | `React.Ref<Popup>` | `null` | Reference to the popup |
410+
410411

411412
#### Example
412413

@@ -430,11 +431,11 @@ and has the target of the event as argument.
430431

431432
| Prop | Type | Default | Description |
432433
| ----------- | ----------------- | ---------------------- | ----------------------------- |
434+
| `bodyClass?` | `string` | `'ogma-popup--body'` | The class name to add to the tooltip container |
433435
| `eventName` | `keyof TooltipEventFunctions` | | The name of the event to show the tooltip |
436+
| `placement?` | `Placement` | `top` | The placement of the tooltip |
434437
| `position?` | `Point` | `null` | The position of the tooltip if static |
435438
| `size?` | `{ width: number \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | The size of the tooltip |
436-
| `placement?` | `Placement` | `top` | The placement of the tooltip |
437-
| `bodyClass?` | `string` | `''` | The class name to add to the tooltip container |
438439
| `translate?` | `{ x: number, y: number }` | `{ x: 0, y: 0 }` | The amount of pixels to translate the tooltip container |
439440
| `children?` | `React.ReactNode \| (Node \| Edge \| Point) => React.ReactNode` | `null` | The children of the component |
440441
| `ref?` | `React.Ref<Overlay>` | `null` | Reference to the tooltip |
@@ -466,11 +467,12 @@ Custom canvas layer.
466467

467468
| Prop | Type | Default | Description |
468469
| ---- | ---- | ------- | ----------- |
469-
| `ref` | `React.Ref<CanvasLayer>` | `null` | Reference to the canvas layer |
470-
| `render` | `(ctx: CanvasRenderingContext2D) => void` | `null` | Callback to render the canvas layer |
471-
| `index?` | `number` | `1` | Index of the layer |
470+
| `index?` | `number` | `1` | The index of the layer |
472471
| `isStatic?` | `boolean` | `false` | Whether the layer is static |
473472
| `noClear?` | `boolean` | `false` | Whether to clear the canvas before rendering |
473+
| `render` | `(ctx: CanvasRenderingContext2D) => void` | `null` | Callback to render the canvas layer |
474+
| `visible?` | `boolean` | `true` | The visibility of the canvas |
475+
| `ref?` | `React.Ref<CanvasLayer>` | `null` | Reference to the canvas layer |
474476

475477
#### Example
476478

@@ -493,7 +495,11 @@ Generic DOM layer, see [`ogma.layers.addLayer`](https://doc.linkurious.com/ogma/
493495

494496
| Prop | Type | Default | Description |
495497
| ---- | ---- | ------- | ----------- |
496-
| `children` | `React.ReactNode` | `null`| The children of the layer |
498+
| `className?` | `string` | `""`| The class name of the layer |
499+
| `index?` | `number` | `null`| The index of the layer |
500+
| `children?` | `React.ReactNode` | `null`| The children of the layer |
501+
| `ref?` | `React.Ref<Layer>` | `null`| The reference to the layer |
502+
497503
#### Example
498504

499505
```tsx
@@ -512,11 +518,13 @@ Generic Overlay layer, see [`ogma.layers.addOverlay`](https://doc.linkurious.com
512518

513519
| Prop | Type | Default | Description |
514520
| ---- | ---- | ------- | ----------- |
515-
| `children` | `React.ReactNode` | `null`| The children of the layer |
516-
| `className` | `string` | `null`| Classname for the Overlay |
517-
| `scaled` | `boolean` | `true`| Wether the Overlay is scaled on zoom or not |
518-
| `position` | `Point \| (ogma: Ogma) => Point` | | Position of the Overlay |
519-
| `size?` | `{ width: number \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | Size of the Overlay |
521+
| `children?` | `React.ReactNode` | `null`| The children of the layer |
522+
| `className?` | `string` | `null`| The classname for the Overlay |
523+
| `position` | `Point \| (ogma: Ogma) => Point` | | The position of the Overlay |
524+
| `scaled?` | `boolean` | `true`| Whether the Overlay is scaled on zoom or not |
525+
| `size?` | `{ width: number \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | The size of the Overlay |
526+
| `ref?` | `React.Ref<Overlay>` | `null`| The reference to the overlay |
527+
520528

521529
#### Example
522530

@@ -548,8 +556,8 @@ Node grouping transformation. See [`ogma.transformations.addNodeGrouping()`](htt
548556

549557
| Prop | Type | Default | Description |
550558
| ------------ | ------------------------------ | ------- | ----------- |
551-
| `selector` | `(node: Ogma.Node) => boolean` | `null` | Selector to apply the attributes to the node |
552-
| `groupIdFunction` | `(node: Ogma.Node) => string \| undefined` | | Grouping function |
559+
| `selector?` | `(node: Ogma.Node) => boolean` | `null` | Selector to apply the attributes to the node |
560+
| `groupIdFunction?` | `(node: Ogma.Node) => string \| undefined` | | Grouping function |
553561
| `ref?` | `React.Ref<Ogma.Transformation>` | `null` | Reference to the transformation |
554562
| `...rest` | See [`ogma.transformations.addNodeGrouping()`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNodeGrouping) properties | | Node grouping transformation properties |
555563

@@ -573,8 +581,8 @@ Edge grouping transformation. See [`ogma.transformations.addEdgeGrouping()`](htt
573581

574582
| Prop | Type | Default | Description |
575583
| ------------ | ------------------------------ | ------- | ----------- |
576-
| `selector` | `(edge: Ogma.Edge) => boolean` | `null` | Selector for the edges |
577-
| `groupIdFunction` | `(edge: Ogma.Edge) => string \| undefined` | | Grouping function |
584+
| `selector?` | `(edge: Ogma.Edge) => boolean` | `null` | Selector for the edges |
585+
| `groupIdFunction?` | `(edge: Ogma.Edge) => string \| undefined` | | Grouping function |
578586
| `ref?` | `React.Ref<Ogma.Transformation>` | `null` | Reference to the transformation |
579587
| `...rest` | See [`ogma.transformations.addEdgeGrouping()`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeGrouping) properties | | Edge grouping transformation properties |
580588

@@ -641,7 +649,7 @@ Neighbor merging transformation. See [`ogma.transformations.addNeighborMerging()
641649

642650
| Prop | Type | Default | Description |
643651
| ------------ | ------------------------------ | ------- | ----------- |
644-
| `selector` | `(node: Ogma.Node) => boolean` | `null` | Selector |
652+
| `selector?` | `(node: Ogma.Node) => boolean` | `null` | Selector |
645653
| `dataFunction` | `(node: Ogma.Node) => object | undefined;` | | Neighbor data function |
646654
| `ref?` | `React.Ref<Ogma.Transformation>` | `null` | Reference to the transformation |
647655
| `...rest` | See [`ogma.transformations.addNeighborMerging()`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNeighborMerging) properties | | Neighbor merging transformation properties |
@@ -669,7 +677,7 @@ Neighbor generation transformation. See [`ogma.transformations.addNeighborGenera
669677

670678
| Prop | Type | Default | Description |
671679
| ------------ | ------------------------------ | ------- | ----------- |
672-
| `selector` | `(node: Ogma.Node) => boolean` | `null` | Selector |
680+
| `selector?` | `(node: Ogma.Node) => boolean` | `null` | Selector |
673681
| `neighborIdFunction` | `(node: Ogma.Node) => string|Array<string>|null;` | | Neighbor data function |
674682
| `ref?` | `React.Ref<Ogma.Transformation>` | `null` | Reference to the transformation |
675683
| `...rest` | See [`ogma.transformations.addNeighborMerging()`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNeighborGeneration) properties | | Transformation properties |
@@ -694,7 +702,7 @@ Node collapsing transformation. See [`ogma.transformations.addNodeCollapsing()`]
694702

695703
| Prop | Type | Default | Description |
696704
| ------------ | ------------------------------ | ------- | ----------- |
697-
| `selector` | `(node: Ogma.Node) => boolean` | `null` | Selector |
705+
| `selector?` | `(node: Ogma.Node) => boolean` | `null` | Selector |
698706
| `edgeGenerator?` | `(hiddenNode: Ogma.Node, node1: Ogma.Node, node2: Ogma.Node, edges1: Ogma.EdgeList, edges2: Ogma.EdgeList): RawEdge|null)` | | Edge generator function |
699707
| `ref?` | `React.Ref<Ogma.Transformation>` | `null` | Reference to the transformation |
700708
| `...rest` | See [`ogma.transformations.addNodeCollapsing()`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNodeCollapsing) properties | | Transformation properties |

0 commit comments

Comments
 (0)