From ee60e85489222ead045a82fcf0d3858e1a259fce Mon Sep 17 00:00:00 2001
From: Elora-V <elora95.vigo@gmail.com>
Date: Fri, 27 Sep 2024 11:55:58 +0200
Subject: [PATCH 1/3] renaming reversible attribut + changing export of
package + readonly on parameters
---
src/composables/GetSetAttributsNodes.ts | 2 +-
src/composables/LayoutMain.ts | 4 ++--
src/index.ts | 18 +++++++++++++++++-
src/types/Parameters.ts | 20 ++++++++++----------
4 files changed, 30 insertions(+), 14 deletions(-)
diff --git a/src/composables/GetSetAttributsNodes.ts b/src/composables/GetSetAttributsNodes.ts
index 2861b94..0b94c79 100644
--- a/src/composables/GetSetAttributsNodes.ts
+++ b/src/composables/GetSetAttributsNodes.ts
@@ -108,7 +108,7 @@ export function isDuplicate(network:Network,nodeID:string):boolean{
//___________________________________________________2. Reversible __________________________________________________________________________
export const classReversible="reversible";
-export const reversibleAttribute="reversible";
+export const reversibleAttribute="isReversible";
export const reactionClass="reaction";
diff --git a/src/composables/LayoutMain.ts b/src/composables/LayoutMain.ts
index 652ff15..ac7dafb 100644
--- a/src/composables/LayoutMain.ts
+++ b/src/composables/LayoutMain.ts
@@ -44,7 +44,7 @@ import { checkNetworkFormat } from "./CheckNetwork";
* @throws An error if the network or networkStyle is not defined or empty.
* @throws An error if the network is not in the correct format.
*/
-export async function algorithmOnNetwork(network:Network,networkStyle:GraphStyleProperties,parameters:Parameters=defaultParameters):Promise<Network>{
+export async function algorithmOnNetwork(network:Network,networkStyle:GraphStyleProperties={},parameters:Parameters=defaultParameters):Promise<Network>{
// check if the network has the correct format
await checkNetworkFormat(network,false, true);
@@ -59,7 +59,7 @@ export async function algorithmOnNetwork(network:Network,networkStyle:GraphStyle
// initialize the subgraphNetwork object
let subgraphNetwork:SubgraphNetwork={
network:networkLayout,
- networkStyle:networkStyle
+ networkStyle:networkStyle,
}
// change coordinates of the network with the algorithm
diff --git a/src/index.ts b/src/index.ts
index 525ff2d..f8f1eaf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,19 @@
import {algorithmOnNetwork} from "./composables/LayoutMain";
+import {Network, GraphStyleProperties, Node,Link, NodeStyle} from "./types/TypeVizCore";
+import { defaultParameters } from "./types/Parameters";
+import { PathType,StartNodesType } from "./types/EnumArgs";
-export {algorithmOnNetwork};
\ No newline at end of file
+export {algorithmOnNetwork};
+
+export type {
+ Network,
+ GraphStyleProperties,
+ Node,
+ Link,
+ NodeStyle,
+ PathType,
+ StartNodesType
+};
+
+export {defaultParameters};
+
\ No newline at end of file
diff --git a/src/types/Parameters.ts b/src/types/Parameters.ts
index a39695e..613c314 100644
--- a/src/types/Parameters.ts
+++ b/src/types/Parameters.ts
@@ -16,28 +16,28 @@ export interface Parameters {
doReactionReversible: boolean; // do the step duplication and choice of reaction reversible ?
doMainChain: boolean; // do the step main chain ?
- getSubgraph : (network: Network, sources: Array<string>,merge?:boolean,pathType?:PathType) => Promise<{[key:string]:{nodes:Array<string>, height:number}}>; // function to get subgraph (main chain)
+ readonly getSubgraph : (network: Network, sources: Array<string>,merge?:boolean,pathType?:PathType) => Promise<{[key:string]:{nodes:Array<string>, height:number}}>; // function to get subgraph (main chain)
startNodeTypeMainChain: StartNodesType; // for the main chain step : which are the start nodes?
pathType: PathType; // main chain step : longest path , all longest paths or all paths
- merge: boolean; // merging main chain ? If not : nodes can be in several clusters
+ readonly merge: boolean; // merging main chain ? If not : nodes can be in several clusters
doMiniBranch: boolean; // adding minibranch for main chains ?
- groupOrCluster: "group" | "cluster"; //main chain as group or cluster in DOT
+ readonly groupOrCluster: "group" | "cluster"; //main chain as group or cluster in DOT
doCycle: boolean; // do the step cycle ?
- allowInternalCycles: boolean; // allow internal cycles for tangent one ?
+ readonly allowInternalCycles: boolean; // allow internal cycles for tangent one ?
- addNodes: boolean; // adding node at the beginning of the DOT ?
- ordering: boolean; // reorder edges in DOT ? (for cycle step)
+ readonly addNodes: boolean; // adding node at the beginning of the DOT ?
+ readonly ordering: boolean; // reorder edges in DOT ? (for cycle step)
- dpi: number; // DPI for the image (viz parameter)
+ readonly dpi: number; // DPI for the image (viz parameter)
- numberNodeOnEdge: number; // space between two rank, with size of a node as unit (mean of all size)
- factorLengthSideCompounds: number; // % of the lenght of minimal edge to use as lenght of side compounds edges
+ readonly numberNodeOnEdge: number; // space between two rank, with size of a node as unit (mean of all size)
+ readonly factorLengthSideCompounds: number; // % of the lenght of minimal edge to use as lenght of side compounds edges
shiftCoord?: boolean; // shift coordinates : center is at the previous coord (because of top left corner)
}
-export let defaultParameters: Parameters = {
+export const defaultParameters: Parameters = {
doDuplicateSideCompounds: true, // user can change this parameter
doPutAsideSideCompounds: true, // user can change this parameter
--
GitLab
From 37d96e522dcaa855ddc70e7ec499347c7881636c Mon Sep 17 00:00:00 2001
From: Elora-V <elora95.vigo@gmail.com>
Date: Fri, 27 Sep 2024 11:56:18 +0200
Subject: [PATCH 2/3] debut doc
---
README.md | 285 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 282 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index af7d0f4..03e6e48 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,282 @@
-in package.json, change name of project
-src -> index.ts -> add all exported methods
-src/__tests__/ -> add unit test file
\ No newline at end of file
+# viz-layout
+
+## Description
+
+The viz-layout is a layout to draw metabolic pathways vertically. To use the layout, a network with nodes and directed links is required. User can provide an object describing the network style, thus a style attributs can be associated with nodes. If defined in the network style, height and width of nodes will be taken into account. The layout change the position of nodes, and can add some classes for nodes and links.
+
+The layout has been thinked to be executed on a directed bipartite graph where metabolite nodes are only linked to reaction nodes. A reaction can be reversible, links for a reversible reaction all have to be delared in the same direction. To reverse the reaction, the source and target of the links are inversed. A metabolite node can be declare as a side compounds. Classic examples of nodes that can de declared as such are water and ATP.
+
+
+## Getting started
+
+#### Create a typescript project
+
+1. **Initialize a new project**
+
+ First, create a new directory for your project and initialize it with `npm`:
+
+ ```bash
+ mkdir my-project
+ cd my-project
+ npm init -y
+ ```
+
+2. **Install TypeScript**
+
+ You'll need to install TypeScript as a development dependency in your project:
+
+ ```bash
+ npm install --save-dev typescript
+ ```
+
+3. **Set up the TypeScript configuration**
+
+ TypeScript requires a `tsconfig.json` file (at the root of the project) to specify how your TypeScript code should be compiled. You can generate a default configuration file by running:
+
+ ```bash
+ npx tsc --init
+ ```
+
+
+
+4. **Create your source files**
+
+ Inside your project, create a `src` directory for your TypeScript code:
+
+ ```bash
+ mkdir src
+ ```
+
+
+#### Install via npm
+
+The viz-layout package is currently only available on the MetaboHUB forge. To install it, you need to configure an `.npmrc` file (at the root of the project) to specify the retrieval path.
+
+```.npmrc
+@metabohub:registry=https://forgemia.inra.fr/api/v4/packages/npm/
+```
+
+Then you can install the package:
+
+```
+npm install @metabohub/viz-layout
+```
+
+#### Typescript configuration
+
+
+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 (at the root of the project):
+
+```ts
+declare module "@metabohub/viz-layout";
+```
+
+
+## Usage
+
+
+```typescript
+// Imports
+import type { Network , Node, Link, GraphStyleProperties, NodeStyle} from "@metabohub/viz-layout/src/types/TypeVizCore";
+import { algorithmOnNetwork } from "@metabohub/viz-layout"
+
+// Creation of network
+const nodes : {[key:string]:Node} = {
+ A: {
+ id: 'A',
+ x: 50,
+ y: 50,
+ classes: ["metabolite"],
+ metadata :{
+ isSideCompound : false
+ }
+ },
+ B: {
+ id: 'B',
+ x: 100,
+ y: 100,
+ classes: ["reaction"],
+ metadata : {
+ isReversible : true
+ }
+ }
+}
+const links : Link[] = [
+ {
+ source: nodes.A,
+ target: nodes.B,
+ id: 'A->B'
+ }
+]
+const network:Network = { id: 'network', nodes: nodes, links: links };
+
+
+// Creation of network styles
+const nodeStyle : NodeStyle = {
+ metabolite: {
+ height: 50,
+ width: 50
+ },
+ reaction: {
+ height: 100,
+ width: 100
+ }
+ };
+const networkStyle :GraphStyleProperties ={ nodeStyles: nodeStyle };
+
+// Choosing parameters
+const parameters = defaultParameters;
+parameters.doReactionReversible = false;
+
+// Application of layout
+const newNetwork = await algorithmOnNetwork(network, networkStyle, parameters);
+```
+
+
+## Types
+
+### Types for network
+
+##### Network
+
+| Attribut | Type | Description |
+| -------- | ---- | ----------- |
+| id | `string` | Network's id |
+| nodes | `{[key: string] Node}` | Object that contains nodes |
+| links | `Array<Link>` | List that contains links |
+
+
+##### Node
+
+| Attribut | Type | Description |
+| -------- | ---- | ----------- |
+| id | `string` | Node's id |
+| x | `number` | X node's position |
+| y | `number` | Y node's position |
+| classes | `Array<string>` | Node's classes to manage style |
+| metadata | `{[key: string]: string \| number \| {[key: string]: string \| number} \| Array<string> \| boolean}` | Node's metadata |
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
+ <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>
+The id of the node has to be the same that the key associated with the node in 'nodes' in the network !
+
+<br />
+<br />
+
+The classes of a node can contain at least either `metabolite` or `reaction`.
+
+Metadata can contains those elements :
+| Key | Type | Description |
+| -------- | ---- | ----------- |
+| isSideCompound | `booleen` | Node is declared as a side compound |
+| isReversible | `booleen` | Node is declared as a reversible |
+
+If `isSideCompound` is not set, the step to manage side compounds won't do anything. A class `duplicate` will be added to side compounds nodes that have been duplicated.
+If `isReversible` is not set and reaction node doesn't contains a class "reaction", the step to manage reaction reversible won't do anything : there is no reaction that are reversible.
+
+
+##### Link
+
+| Attribut | Type | Description |
+| -------- | ---- | ----------- |
+| id | string | Link's id |
+| source | Node | Source node of the link |
+| target | Node | Target node of the link |
+| classes | Array<string> | Link's classes to manage style |
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
+ <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg> The source and target need to be pointer to a node present in the network (see usage) !
+
+In order to have a bipartite graph, links should associate a metabolite node with a reaction node.
+A class `reversible` will be added by the layout for links associated with a reversible reaction if the step to manage reversible reaction is done.
+
+### Types for style
+
+#### GraphStyleProperties
+
+| Attribut | Type | Description |
+| -------- | ---- | ----------- |
+| nodeStyles | { [key: string]: NodeStyle } | Object that contains nodes classes name associated to their style |
+
+The keys of nodeStyles need to be the same that classes of nodes to associate the style to nodes.
+
+#### NodeStyle
+
+| Attribut | Type | Description |
+| -------- | ---- | ----------- |
+| height | number | Node's height |
+| width | number | Node's width |
+
+
+### Types for parameters
+
+...
+
+## Function
+
+### algorithmOnNetwork
+
+Is a asynchronous function.
+
+##### Input
+
+| Arguments | Type | default | Description | Optional |
+| ----- | ---- | ------- | ----------- | -------- |
+| network | `Network` | - | Network object that contains nodes and links of the network | No |
+| networkStyle | `GraphStyleProperties` | {} | Network style object that contains classes and style associated with nodes | Yes |
+| parameters | `Parameters` | defaultParameters | Parameters of the step of layout | Yes |
+
+To change parameters, you need to get defaultParameters and then modify the accessible attributs.
+
+##### Output
+
+ Type | Description
+ ---- | -----------
+ `Network` | network with modified node positions, and some added classes
+
+
+#### Step of the layout
+
+##### Base Layout
+
+...
+
+##### Management of side compounds
+
+Nodes declared as side compounds are duplicated if `doDuplicateSideCompounds` is true.
+Nodes declared as side compounds are removed from the network object if `doPutAsideSideCompounds` is true. They can be temporary suppressed so that they are placed depending on the positions of the other nodes.
+
+At the end of the algrithm, side compounds are reinserted in the network if `doPutAsideSideCompounds` is true (if they have been removed in the first place), and if `doDuplicateSideCompounds` is true. If side compounds are suppressed whitout having been duplicated, there is no method implemented to reinsert them.
+
+| `doDuplicateSideCompounds` | `doPutAsideSideCompounds` | Reinsertion of side compounds ? |
+|---|---|---|
+| true | true | true |
+| false | false | false |
+| true | false | false |
+| false | true | false |
+
+
+
+
+##### Management of reversible reaction
+
+For the step to have an effect
+
+
+##### Management of directed cycles
+% dont choix reaction rev
+Les circuits de plus de trois nœuds du graphe sont détectés et conservés dans une liste. L'algorithme de détection a été adapté pour que les circuits trouvés ne contiennent pas à la fois le nœud d'origine et sa version réversible. Les circuits sont triés par taille décroissante et pour chacun les versions réversibles des nœuds des circuits sont supprimées. Les circuits n'existant plus dû aux suppressions sont retirés de la liste.
+
+
+
+
+##### Management of main chains
+Les chaînes principales sont détectées et les produits sans nœuds fils liés aux réactions de la chaîne y sont ajoutés (cf. \ref{chaîne}).
++ mini branch
+
+
+
+#### Shifting coordinates
--
GitLab
From 3ce53a17dfd81036b6bc34152b019fc7e5da3511 Mon Sep 17 00:00:00 2001
From: Elora-V <elora95.vigo@gmail.com>
Date: Fri, 27 Sep 2024 14:54:09 +0200
Subject: [PATCH 3/3] base doc + shift coord false for default
---
README.md | 125 +++++++++++++++----
src/composables/LayoutMain.ts | 4 +-
src/composables/__tests__/LayoutMain.test.ts | 10 +-
src/index.ts | 4 +-
src/types/Parameters.ts | 2 +-
5 files changed, 108 insertions(+), 37 deletions(-)
diff --git a/README.md b/README.md
index 03e6e48..78f5d90 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,44 @@
# viz-layout
-## Description
-
-The viz-layout is a layout to draw metabolic pathways vertically. To use the layout, a network with nodes and directed links is required. User can provide an object describing the network style, thus a style attributs can be associated with nodes. If defined in the network style, height and width of nodes will be taken into account. The layout change the position of nodes, and can add some classes for nodes and links.
+---
-The layout has been thinked to be executed on a directed bipartite graph where metabolite nodes are only linked to reaction nodes. A reaction can be reversible, links for a reversible reaction all have to be delared in the same direction. To reverse the reaction, the source and target of the links are inversed. A metabolite node can be declare as a side compounds. Classic examples of nodes that can de declared as such are water and ATP.
+## Description
+The viz-layout is a layout to draw metabolic pathways vertically. To use the layout, a network with nodes and directed links is required. User can provide an object describing the network style. If defined in the network style, height and width of nodes can be taken into account. The layout change the position of nodes, and can add some classes for nodes and links.
+
+The layout is designed to be applied to directed bipartite graphs, where metabolite nodes are only connected to reaction nodes. Reactions can be reversible, but for each reversible reaction, all links must be declared for one direction. To reverse the direction of a reaction, the source and target of the links are swapped. Additionally, metabolite nodes can be marked as side compounds, with common examples being water and ATP. A step of the layout will duplicate them and place them after the other nodes.
+
+The y-axis is inverted compared to the usual Cartesian convention (where smaller y values are lower on the graph). It was designed for systems like SVG where smaller y values are positioned at the top of the screen. Therefore, the initial reactants, placed at the start of the reaction sequence, will have smaller y values, positioning them at the top of the diagram. The products of the reaction will have larger y values, placing them lower.
+
+---
+
+## Table of Contents
+
+- [Getting Started](#getting-started)
+ - [Create a Typescript Project](#create-a-typescript-project)
+ - [Install via npm](#install-via-npm)
+ - [Typescript Configuration](#typescript-configuration)
+- [Usage](#usage)
+- [Types](#types)
+ - [Types for Network](#types-for-network)
+ - [Network](#network)
+ - [Node](#node)
+ - [Link](#link)
+ - [Types for Style](#types-for-style)
+ - [GraphStyleProperties](#graphstyleproperties)
+ - [NodeStyle](#nodestyle)
+ - [Types for Parameters](#types-for-parameters)
+- [Layout](#layout)
+ - [layoutOnNetwork( )](#layoutonnetwork)
+ - [Step of the Layout](#step-of-the-layout)
+ - [Base Layout](#base-layout)
+ - [Management of Side Compounds](#management-of-side-compounds)
+ - [Management of Reversible Reaction](#management-of-reversible-reaction)
+ - [Management of Directed Cycles](#management-of-directed-cycles)
+ - [Management of Main Chains](#management-of-main-chains)
+ - [Shifting Coordinates](#shifting-coordinates)
+
+---
## Getting started
@@ -41,10 +74,11 @@ The layout has been thinked to be executed on a directed bipartite graph where m
4. **Create your source files**
- Inside your project, create a `src` directory for your TypeScript code:
+ Inside your project, create a `src` directory and a `index.ts` file for your TypeScript code:
```bash
mkdir src
+ touch src/index.ts
```
@@ -71,7 +105,7 @@ Once the installation step is completed, you need to declare the module. To do t
declare module "@metabohub/viz-layout";
```
-
+---
## Usage
@@ -127,11 +161,13 @@ const networkStyle :GraphStyleProperties ={ nodeStyles: nodeStyle };
// Choosing parameters
const parameters = defaultParameters;
parameters.doReactionReversible = false;
+parameters.pathType = PathType.ALL_LONGEST
// Application of layout
-const newNetwork = await algorithmOnNetwork(network, networkStyle, parameters);
+const newNetwork = await layoutOnNetwork(network, networkStyle, parameters);
```
+---
## Types
@@ -160,10 +196,15 @@ const newNetwork = await algorithmOnNetwork(network, networkStyle, parameters);
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
-The id of the node has to be the same that the key associated with the node in 'nodes' in the network !
+The id of the node has to be the same that the key associated with the node in 'nodes' in the network ! Morever, the string for id must follow one of the formats listed below: <br />
+
+- any string of alphabetic (`[a-zA-Z\200-\377]`) characters, underscores (`'_'`) or digits(`[0-9]`), not beginning with a digit
+- a numeral [`-`]?(`.`[`0`-`9`]⺠`|` [`0`-`9`]âº(`.`[`0`-`9`]*)? )
+- any double-quoted string (`"..."`) possibly containing escaped quotes (`\"`)
+- an HTML string (`<...>`)
<br />
-<br />
+
The classes of a node can contain at least either `metabolite` or `reaction`.
@@ -213,20 +254,31 @@ The keys of nodeStyles need to be the same that classes of nodes to associate th
### Types for parameters
-...
+To initialize parameters, use the `defaultParameters` variable from the package. You can then modify the desired parameters as needed (see usage). See "Step of the layout" for a better understanding of some parameters.
+
+| Parameter | Type | Default | Description |
+|--------------------------|-------------|---------------|--------------------------------------------------------------------------------------------------|
+| doDuplicateSideCompounds | `boolean` | true | Whether to duplicate side compounds |
+| doPutAsideSideCompounds | `boolean` | true | Whether to remove (temporarily) side compounds |
+| doReactionReversible | `boolean` | true | Whether to handle reversible reactions |
+| doMainChain | `boolean` | true | Whether to find and clusterized main chain |
+| pathType | `PathType` | ALL_LONGEST | Defines the path type for the main chain step: LONGEST, ALL_LONGEST, or ALL. |
+| doCycle | `boolean` | true | Whether to process directed cycles |
+| shiftCoord | `boolean` | false | Whether to get top left corner coordinates of nodes (if false, center of nodes is returned) |
-## Function
+---
-### algorithmOnNetwork
+## Layout
-Is a asynchronous function.
+
+`layoutOnNetwork(network, networkStyle, parameters)` is a asynchronous function.
##### Input
| Arguments | Type | default | Description | Optional |
| ----- | ---- | ------- | ----------- | -------- |
-| network | `Network` | - | Network object that contains nodes and links of the network | No |
-| networkStyle | `GraphStyleProperties` | {} | Network style object that contains classes and style associated with nodes | Yes |
+| network | `Network` | *no default* | Network object that contains nodes and links of the network | No |
+| networkStyle | `GraphStyleProperties` | { } | Network style object that contains classes and style associated with nodes | Yes |
| parameters | `Parameters` | defaultParameters | Parameters of the step of layout | Yes |
To change parameters, you need to get defaultParameters and then modify the accessible attributs.
@@ -235,21 +287,24 @@ To change parameters, you need to get defaultParameters and then modify the acce
Type | Description
---- | -----------
- `Network` | network with modified node positions, and some added classes
+ `Promise<Network>` | network with modified node positions, and some added classes
#### Step of the layout
##### Base Layout
-...
+The base layout used in the algorithm is a Sugiyama layout. It is implemented by the viz.js library (https://github.com/mdaines/viz-js), a JS wrapper of GraphViz (https://graphviz.org/documentation/). It correspond to the dot layout of GraphViz.
+
+<small>E. R. GANSNER, E. KOUTSOFIOS, S. C. NORTH et K.-P. VO, “A technique for drawing directed graphsâ€, IEEE Transactions on Software Engineering, t. 19, no 3, p. 214-230, 1993.</small>
+
##### Management of side compounds
-Nodes declared as side compounds are duplicated if `doDuplicateSideCompounds` is true.
-Nodes declared as side compounds are removed from the network object if `doPutAsideSideCompounds` is true. They can be temporary suppressed so that they are placed depending on the positions of the other nodes.
+Nodes declared as side compounds are duplicated if `doDuplicateSideCompounds = true`.
+Nodes declared as side compounds are removed from the network object if `doPutAsideSideCompounds = true`. They can be temporary suppressed so that they are placed depending on the positions of the other nodes at the end.
-At the end of the algrithm, side compounds are reinserted in the network if `doPutAsideSideCompounds` is true (if they have been removed in the first place), and if `doDuplicateSideCompounds` is true. If side compounds are suppressed whitout having been duplicated, there is no method implemented to reinsert them.
+At the end of the layout, side compounds are reinserted in the network if `doPutAsideSideCompounds = true` (if they have been removed in the first place), and if `doDuplicateSideCompounds = true`. If side compounds are suppressed whitout having been duplicated, there is no method implemented to reinsert them.
| `doDuplicateSideCompounds` | `doPutAsideSideCompounds` | Reinsertion of side compounds ? |
|---|---|---|
@@ -260,23 +315,39 @@ At the end of the algrithm, side compounds are reinserted in the network if `doP
-
##### Management of reversible reaction
-For the step to have an effect
+The step is done if `doReactionReversible = true`.
+
+For the step to have an effect, reaction nodes that represent a reversible reaction need to have the class `reaction` in their classes, and `metadata.isReversible = true`.
+This step choose for each reversible reaction a direction that will maintien the continuity of a sequence of reaction in the drawing. Links associated with those reactions get a class `reversible`.
##### Management of directed cycles
-% dont choix reaction rev
-Les circuits de plus de trois nœuds du graphe sont détectés et conservés dans une liste. L'algorithme de détection a été adapté pour que les circuits trouvés ne contiennent pas à la fois le nœud d'origine et sa version réversible. Les circuits sont triés par taille décroissante et pour chacun les versions réversibles des nœuds des circuits sont supprimées. Les circuits n'existant plus dû aux suppressions sont retirés de la liste.
+The step is done if `doCycle = true`.
+Directed cycles of more that 3 nodes are found. They are placed in circle as much as possible. When several directed cycles have common nodes, all the nodes won't necessarily be placed in circle. Those will be placed by a force layout (of D3 library : https://d3js.org/).
+
+If `doReactionReversible = true`, different directed cycles can be found as both direction of reversible reaction are taken into account, else only the direction declared in the network is used.
##### Management of main chains
-Les chaînes principales sont détectées et les produits sans nœuds fils liés aux réactions de la chaîne y sont ajoutés (cf. \ref{chaîne}).
-+ mini branch
+
+The step is done if `doMainChain = true`.
+
+Some nodes that represent "main chain" are grouped in a cluster subgraph in the viz.js library (Sugiyama layout). It can help the resulting drawing or not. You can test with or without the step.
+
+Main chain are defined as merge of path in the network. Start nodes are declared in the algorithm, then the network is convert into a DAG (no directed cycle). Longest path will be found from the start nodes. If several paths have common nodes, they can be merged. A merge of path represent a main chain.
+
+Several versions of this step are implemented :
+ - `LONGEST` : when longest paths are searched from a start node, if several are found, only one will be keeped
+ - `ALL_LONGEST` : when longest paths are searched from a start node, all the longest are keeped
+ - `ALL` : when longest paths are searched from a start node, all paths between start node and terminal node of longest paths are keeped
+
+`ALL_LONGEST` is the default version, to change it you need to change the parameter pathType with the defined type `PathType` (ex : `parameters.pathType = PathType.ALL`).
+##### Shifting coordinates
-#### Shifting coordinates
+If `shiftCoord = true`, the node's coordinates represent its top-left corner; otherwise, they represent the node's center. When shifting the coordinates, the adjustment is made so that positioning the node by its top-left corner keeps it centered in its original location. Specifically, the coordinates are shifted by half the node's height and width. To define a node's `height` and `width`, refer to `networkStyle`. This is useful when rendering networks in SVG format.
\ No newline at end of file
diff --git a/src/composables/LayoutMain.ts b/src/composables/LayoutMain.ts
index ac7dafb..a9dcb2e 100644
--- a/src/composables/LayoutMain.ts
+++ b/src/composables/LayoutMain.ts
@@ -27,7 +27,7 @@ import { checkNetworkFormat } from "./CheckNetwork";
/*******************************************************************************************************************************************************
* This file contains the main function of the algorithm (that is to change the coordinates of a network => application of the layout).
*
- * -> algorithmOnNetwork :
+ * -> layoutOnNetwork :
* change the nodes coordinates of network
* -> allSteps :
* apply all steps of the algorithm to change node coordinates of a network
@@ -44,7 +44,7 @@ import { checkNetworkFormat } from "./CheckNetwork";
* @throws An error if the network or networkStyle is not defined or empty.
* @throws An error if the network is not in the correct format.
*/
-export async function algorithmOnNetwork(network:Network,networkStyle:GraphStyleProperties={},parameters:Parameters=defaultParameters):Promise<Network>{
+export async function layoutOnNetwork(network:Network,networkStyle:GraphStyleProperties={},parameters:Parameters=defaultParameters):Promise<Network>{
// check if the network has the correct format
await checkNetworkFormat(network,false, true);
diff --git a/src/composables/__tests__/LayoutMain.test.ts b/src/composables/__tests__/LayoutMain.test.ts
index feae6dc..a8296f9 100644
--- a/src/composables/__tests__/LayoutMain.test.ts
+++ b/src/composables/__tests__/LayoutMain.test.ts
@@ -470,7 +470,7 @@ describe('LayoutMain', () => {
throw new Error("Incorrect network format");
});
- await expect(LayoutMain.algorithmOnNetwork(networkLayout, {})).rejects.toThrow("Incorrect network format");
+ await expect(LayoutMain.layoutOnNetwork(networkLayout, {})).rejects.toThrow("Incorrect network format");
});
@@ -478,13 +478,13 @@ describe('LayoutMain', () => {
const emptyNetwork: Network = { id:"network", nodes: {}, links: [] };
- await expect(LayoutMain.algorithmOnNetwork(emptyNetwork, {})).rejects.toThrow('The network is not defined, has no nodes or no links : the algorithm will not be executed');
+ await expect(LayoutMain.layoutOnNetwork(emptyNetwork, {})).rejects.toThrow('The network is not defined, has no nodes or no links : the algorithm will not be executed');
});
it ('should throw error if network has no links', async () => {
const noNodesNetwork: Network = { id:"network", nodes:nodes, links: [] };
- await expect(LayoutMain.algorithmOnNetwork(noNodesNetwork, {})).rejects.toThrow('The network is not defined, has no nodes or no links : the algorithm will not be executed');
+ await expect(LayoutMain.layoutOnNetwork(noNodesNetwork, {})).rejects.toThrow('The network is not defined, has no nodes or no links : the algorithm will not be executed');
});
@@ -494,7 +494,7 @@ describe('LayoutMain', () => {
networktoNetworkLayoutMock.mockImplementationOnce((network:Network)=>{return network });
networkLayoutToNetworkMock.mockImplementationOnce((network:NetworkLayout)=>{return network});
- const result= await LayoutMain.algorithmOnNetwork(networkLayout, {});
+ const result= await LayoutMain.layoutOnNetwork(networkLayout, {});
expect(networktoNetworkLayoutMock).toHaveBeenCalledTimes(1);
expect(networkLayoutToNetworkMock).toHaveBeenCalledTimes(1);
@@ -503,7 +503,7 @@ describe('LayoutMain', () => {
it('should call all steps and change at least one position', async () => {
- const result= await LayoutMain.algorithmOnNetwork(networkLayout, {});
+ const result= await LayoutMain.layoutOnNetwork(networkLayout, {});
let changed = false;
for (const node of Object.values(result.nodes)) {
diff --git a/src/index.ts b/src/index.ts
index f8f1eaf..73da76a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,9 @@
-import {algorithmOnNetwork} from "./composables/LayoutMain";
+import {layoutOnNetwork} from "./composables/LayoutMain";
import {Network, GraphStyleProperties, Node,Link, NodeStyle} from "./types/TypeVizCore";
import { defaultParameters } from "./types/Parameters";
import { PathType,StartNodesType } from "./types/EnumArgs";
-export {algorithmOnNetwork};
+export {layoutOnNetwork as algorithmOnNetwork};
export type {
Network,
diff --git a/src/types/Parameters.ts b/src/types/Parameters.ts
index 613c314..38eba04 100644
--- a/src/types/Parameters.ts
+++ b/src/types/Parameters.ts
@@ -62,5 +62,5 @@ export const defaultParameters: Parameters = {
numberNodeOnEdge: 3, // user can change this parameter, but doesn't work for cycle edge length
factorLengthSideCompounds: 1/2, // user can change this parameter
- shiftCoord: true,
+ shiftCoord: false,
};
\ No newline at end of file
--
GitLab