This project is currently in development. Users can submit queries to the services that power the NCATS Biomedical Data Translator using one of the following templates:
- What drugs may impact _____ (disease)
- What chemicals upregulate _____ (gene)
- What chemicals downregulate _____ (gene)
- What gene is upregulated by _____ (chemical)
- What gene is downregulated by _____ (chemical)
Or search for connections between two concepts using a Pathfinder Query.
Results can be filtered and sorted according to several different criteria, such as filtering by FDA Approval or sorting by evidence count. Each result consists of a graph and a list of paths, which are a discrete series of connected nodes and edges leading from the result item (e.g. a drug) to the object of the query (e.g. a disease). Selecting a node in the graph view highlights in the path view all paths that pass through any selected node(s), while deemphasizing the rest.
Logged-in users can organize work with Projects, drag queries from the sidebar into projects, and manage query history from a dedicated page. A collapsible Sidebar provides contextual panels for filters, project management, query status, result downloads, settings, help, and feedback. Result detail pages support nested views for individual nodes, paths, and relationship evidence.
- Frontend Framework: React 19 with TypeScript
- Build Tool: Vite
- State Management: Redux Toolkit with React Redux (user session and UI state); TanStack React Query for server state
- Routing: React Router DOM v7 with nested routes, loaders, and breadcrumbs
- Styling: Sass modules
- Graph Visualization: translator-graph-view (React Flow + ELK layout engine)
- Drag and Drop: @dnd-kit
- Rich Text Editing: Lexical
- Testing: Vitest with React Testing Library; Playwright for end-to-end tests
- Component Development: Storybook
- UI Components: Custom Core component library with React Toastify, React Tooltip, React Range, and React Select
- Data Handling: TanStack React Query, React CSV for exports
The project follows a feature-based architecture. Each feature under src/features/ owns its components, hooks, types, and utilities. Page-level route components live in src/pageRoutes/.
Foundation layer used across the app. Includes reusable components (Accordion, Alert, Autocomplete, Button, Checkbox, Modal, Select, Tabs, TextEditor, TextInput, Toggle, Tooltip, and others), shared hooks (analytics, window size, scroll-to-hash, feedback form), and utility modules (class helpers, date/string formatters, sorting, URL helpers).
Query submission and input: CombinedQueryInterface (preset and Pathfinder tabs), AutocompleteInput, ExampleQueryList, QueryBar, QueryPathfinder, and query type selection components.
Reusable query list component used in history and sidebar contexts.
Interactive graph powered by translator-graph-view, with layout controls and hover tooltips.
Result cards, path and graph views, bookmarks, notes, predicates, and result detail layouts.
Results table, pagination, sticky toolbar, sharing, summary modals, and loading states.
Facet groups, entity search, filter tags, and the main results filter interface.
Sidebar panel for downloading result data as CSV.
Evidence views with tabbed tables for publications, clinical trials, and knowledge sources, plus pagination and path-context sections.
Detail view for individual nodes within a result, including clinical trial annotations.
Create and manage projects, organize queries with drag-and-drop, edit query metadata, and handle project-level modals and error states.
Collapsible sidebar with link navigation and contextual panels: Queries, Projects, Filters, Query Status, Result Download, Settings, Help, and Feedback.
Reusable DraggableCard and DroppableArea components built on @dnd-kit, used for dragging queries into projects.
Breadcrumb labels, path redirects, view transitions, and route loader utilities.
Header, Footer, Page and HelpPage wrappers, HelpSidebar, and SendFeedbackForm.
Login warnings, user session state (Redux slice), and user preference API utilities.
src/pageRoutes/: Page-level components organized by route (Home, Results, Projects, Query History, New Query, help articles, and others)src/redux/: Redux store configuration, listener middleware, and selectorssrc/assets/: Static assets including icons, images, and global stylessrc/test/: Vitest setup and shared test utilitiese2e/: Playwright end-to-end testssrc/stories/: Storybook stories for Core components
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
- Run
npm installinside the root directory of this repo. - Copy the ELK layout web worker into the public directory:
cp node_modules/elkjs/lib/elk-worker.min.js public/elk-worker.min.js
In order to submit queries you'll need a copy of the UI's backend running locally as well. You can find it here. Clone it, then run npm install inside its root directory. You can then run npm run prod or npm run dev depending on your preferred environment.
The last step will be running the following command in the root directory of the ui-fe repo: npm run build && cp -R /Path/To/Your/ui-fe/build /Path/To/Your/ui-be. This will build the frontend, then copy it to the backend repo's root. You should then be able to view the application at localhost:8386.
The full feature set will not be accessible without a full docker setup in order to serve the database, which is required to facilitate user login and arbitrary query submission.
For local frontend-only development, run npm start to launch the Vite dev server.
npm start— Start development server with Vitenpm run build— Type-check and build for productionnpm run serve— Preview production buildnpm run analyze— Analyze bundle sizenpm test— Run unit tests with Vitestnpm run test:watch— Run Vitest in watch modenpm run test:coverage— Run Vitest with coveragenpm run test:e2e— Run Playwright end-to-end testsnpm run test:e2e:ui— Run Playwright tests with UInpm run storybook— Start Storybook component dev servernpm run build-storybook— Build Storybook for deploymentnpm run check-import-casing— Verify import path casing consistency
