README.md

# Viz-layout-panel

The `VizLayoutPanel` component provides a draggable and positionable panel to configure the [viz layout](https://forgemia.inra.fr/metabohub/web-components/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](https://forgemia.inra.fr/metabohub/web-components/viz-layout).

## Use the package in another project

```sh
npm i @metabohub/viz-layout-panel
```

If your project is not using vuetify, you need to import it in `src/main.ts` :
```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 : 
```ts
<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](https://forgemia.inra.fr/metabohub/web-components/viz-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.