Tutorial: Develop a plugin view type

See the view type implementation and plugin view type development documentation for more details.

Minimal example

import React from 'react';
import {
  Vitessce,
  CoordinationType,
  registerPluginViewType,
  TitleInfo,
  useCoordination,
} from 'vitessce';
import 'vitessce/dist/es/production/static/css/index.css';
import './index.css';

function MyCustomZoomController(props) {
  const {
    spatialZoom,
    setSpatialZoom,
  } = props;

  function handleClick() {
    setSpatialZoom(-10 + Math.random() * 10);
  }
  return (
    <div>
      <p>Zoom level: <b>{spatialZoom}</b></p>
      <p>
        <button onClick={handleClick}>Try a random zoom level</button>
      </p>
    </div>
  );
}

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

  // Get "props" from the coordination space.
  const [{
    spatialZoom,
  }, {
    setSpatialZoom,
  }] = useCoordination(
    [
      CoordinationType.DATASET,
      CoordinationType.SPATIAL_ZOOM,
    ],
    coordinationScopes,
  );

  return (
    <TitleInfo
      title={title}
      theme={theme}
      removeGridComponent={removeGridComponent}
      isReady
    >
      <MyCustomZoomController
        spatialZoom={spatialZoom}
        setSpatialZoom={setSpatialZoom}
      />
    </TitleInfo>
  );
}

// Register the plugin view type.
registerPluginViewType(
  'myCustomZoomController',
  MyCustomZoomControllerSubscriber,
  [
    CoordinationType.DATASET,
    CoordinationType.SPATIAL_ZOOM,
  ],
);

// Use the plugin view in the configuration.
const configWithPluginViewType = {
  name: 'Test plugin view types',
  version: '1.0.9',
  description: 'Demonstration of a basic plugin view implementation.',
  public: true,
  datasets: [
    {
      uid: 'plugin-test-dataset',
      name: 'Plugin test dataset',
      files: [
        {
          type: 'raster',
          fileType: 'raster.json',
          url: 'https://s3.amazonaws.com/vitessce-data/0.0.31/master_release/spraggins/spraggins.raster.json',
        },
      ],
    },
  ],
  initStrategy: 'auto',
  coordinationSpace: {
    spatialZoom: {
      A: -6.5,
    },
  },
  layout: [
    {
      component: 'description',
      props: {
        title: 'Description',
      },
      x: 10,
      y: 0,
      w: 2,
      h: 2,
    },
    {
      component: 'spatial',
      coordinationScopes: {
        spatialZoom: 'A',
      },
      x: 2,
      y: 0,
      w: 8,
      h: 2,
    },
    {
      component: 'myCustomZoomController',
      coordinationScopes: {
        spatialZoom: 'A',
      },
      x: 0,
      y: 0,
      w: 2,
      h: 2,
    },
  ],
};

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