Skip to content

biothings/bte_schema_web_react

Repository files navigation

BioThings Explorer

Introduction

This is the development repo for the web service of BioThings Explorer. This tool aims at helping users querying and linking results from a variety of biomedical relevant APIs through one interface. The project is funded by the NCATS Translator project.

Revelant Concepts

  1. BioLink Model

    The BioLink Model defines a high level datamodel of biological entities (genes, diseases, phenotypes, pathways, individuals, substances, etc) and their associations. BioThings Explorer restructures outputs from different APIs into the data model defined by BioLink, so that they can be easily connected and queried.

  2. SmartAPI

    SmartAPI aims to maximize the FAIRness (Findability, Accessibility, Interoperability, and Reusability) of web-based Application Programming Interfaces (APIs). Rich metadata is essential to properly describe your API so that it becomes discoverable, connected, and reusable. BioThings Explorer takes advantage of the rich metadata information described in SmartAPI and create a meta knowledge graph, allowing BioThings Explorer to autonomously query a distributed knowledge graph. The distributed knowledge graph is made up of biomedical APIs that have been annotated with semantically-precise descriptions of their inputs and outputs.

Current Integrated APIs

How to use the BioThings Explorer

Jupyter notebook demo is located at this folder.

Some real world use cases of BioThings Explorer.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:8855 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.

Folder structure

  • Root:
    • package.json
    • README.md
    • src folder (main folder storing code)
      • assets folder (store all static images)
      • components folder (store React components)
        • advanced folder (store components for /advanced path)
          • graph folder (store components for query builder)
            • AdvancedQueryGraphComponent.js (main component for query builder)
            • BiomedicalIDDropdown.js (component for autocompleting and selecting biothings)
            • GraphModeSwitcher (component for keeping track of graph mode)
          • table folder (store components for bte results display)
            • ResultsTableComponent.js (main table component)
            • ResultsTableDisplayComponent.js (component that handles displaying table)
            • ResultsTableCellComponent.js (table cell component)
            • ResultsTableFilterComponent.js (contains table filter)
            • ResultsTableSortComponent.js (contains table sort)
          • AdvancedQueryComponent.js (main component for /advanced path)
          • AdvancedQueryConfig.js (config file for advanced component)
        • explain folder (store components for /explain path)
          • metapath folder (store components for metapath display)
            • DrawMetaPath.js (drawing meta path using D3 library)
            • DrawMetaPathLabels.js (draw labels on metapath)
            • DrawMetaPathFormComponent (component for meta path form)
          • AccordionComponent.js (displays the explain examples)
          • CytoscapeGraphComponent.js (for cytoscape visualization of query results)
          • DimmerComponent.js (display when BTE is querying results)
          • DisplayErrorComponent.js (display error message)
          • StepsComponent.js (construct bte steps)
          • InputSelectComponent.js (for selecting multiple biothings)
          • ExplainComponent.js (main file for explain, store all states related to explain)
          • ExplainInputComponent.js (retrieving input for Explain query from user)
          • ExplainQueryResultComponent.js (display query results for Explain)
        • Breadcrumb.js (breadcrumb display for each path)
        • Footer.js (footer related display)
        • Header.js (header related display)
        • Home.js (entry point of BTE)
        • Main.js (define routes for BTE)
    • shared folder (some shared utils functions for BTE)
      • cytoscapeInit.js (makes sure cytoscape plugins aree only initialized once)
      • metaKG.js (lazy loads meta_kg)
      • semanticTypes.js (list all semantic types for BTE and their shorthands representation)
      • utils.js (some utils functions commonly used by other components)

Deploy

A docker file is included in the base directory and can be used to build the customized container

docker build -t bte_web .

# or add --squash if docker engine supports
docker build -t bte_web . --squash

Container can be built and started using docker-compose

docker-compose up

Public Docker image located at link

When it's ready, tag local image and push to the docker hub:

docker tag 44a82f18983e biothings/bte_web:latest
docker push biothings/bte_web:latest

To use the latest image from docker hub (e.g. deploy it at the production server):

docker pull biothings/bte_web:latest
docker run --rm --name bte_web -p 8853:8853 -d biothings/bte_web:latest

Usage

http://<HOST>:8853/explorer