Vimo Sketches

React component for interactively sketching & searching for network motifs.

Examples

• Motif analysis in Neuprint. Access here
• Motif Analysis in Vimo. Access here

Requirements

• npm (8.1.0 or later)
• "@testing-library/react": "^12.1.3
• "react": "^17.0.2"
• "react-dom": "^17.0.2"

Install Package

npm install @vimo-public/vimo-sketches

Getting Started

Basic Example

import {Sketch} from "@vimo-public/vimo-sketches";
import {useState} from "react";

function App() {
    const [attributes, setAttributes] = useState({
      displayMotifCount: false,
    });

    const processRequest = async (motifJson, lim) => {
        console.log("This function is called upon clicking the search button.");
    };
    return (
        <div>
            <Sketch processRequest={processRequest} attributes={attributes} />
        </div>
    );
}
export default App;

Node & Edge Attributes

If you want to add attributes to nodes or edges, please refer react-awesome-query-builder config fields. Also here's an example

import {Sketch} from "@vimo-public/vimo-sketches";

function App() {

    const attributes = {
        NodeFields: {
            node_attr_1: {
                label: "attr1_name",
                type: "text",
            },
            node_attr_2: {
                label: "attr2_name",
                type: "select",
                fieldSettings: {
                    showSearch: true,
                    listValues: [
                        "alpha",
                        "betha",
                        "theta",
                    ],
                },
                valueSources: ["value"],
                operators: ["select_equals", "select_not_equals"],
            },
        },
        EdgeFields: {
            edge_attr_1: {
                label: "attr1_name",
                type: "number",
                fieldSettings: {
                    min: 0,
                },
                valueSources: ["value"],
                preferWidgets: ["number"],
            },
            edge_attr_2: {
                label: "attr2_name",
                type: "number",
                operators: ["greater", "less", "equal"],
                valueSources: ["value"],
            },
        },
    }
    const processRequest = async (motifJson, lim) => {
        // this function is called when the user clicks the "Search" button
        console.log(motifJson);
        console.log(lim);
    };
    return (
        <div>
            <Sketch processRequest={processRequest} attributes={attributes}/>
        </div>
    );
}

export default App;

Searching Motifs in NeuPrint

We provide a direct interface to sketch & search for networks motifs in large connectome data sets hosted on Neuprint. Here's an example of how to use it.

import React, { useEffect, useState } from "react";
import {Sketch, NeuprintExecutor} from '@vimo-public/vimo-sketches';

function App() {
  const token = "ADD YOUR TOKEN HERE"; // copy token from here https://neuprint.janelia.org/account
  const data_server = "https://neuprint.janelia.org/";
  const data_version = "hemibrain:v1.2.1";
  const vimo_server = "http://127.0.0.1:4242"; // setup instructions https://github.com/VCG/vimo-server
  const ne = new NeuprintExecutor(
    data_server,
    data_version,
    token,
    vimo_server
  );

  const processRequest = async (motifJson, lim) => {
    const query = await ne.json2cypher(motifJson, lim);
    console.log(query);
    return query;
  };

  const [isQuerying, setIsQuerying] = useState(false);
  
  const [attributes, setAttributes] = useState({
      displayMotifCount: false,
      getMotifCount: ne.getMotifCount,
      getRelativeMotifCount: ne.getRelativeMotifCount,
      isQuerying: isQuerying,
  });
  
  useEffect(async () => {
    setAttributes({
      ...attributes,
      NodeFields: await ne.getNodeFields(),
      EdgeFields: await ne.getEdgeFields(),
    });
  }, []);

  return (
    <div>
      <Sketch processRequest={processRequest} attributes={attributes} />
    </div>
  );
}

export default App;

Sketch Component Props

• Token can be found in here.

NeuprintExecutor Parameters

| Name | Description | Type | |-----------------------|---------------------------------------------------------|----------| | token | neuPrint authentication token | String | | data_server | url of database (e.g., 'https://neuprint.janelia.org/') | String | | data_version | name and version of dataset (e.g., 'hemibrain:v1.2.1') | String | | vimo_server | url of vimo_server (e.g., 'http://localhost:4242') | String |

Output

This component turns motif sketch into JSON. This is an example of the JSON. This JSON can be converted to a Cypher query using the json2cypher method of the NeuprintExecutor class.

{
    nodes: [
      {
        label: "A",
        properties: null,
        index: 0,
        position: ["Point", 149.70313, 66.80469],
      },
      {
        label: "B",
        properties: null,
        index: 1,
        position: ["Point", 84.70313, 173.80469],
      },
      {
        label: "C",
        properties: null,
        index: 2,
        position: ["Point", 232.70313, 165.80469],
      },
    ],
    edges: [
      {
        label: "A -> B",
        properties: null,
        index: 0,
        indices: [0, 1],
        tree: null,
      },
      {
        label: "B -> C",
        properties: null,
        index: 1,
        indices: [1, 2],
        tree: null,
      },
      {
        label: "C -> A",
        properties: null,
        index: 2,
        indices: [2, 0],
        tree: null,
      },
    ],
    dimension: { width: 639.3984375, height: 232.796875 },
};

Citing

If you find our work helpful, please consider citing it.

@article {troidl2023vimo,
	author = {Troidl, Jakob and Warchol, Simon and Choi, Jinhan and Matelsky, Jordan
    	and Dhanysai, Nagaraju and Wang, Xueying and Wester, Brock and Wei, Donglai
    	and Lichtman, Jeff W and Pfister, Hanspeter and Beyer, Johanna},
	title = {Vimo: Visual Analysis of Neuronal Connectivity Motifs},
	year = {2023},
	doi = {10.1101/2022.12.09.519772},
	publisher = {IEEE},
	URL = {https://www.biorxiv.org/content/10.1101/2022.12.09.519772v2},
	journal = {IEEE Transactions on Visualization and Computer Graphics (IEEE VIS) (to appear)}
}

We gratefully acknowledge the support from NSF award number IIS-2124179.