1.0.0 • Published 3 months ago

vimo-sketches v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 months ago

npm version Demo doi

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

NameDescriptionType
tokenneuPrint authentication tokenString
data_serverurl of database (e.g., 'https://neuprint.janelia.org/')String
data_versionname and version of dataset (e.g., 'hemibrain:v1.2.1')String
vimo_serverurl 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.

ababacceptsacornacorn-globalsacorn-import-assertionsacorn-jsxacorn-nodeacorn-walkaddressadjust-sourcemap-loaderagent-baseajvajv-formatsajv-keywordsansi-escapesansi-html-communityansi-regexansi-stylesantdanymatchargargparsearia-queryarray-flattenarray-includesarray-tree-filterarray-unionarray.prototype.flatarray.prototype.flatmaparray.prototype.reducearray.prototype.tosortedasapast-types-flowasyncasync-validatorasynckitat-least-nodeautoprefixeravailable-typed-arraysaxe-coreaxiosaxobject-querybabel-jestbabel-loaderbabel-plugin-istanbulbabel-plugin-jest-hoistbabel-plugin-macrosbabel-plugin-named-asset-importbabel-plugin-polyfill-corejs2babel-plugin-polyfill-corejs3babel-plugin-polyfill-regeneratorbabel-plugin-transform-react-remove-prop-typesbabel-preset-current-node-syntaxbabel-preset-jestbabel-preset-react-appbalanced-matchbatchbfjbig.jsbinary-extensionsbluebirdbody-parserbonjour-serviceboolbasebootstrapbrace-expansionbracesbrowser-process-hrtimebrowserslistbserbuffer-frombuiltin-modulesbytescall-bindcallsitescamel-casecamelcasecamelcase-csscaniuse-apicaniuse-litecase-sensitive-paths-webpack-pluginchalkchar-regexcheck-typeschokidarchrome-trace-eventci-infocjs-module-lexerclassnamesclean-csscliuicloneclsxcocoacollect-v8-coveragecolor-convertcolor-namecolordcolorettecombined-streamcommandercommon-path-prefixcommon-tagscommondircompressiblecompressioncompute-scroll-into-viewconcat-mapconfusing-browser-globalsconnect-history-api-fallbackcontent-dispositioncontent-typeconvert-source-mapcookiecookie-signaturecopy-to-clipboardcore-jscore-js-compatcore-js-purecore-util-iscosmiconfigcross-spawncrypto-random-stringcss-blank-pseudocss-declaration-sortercss-has-pseudocss-loadercss-minimizer-webpack-plugincss-prefers-color-schemecss-selectcss-select-base-adaptercss-treecss-vendorcss-whatcssdbcssesccssnanocssnano-preset-defaultcssnano-utilscssocssomcssstylecsstypedamerau-levenshteindata-urlsdate-fnsdayjsdebugdecimal.jsdedentdeep-equaldeep-isdeepmergedefault-gatewaydefine-lazy-propdefine-propertiesdefineddelayed-streamdepddestroydetect-newlinedetect-nodedetect-port-altdetectivedidyoumeandiff-sequencesdir-globdlvdns-equaldns-packetdoctrinedom-aligndom-converterdom-helpersdom-serializerdomelementtypedomexceptiondomhandlerdomutilsdot-casedotenvdotenv-expandduplexeree-firstejselectron-to-chromiumemitteryemoji-regexemojis-listencodeurlenhanced-resolveentitieserror-exerror-stack-parseres-abstractes-array-method-boxes-properlyes-get-iteratores-module-lexeres-set-tostringtages-shim-unscopableses-to-primitiveescaladeescape-htmlescape-string-regexpescodegeneslinteslint-config-react-appeslint-import-resolver-nodeeslint-module-utilseslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jesteslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-testing-libraryeslint-scopeeslint-utilseslint-visitor-keyseslint-webpack-pluginespreeesprimaesqueryesrecurseestraverseestree-walkeresutilsetageventemitter3eventsexecaexitexpectexpressfast-deep-equalfast-globfast-json-stable-stringifyfast-levenshteinfastqfaye-websocketfb-watchmanfile-entry-cachefile-loaderfilelistfilesizefill-rangefinalhandlerfind-cache-dirfind-rootfind-upflat-cacheflattedfollow-redirectsfor-eachfork-ts-checker-webpack-pluginform-dataforwardedfraction.jsfreshfs-extrafs-monkeyfs-readdir-recursivefs.realpathfseventsfunction-bindfunction.prototype.namefunctions-have-namesgensyncget-caller-fileget-intrinsicget-own-enumerable-property-symbolsget-package-typeget-streamget-symbol-descriptionglobglob-parentglob-to-regexpglobal-modulesglobal-prefixglobalsglobalthisglobbygopdgraceful-fsgrapheme-splittergzip-sizehandle-thingharmony-reflecthashas-bigintshas-flaghas-property-descriptorshas-protohas-symbolshas-tostringtaghehoist-non-react-staticshoopyhpack.jshtml-encoding-snifferhtml-entitieshtml-escaperhtml-minifier-terserhtml-webpack-pluginhtmlparser2http-deceiverhttp-errorshttp-parser-jshttp-proxyhttp-proxy-agenthttp-proxy-middlewarehttps-proxy-agenthuman-signalshyphenate-style-nameiconv-liteicss-utilsidbidentity-obj-proxyignoreimmerimmutableimport-freshimport-localimurmurhashinflightinheritsiniinternal-slotipaddr.jsis-argumentsis-array-bufferis-arrayishis-bigintis-binary-pathis-boolean-objectis-callableis-core-moduleis-date-objectis-dockeris-extglobis-fullwidth-code-pointis-generator-fnis-globis-in-browseris-mapis-moduleis-negative-zerois-numberis-number-objectis-objis-path-insideis-plain-objis-potential-custom-element-nameis-regexis-regexpis-rootis-setis-shared-array-bufferis-streamis-stringis-symbolis-typed-arrayis-typedarrayis-weakmapis-weakrefis-weaksetis-wslisarrayisexeistanbul-lib-coverageistanbul-lib-instrumentistanbul-lib-reportistanbul-lib-source-mapsistanbul-reportsjakejestjest-changed-filesjest-circusjest-clijest-configjest-diffjest-docblockjest-eachjest-environment-jsdomjest-environment-nodejest-get-typejest-haste-mapjest-jasmine2jest-leak-detectorjest-matcher-utilsjest-message-utiljest-mockjest-pnp-resolverjest-regex-utiljest-resolvejest-resolve-dependenciesjest-runnerjest-runtimejest-serializerjest-snapshotjest-utiljest-validatejest-watch-typeaheadjest-watcherjest-workerjs-sdsljs-tokensjs-yamljsdomjsescjson-parse-even-better-errorsjson-schemajson-schema-traversejson-stable-stringify-without-jsonifyjson2mqjson5jsonfilejsonpointerjssjss-plugin-camel-casejss-plugin-default-unitjss-plugin-globaljss-plugin-nestedjss-plugin-props-sortjss-plugin-rule-value-functionjss-plugin-vendor-prefixerjsx-ast-utilskind-ofkleurklonalanguage-subtag-registrylanguage-tagslevenlevnlilconfiglines-and-columnsloader-runnerloader-utilslocate-pathlodashlodash.debouncelodash.memoizelodash.mergelodash.sortbylodash.uniqloose-envifylower-caselru-cachemagic-stringmake-dirmakeerrormaterial-ui-confirmmdn-datamedia-typermemfsmerge-descriptorsmerge-streammerge2methodsmicromatchmimemime-dbmime-typesmimic-fnmini-css-extract-pluginminimalistic-assertminimatchminimistmkdirpmomentmsmulticast-dnsnanoidnatural-comparenatural-compare-litenegotiatorneo-asyncno-casenode-forgenode-int64node-releasesnormalize-pathnormalize-rangenormalize-urlnpm-run-pathnth-checknwsapiobject-assignobject-hashobject-inspectobject-isobject-keysobject.assignobject.entriesobject.fromentriesobject.getownpropertydescriptorsobject.hasownobject.valuesobufon-finishedon-headersonceonetimeopenoptionatorp-limitp-locatep-retryp-trypaperparam-caseparent-moduleparse-jsonparse5parseurlpascal-casepath-existspath-is-absolutepath-keypath-parsepath-to-regexppath-typeperformance-nowpicocolorspicomatchpifypiratespkg-dirpkg-uppopper.jspostcsspostcss-attribute-case-insensitivepostcss-browser-commentspostcss-calcpostcss-clamppostcss-color-functional-notationpostcss-color-hex-alphapostcss-color-rebeccapurplepostcss-colorminpostcss-convert-valuespostcss-custom-mediapostcss-custom-propertiespostcss-custom-selectorspostcss-dir-pseudo-classpostcss-discard-commentspostcss-discard-duplicatespostcss-discard-emptypostcss-discard-overriddenpostcss-double-position-gradientspostcss-env-functionpostcss-flexbugs-fixespostcss-focus-visiblepostcss-focus-withinpostcss-font-variantpostcss-gap-propertiespostcss-image-set-functionpostcss-importpostcss-initialpostcss-jspostcss-lab-functionpostcss-load-configpostcss-loaderpostcss-logicalpostcss-media-minmaxpostcss-merge-longhandpostcss-merge-rulespostcss-minify-font-valuespostcss-minify-gradientspostcss-minify-paramspostcss-minify-selectorspostcss-modules-extract-importspostcss-modules-local-by-defaultpostcss-modules-scopepostcss-modules-valuespostcss-nestedpostcss-nestingpostcss-normalizepostcss-normalize-charsetpostcss-normalize-display-valuespostcss-normalize-positionspostcss-normalize-repeat-stylepostcss-normalize-stringpostcss-normalize-timing-functionspostcss-normalize-unicodepostcss-normalize-urlpostcss-normalize-whitespacepostcss-opacity-percentagepostcss-ordered-valuespostcss-overflow-shorthandpostcss-page-breakpostcss-placepostcss-preset-envpostcss-pseudo-class-any-linkpostcss-reduce-initialpostcss-reduce-transformspostcss-replace-overflow-wrappostcss-selector-notpostcss-selector-parserpostcss-svgopostcss-unique-selectorspostcss-value-parserprelude-lsprettierpretty-bytespretty-errorpretty-formatprocess-nextick-argspromisepromptsprop-typesproxy-addrpslpunycodeqqsquerystringifyqueue-microtaskquick-lrurafrandombytesrange-parserraw-bodyrc-alignrc-cascaderrc-checkboxrc-collapserc-dialogrc-drawerrc-dropdownrc-field-formrc-imagerc-inputrc-input-numberrc-mentionsrc-menurc-motionrc-notificationrc-overflowrc-paginationrc-pickerrc-progressrc-raterc-resize-observerrc-segmentedrc-selectrc-sliderrc-stepsrc-switchrc-tablerc-tabsrc-textarearc-tooltiprc-treerc-tree-selectrc-triggerrc-uploadrc-utilrc-virtual-listreactreact-app-polyfillreact-awesome-query-builderreact-dev-utilsreact-domreact-error-overlayreact-fast-comparereact-isreact-popperreact-reduxreact-refreshreact-scriptsreact-transition-groupreactstrapread-cachereadable-streamreaddirprecursive-readdirreduxregenerateregenerate-unicode-propertiesregenerator-runtimeregenerator-transformregex-parserregexp.prototype.flagsregexppregexpu-coreregjsgenregjsparserrelateurlrenderkidrequire-directoryrequire-from-stringrequires-portresize-observer-polyfillresolveresolve-cwdresolve-fromresolve-url-loaderresolve.exportsretryreusifyrifmrimrafrolluprollup-plugin-terserrun-parallelsafe-buffersafe-regex-testsafer-buffersanitize.csssass-loadersaxsaxesschedulerschema-utilsscroll-into-view-if-neededselect-hoseselfsignedsemversendserialize-javascriptserve-indexserve-staticsetprototypeofshallowequalshebang-commandshebang-regexshell-quoteside-channelsignal-exitsisteransislashsockjssource-list-mapsource-mapsource-map-jssource-map-loadersource-map-supportsourcemap-codecspdyspdy-transportspel2jssprintf-jssqlstringstablestack-utilsstackframestatusesstop-iteration-iteratorstring-convertstring-lengthstring-natural-comparestring-widthstring.prototype.matchallstring.prototype.trimendstring.prototype.trimstartstring_decoderstringify-objectstrip-ansistrip-bomstrip-commentsstrip-final-newlinestrip-json-commentsstyle-loaderstylehacksstylissupports-colorsupports-hyperlinkssupports-preserve-symlinks-flagsvg-parsersvgosymbol-treetailwindcsstapabletemp-dirtempyterminal-linkterserterser-webpack-plugintest-excludetext-tablethroatthunkytiny-warningtmplto-fast-propertiesto-regex-rangetoggle-selectiontoidentifiertough-cookietr46tryertsconfig-pathstslibtsutilstype-checktype-detecttype-festtype-istyped-array-lengthtypedarray-to-buffertypescriptunbox-primitiveunicode-canonical-property-names-ecmascriptunicode-match-property-ecmascriptunicode-match-property-value-ecmascriptunicode-property-aliases-ecmascriptunique-stringuniversalifyunpipeunquoteupathupdate-browserslist-dburi-jsurl-parseutil-deprecateutil.promisifyutilautils-mergeuuidv8-to-istanbulvaryw3c-hr-timew3c-xmlserializerwalkerwarningwatchpackwbufweb-vitalswebidl-conversionswebpackwebpack-dev-middlewarewebpack-dev-serverwebpack-manifest-pluginwebpack-sourceswebsocket-driverwebsocket-extensionswhatwg-encodingwhatwg-fetchwhatwg-mimetypewhatwg-urlwhichwhich-boxed-primitivewhich-collectionwhich-typed-arrayword-wrapworkbox-background-syncworkbox-broadcast-updateworkbox-buildworkbox-cacheable-responseworkbox-coreworkbox-expirationworkbox-google-analyticsworkbox-navigation-preloadworkbox-precachingworkbox-range-requestsworkbox-recipesworkbox-routingworkbox-strategiesworkbox-streamsworkbox-swworkbox-webpack-pluginworkbox-windowwrap-ansiwrappywrite-file-atomicwsxml-name-validatorxmlcharsxtendy18nyallistyamlyargsyargs-parseryocto-queue
1.0.0

3 months ago

0.1.0

2 years ago