Tutorial: Develop a plugin coordination type

See the plugin coordination type development documentation for more details.

Minimal example

import React from 'react';
import { Slider } from '@material-ui/core';
import {
  Vitessce,
  CoordinationType,
  registerPluginViewType,
  registerPluginCoordinationType,
  TitleInfo,
  useCoordination,
} from 'vitessce';
import 'vitessce/dist/es/production/static/css/index.css';
import './index.css';

function MyPluginSlider(props) {
  const {
    myCustomCoordinationType,
    setMyCustomCoordinationType,
  } = props;

  function handleChange(event, newValue) {
    setMyCustomCoordinationType(newValue);
  }

  return (
    <div>
      <Slider
        value={myCustomCoordinationType}
        onChange={handleChange}
        min={0.0}
        max={1.0}
        step={0.005}
        aria-label="Custom coordination type slider"
      />
    </div>
  );
}

function MyPluginSliderSubscriber(props) {
  const {
    coordinationScopes,
    removeGridComponent,
    theme,
    title = 'My plugin slider',
  } = props;

  // Get "props" from the coordination space.
  const [{
    myCustomCoordinationType,
  }, {
    setMyCustomCoordinationType,
  }] = useCoordination(
    [
      CoordinationType.DATASET,
      'myCustomCoordinationType',
    ],
    coordinationScopes,
  );

  return (
    <TitleInfo
      title={title}
      theme={theme}
      removeGridComponent={removeGridComponent}
      isReady
    >
      <MyPluginSlider
        myCustomCoordinationType={myCustomCoordinationType}
        setMyCustomCoordinationType={setMyCustomCoordinationType}
      />
    </TitleInfo>
  );
}

registerPluginCoordinationType(
  'myCustomCoordinationType',
  0.75,
);

// Register the plugin view type.
registerPluginViewType(
  'myCustomSlider',
  MyPluginSliderSubscriber,
  [
    CoordinationType.DATASET,
    'myCustomCoordinationType',
  ],
);

// Use the plugin view in the configuration.
const configWithPluginCoordinationType = {
  name: 'Test plugin views and coordination types',
  version: '1.0.9',
  description: 'Demonstration of a plugin coordination type implementation. The left sliders should be coordinated, while the right sliders are independent.',
  public: true,
  datasets: [
    {
      uid: 'plugin-test-dataset',
      name: 'Plugin test dataset',
      files: [],
    },
  ],
  initStrategy: 'auto',
  coordinationSpace: {
    myCustomCoordinationType: {
      A: 0.5,
      B: 0.25,
      C: undefined,
    },
  },
  layout: [
    {
      component: 'description',
      props: {
        title: 'Description',
      },
      x: 0,
      y: 0,
      w: 2,
      h: 2,
    },
    {
      component: 'myCustomSlider',
      coordinationScopes: {
        myCustomCoordinationType: 'A',
      },
      x: 2,
      y: 0,
      w: 2,
      h: 1,
    },
    {
      component: 'myCustomSlider',
      coordinationScopes: {
        myCustomCoordinationType: 'A',
      },
      x: 2,
      y: 1,
      w: 2,
      h: 1,
    },
    {
      component: 'myCustomSlider',
      coordinationScopes: {
        myCustomCoordinationType: 'B',
      },
      x: 4,
      y: 0,
      w: 2,
      h: 1,
    },
    {
      component: 'myCustomSlider',
      x: 4,
      y: 1,
      w: 2,
      h: 1,
    },
  ],
};

export default function MyApp() {
  return (
    <Vitessce
      config={configWithPluginCoordinationType}
      height={800}
      theme="light"
    />
  );
}