@milaboratories/graph-maker

Vue-component including graph settings interface and resulting rendered graph. For using graph only (creating picture without user interface) use miplots4.

How to connect

Basic usage in a page of block's ui (discrete boxplot graph in example):

<script setup lang="ts">
import { ref } from 'vue';
import { useApp } from './app';
import { GraphMakerState, GraphMaker } from '@milaboratories/graph-maker';
import '@milaboratories/graph-maker/styles';

const app = useApp();
const state = ref<GraphMakerSettings>({ 
  template: 'box',
  title: 'My graph'
});

</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
    />
</template>

Necessary properties are: chartType, graph's state (v-model) and pFrame.

chartType must be one of: 'discrete', 'scatterplot', 'scatterplot-umap', 'heatmap', 'bubble', 'histogram', 'dendro'. Chart type defines graph structure and available settings set. Once set chart type can't be changed.

State (v-model) must satisfy GraphMakerState. Necessary fields – title (goes to big editable title above the chart) and template ('box', 'violin' for discrete, 'dots', 'curve' for scatterplot' etc.) Other fields of state Graph-maker uses to save/load changes in interface. Any of them can be predefined, fully ot partially.

pFrame must be created in a model part of a block as an output. Use createPFrameForGraphs or ctx.createPFrame(columns).

Other abilities

Slots

#titleLine - slot in horizontal line with main title

#settingsSlot - if used creates additional 'Settings' tab with its content in right panel

#logSlot - if used creates additional 'Log' tab with its content in right panel

Available properties

defaultOptions

Defines default state of data-mapping tab. User changes have higher priority, default state applies only if nothing from user changes conflicts with them. To set use column/axis specs(description, types) from pFrame and names of inputs ('x', 'y', 'primaryGrouping', 'filters' etc):

const defaultOptions:PredefinedGraphOption<'discrete'> = [{
  inputName: 'y'
  selectedSource: {
    kind: 'PColumn',
    name: 'FractionOfReads',
    valueType: 'Double',
    domain: {...},
    axesSpec: [...]
  }, // AxisSpec | PColumnSpec from '@sdk/model'
}, {
  inputName: 'filters'
  selectedSource: {
    kind: 'PColumn',
    name: 'Chain',
    valueType: 'String',
    axesSpec: [...]
  },
  filterType: 'equals'
  selectedFilterValue: 'Heavy'
}, {
  inputName: 'filters'
  selectedSource: {
    kind: 'PColumn',
    name: 'FractionOfReads',
    valueType: 'Double',
    axesSpec: [...]
  },
  filterType: 'range'
  selectedFilterValue: {min: 0}
}];
</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
      :defaultOptions="defaultOptions"
    />
</template>

Every input can be mentioned more than one time.

allowChartDeleting

If true there is a button with trash bin icon on the right panel. On click it fires @delete-this-graph:

function removeSection() {
  ... // code to delete current graph from block's state
}
</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
      :allowChartDeleting="true"
      @delete-this-graph="removeSection"
    />
</template>

dataStateKey

If changes graph reapplies options state and default options. (For example, use if you need to reset data-mapping when block's data was recalculated).

dataColumnPredicate

Function which filter columns available for data-inputs ('x', 'y', 'Data source', 'Data value'...). By default it filters out columns with 'metadata' in name. To make available all the columns:

<graph-maker
  v-model="state"
  chartType="discrete"
  :pFrame="app.model.outputs.pFrame"
  :dataColumnPredicate="() => true"
/>

How to build locally:

npm install
npm run build

To link graph-maker local build to local block's build use npm run build && npm run do-pack, it creates package.tgz with local build. Then write in block's root package.json:

"pnpm": {
  "overrides": {
    "@milaboratories/graph-maker": "/path/to/graph-maker/package.tgz"
  }
}

and run pnpm install && pnpm build in block.