Skip to content
Snippets Groups Projects
Select Git revision
  • develop
  • master default protected
  • hotfix/0.2.4
  • hotfix/0.2.3
  • hotfix/0.2.1
  • hotfix/0.2.0
  • feature/modifParam
  • release/0.2.0
  • hotfix/0.1.4
  • hotfix/0.1.1
  • hotfix/0.1.0
  • feature/tests
  • release/0.1.0
  • release/0.0.0
  • feature/ergonomie
  • feature/layout
  • main
  • 0.3.3
  • 0.3.2
  • 0.3.1
  • 0.3.0
  • 0.2.6
  • 0.2.5
  • 0.2.4
  • 0.2.3
  • 0.2.2
  • 0.2.1
  • 0.2.0
  • 0.1.8
  • 0.1.7
  • 0.1.6
  • 0.1.5
  • 0.1.3
  • 0.1.2
  • 0.1.1
  • 0.1.0
  • 0.0.1
37 results
Compare
Name Last commit Last update
cypress
public
src
.gitignore
.gitlab-ci.yml
.npmrc
README.md
cypress.config.ts
env.d.ts
index.html
package-lock.json
package.json
tsconfig.json
tsconfig.node.json
tsconfig.vitest.json
vite.config.ts
vite.config.ts.timestamp-1728476541774-f402dd9d8a0fe.mjs
README.md

Viz-layout-panel

The VizLayoutPanel component provides a draggable and positionable panel to configure the viz layout.

Props

Props Type default Description Optional
draggable boolean false Allows you to move the panel Yes
x number 0 X position of the panel Yes
y number 0 Y position of the panel Yes
network-style GraphStyleProperties - A network style object containing classes and styles associated with nodes. It enables the estimation of certain default parameters, such as spacing, based on the defined node sizes in the object. Yes

Events

Name Description Output
@closePanel Indicate to close the panel -
@applyLayout Return the layout function to apply on a network with the correct parameters (network:Network, networkStyle?:GraphStyleProperties):Promise<Network>

Types

Types GraphStyleProperties and Network are defined in the repository of the layout.

Use the package in another project

npm i @metabohub/viz-layout-panel

If your project is not using vuetify, you need to import it in src/main.ts :

import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from "@metabohub/viz-layout-panel";

createApp(App).use(vuetify).mount('#app')

Use the component :

<script setup lang="ts">
import { VizLayoutPanel } from "@metabohub/viz-layout-panel";
</script>

<template>
  <VizLayoutPanel
    :draggable="true"
    x="150"
    y="50"
    :network-style="networkStyle"
    @closePanel="yourFunctionToClosePanel"
    @applyLayout="yourFunctionToApplyLayout"
  />
</template>

<script setup lang="ts">

const network:Network = { ... }; // see usage of viz-layout repository
const  networkStyle :GraphStyleProperties = { ... }; // see usage of viz-layout repository

async function yourFunctionToApplyLayout(applyLayout:Function):void{
  const newNetwork = await applyLayout(network,networkStyle);
  // or
  const newNetworkWithoutStyle = await applyLayout(network);
}
</script>

<style>
@import '@metabohub/viz-layout-panel/dist/style.css';
</style>

Panel

The panel has 2 tabs :

  • default tab : contains a launch button that trigger @applyLayout and return the layout function with default parameters

  • advanced tab : contains parameters, help, start/stop and reset buttons. The start button will trigger @applyLayout when clicked and on parameter changes. The stop button halts the emission of the @applyLayout event on parameter changes. The reset button trigger halts the emission of the @applyLayout and reset parameters to default. If the networkStyle has changed, the new style may define updated default parameters for spacing.

Parameters of the layout

See section "Types for parameters" of the repository of the layout.

The panel is designed to be integrated into a tool that draws network in an svg, thus shiftCoord is set to false.

  • Minimal horizontal spacing : spacePixelHorizontal layout parameter

  • Minimal vertical spacing : spacePixelVertical layout parameter

  • Treatment of directed cycles : doCycle layout parameter

  • Treatment of duplicated nodes : if true, doPutAsideSideCompounds and doInsertionSideCompounds set to true, else set to false. doDuplicateSideCompounds always false as the panel is designed to be integrated into a tool that enables duplication of nodes.

  • Definition of nodes groups : if "No groups", doMainChain set to false. Else, doMainChain is true and each "Solution" corresponds to a pathType (LONGEST, ALL_LONGEST and ALL). The merge parameter is true for ALL_LONGEST and ALL.