React component for interactively sketching & searching for network motifs.
- npm (8.1.0 or later)
"@testing-library/react": "^12.1.3"react": "^17.0.2""react-dom": "^17.0.2"
npm install @vimo-public/vimo-sketchesimport {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;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;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;| Name | Sub-field | Description | Type |
|---|---|---|---|
| processRequest(query) | N/A | callback function for search button | Function |
| attributes | isQuerying | enable/disable search button | Boolean |
| NodeFields | constraint fields for node | Object | |
| EdgeFields | constraint fields for edge | Object | |
| getMotifCount | get count of motif in network | Function | |
| getRelativeMotifCount | get relative count of motif in network | Function | |
| buttonText | text on button, default is "Search" | String | |
| nodeColors | color set for nodes in sketch, default is ["#9400D3", "#DAA520", "#97d0b5", "#76acf3", "#FF6347", "#4C56B3", "#D9C226", "#263DD9",] | Array |
- Token can be found in here.
| 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 |
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 },
};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.