Newer
Older
# VizCore
VizCore is a package develop to visualise network under JSONGraph format. With the VizCore, you have access to some composables that allow you to import and manage your network visualisation. You can also add some plugins to ehance your experience.
Demo website: https://metexplorevizv4-metexplore-670bf50d328976f7d582396fcaf4bdefe305.pages.mia.inra.fr/
## Use the package in another project
### Dependencies version
| Library | Version |
| ------- | ------- |
| vue | 3.3.4 |
| vue-tsc | 1.8.5 |
| vite | 4.4.5 |
| @vueuse/core | 10.7.0 |
| d3 | 7.8.5 |
### Project configuration
First, you need to initialize a project. The simplest way is to create a Vue project to stay within the same environment as VizCore. To initialize your project, you can follow the instructions on the following page: [Vue 3 tutorial](https://vuejs.org/guide/quick-start.html).
Then, ensure that your project does not contain any default styles (CSS). Since VizCore operates through SVG tags, incorrectly configuring the default style of your page could result in truncated or even non-functional SVGs.
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
The VizCore package is currently only available on the MetaboHUB forge. To install it, you need to configure an .npmrc file to specify the retrieval path.
``` bash
@metabohub:registry=https://forgemia.inra.fr/api/v4/packages/npm/
```
Once the installation step is completed, you need to declare the module. To do this, add the following line in the env.d.ts file:
```ts
declare module "@metabohub/viz-core";
```
### Installation
```sh
npm i -D @metabohub/viz-core
```
### Use the component
```ts
<script setup lang="ts">
import type { Network } from "@metabohub/viz-core/src/types/Network";
import type { GraphStyleProperties } from "@metabohub/viz-core/src/types/GraphStyleProperties";
import { NetworkComponent } from "@metabohub/viz-core";
const nodes = {
A: {
id: 'A',
x: 50,
y: 50
},
B: {
id: 'B',
x: 100,
y: 100
}
}
const links = [
{
source: nodes.A,
target: nodes.B,
id: ''
}
]
const network = ref<Network>({id: 'test', nodes: nodes, links: links});
const networkStyle = ref<GraphStyleProperties>({nodeStyles: {}, linkStyles: {}});
</script>
<template>
<NetworkComponent
:network="network"
:graphStyleProperties="networkStyle"
></NetworkComponent>
</template>
<style>
@import "@metabohub/viz-core/dist/style.css";
</style>
```
## Props
### NetworkComponent
| Props | Type | default | Description | Optional |
| ----- | ---- | ------- | ----------- | -------- |
| network | Network | {} | Network object that contains nodes and links of the network | No |
| graphStyleProperties | GraphStyleProperties | {} | Network style object taht contains classes and style associated with of nodes and links | Yes |
A `<slot />` tag is also available in the component. This tag allows you to add other components containing SVGs, which will be directly handled by the network's SVG tag, enabling you to add elements directly to the graph.
```ts
<template>
<NetworkComponent
:network="network"
:graphStyleProperties="networkStyle"
>
<yourComponent />
</NetworkComponent>
</template>
```
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
## Types
### Network
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| id | string | Network's id |
| label | string | Network's label |
| nodes | {[key: string] Node} | Object that contains nodes |
| links | Array<Link> | List that contains links |
| type | string | Network type (metabolic, proteomic, knowledge, ...) |
| rescale | boolean | Allows you to implement an automatic rescale |
### Node
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| id | string | Node's id |
| label | string | Node's label |
| x | number | X node's position |
| y | number | Y node's position |
| classes | Array<string> | Node's classes to manage style |
| hidden | boolean | Allows you to display or not the node |
| metadata | {[key: string]: string | number | {[key: string]: string | number} | Array<string> | boolean} | Node's metadata |
### Link
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| id | string | Link's id |
| label | string | Link's label |
| source | Node | Source node of the link |
| target | Node | Target node of the link |
| type | string | Link's type |
| classes | Array<string> | Link's classes to manage style |
| relation | string | Link's relation |
| directed | boolean | Allows you to choose if the link is directed or not |
| metadata | {[key: string]: string | number | {[key: string]: string | number} | Array<string> | boolean} | Link's metadata |
### GraphStyleProperties
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| nodeStyles | { [key: string]: NodeStyle } | Object that contains nodes classes name associated to their style |
| linkStyles | { [key: string]: LinkStyle } | Object that contains links classes name associated to their style |
| curveLine | boolean | Allows you to choose if links are curve or not |
| directed | boolean | Allows you to choose if links are directed or not |
### NodeStyle
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| height | number | Node's height |
| width | number | Node's width |
| fill | string | Node's color |
| strokeWidth | number | Node's border width |
| stroke | string | Node's border color |
| displayLabel | boolean | Allows you to display or not nodes label |
| label | string | Allows you to choose which node's attribut is display as label (id or label) |
| shape | string | Node's shape (rectangle, circle, diamond, triangle or inverseTriangle) |
| opacity | number | Node's opacity (between 0 and 1) |
### LinkStyle
| Attribut | Type | Description |
| -------- | ---- | ----------- |
| display | boolean | Allows you to display or not links |
| stroke | string | Link's color |
| strokeWidth | number | Link's width |
| opacity | number | Link's opacity (between 0 and 1) |
## Events
### NetworkComponent
| Name | Trigger | Output |
| ---- | ------- | ------ |
| nodeLeftClickEvent | left click on node | Event: MouseEvent, node: Node |
| nodeRightClickEvent | right click on node | Event: MouseEvent, node: Node |
| mouseOverNode | Mouse over a node | Event: MouseEvent, node: Node |
| mouseLeaveNode | Mouse leave a node | Event: MouseEvent, node: Node |
| dragStart | Start dragging a node | Void |
| dragEnd | Stop dragging a node | Void |
## Composables
### CreateRandomGraph
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| useRandomNetwork | numNodes: number, numLinks: number | Create a random graph that contains number of nodes and links define in arguments | Network |
### ReadJsonGraph
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| readJsonGraph | jsonGraph: string | Read graph data and return network and styles object | { network: Network, networkStyle: GraphStyleProperties } |
### UseCreateForceLayout
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| createStaticForceLayout | network: Network, autoRescale: Boolean = false | Take a network and apply a d3 force layout algorithm on WITHOUT simulation | Promise<Network> |
| createForceLayout | network: Network, autoRescale: Boolean = false | Take a network and apply a d3 force layout algorithm on WITH simulation | Network |
### UseGraphManager
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| switchGraphMode | mode: boolean | Change a boolean to switch between two modes. For example between selection and zoom for graph panel | boolean |
| nodeSelection | node: Node | Select or unselect a node | void |
| defineBrush | network: Network, styles: {[key: string]: NodeStyle} | Define brush tag and functions to select multiple nodes at ctrl + left click | void |
| stopBrush | X | Remove brush tag and functions | void |
| switchCursor | style: string | Change cursor style for brush. Allow to switch between default (panzoom) and crosshair (brush) | void |
| verticalNodesAlign | network: Network, styles: {[key: string]: NodeStyle} | Align vertically selected nodes (in list) | void |
| horizontalNodesAlign | network: Network, styles: {[key: string]: NodeStyle} | Align horizontally selected nodes (in list) | void |
| unselectAll | network: Network | Unselect all selected nodes | void |
### UseImportNetwork
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| importNetworkFromURL | url: string, network: Ref<Network>, networkStyle: Ref<GraphStyleProperties>, callbackFunction = () => {} | Import network at JSONGraph format from an URL | void |
| importNetworkFromFile | file: File, network: Ref<Network>, networkStyle: Ref<GraphStyleProperties>, callbackFunction = () => {} | Import network at JSONGraph format from a file | void |
### UseManageNetworkData
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| checkNodesPosition | network: Network, threshold: number | Check if nodes of network have pos set to 0, 0. And returns a boolean according to a percentage threshold | boolean |
| removeNode | nodeId: string, network: Network, rIsoNode: boolean = false | Remove specific node from network object | void |
| removeAllSelectedNodes | listId: Array<string>, network: Network, rIsoNode: boolean = false | Remove a list of nodes from network object | void |
| duplicateNode | nodeId: string, network: Network, networkStyle: GraphStyleProperties | Duplicate specific node in network object | void |
| removeIsolatedNodes | network: Network | Remove all nodes that are not connected with any other node | void |
| removeAllNodesByAttribut | network: Network, attribut: string, rIsoNode: boolean = false | Remove all nodes according to a specific metadata attribut | void |
| duplicateAllNodesByAttribut | network: Network, networkStyle: GraphStyleProperties, attribut: string | Duplicate all nodes according to a specific metadata attribut | void |
| switchLineStyle | networkStyle: GraphStyleProperties | Switch between line path and curve path | void |
### UseSaveNetwork
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| saveNetworkAsJSON | network: Network, networkStyle: GraphStyleProperties | Download JSONGraph of current visualisation for future use | void |
### UseStyleManager
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| addLinkStyle | link: Link, linkStyle: LinkStyle, styleName: string, networkStyle: GraphStyleProperties | Apply specific style to one link | void |
| removeLinkStyle | link: Link, styleName: string | Remove specific style to one link | void |
| addNodeStyle | node: Node, nodeStyle: NodeStyle, styleName: string, networkStyle: GraphStyleProperties | Apply specific style to one node | void |
| removeNodeStyle | node: Node, styleName: string | Remove specific style to one node | void |
| nodeBorderColorByAttribut | network: Network, networkStyle: GraphStyleProperties, attribut: string | Color node border according to a metadata attribut. Must be a string | void |
| updateClassStyle | networkStyle: GraphStyleProperties, className: string, styleObject: NodeStyle or LinkStyle, targetObject: string | Update style for a specific class | void |
| createClassStyle | network: Network, networkStyle: GraphStyleProperties, className: string, styleObject: NodeStyle or LinkStyle, targetObject: string, listTarget: Array<string> | Create new style class for a list of nodes or links | void |
| addMappingStyleOnNode | type: string, style: string, targetLabel: string, values: Function or {[key: string]: string or number} or string, mappingName: string, conditionName: string, data: {[key: string]: {[key: string]: string or number} or Array<string>}, network: Network, graphStyleProperties: GraphStyleProperties
| Apply style on nodes according to mapping values | void |
| removeMappingStyleOnNode | network: Network, networkStyle: GraphStyleProperties, mappingName: string, conditionName: string, type: string, style: string | Remove specific mapping style over network | void |
### UseUndo
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| createUndoFunction | objectUndoable: any, capacityNumber: number | Create different methods from useRefHistory to a specific object to manage undo / redo functions | {undo: Function, redo: Function, commit: Function, resume: Function, pause: Function} |
### UseZoomSvg
| Name | Arguments | Description | Output |
| ---- | --------- | ----------- | ------ |
| initZoom | X | Apply d3.zoom() event on graph svg | d3.ZoomBehavior<Element, unknown> |
| stopZoom | X | Remove d3.zoom() event from graph SVG | void |
| rescale | zoomObject: d3.ZoomBehavior<Element, unknown> | Fit network to graph svg (screen) | void |