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.
- Project-based Workflow
- Power Bar
- Additional Query Types
- Additional Facets
- Graph View Improvements
- Typescript Conversion
- Knowledge Type (Inferred vs Asserted) Edges Display Overhaul
- Facet Exclusion
- Evidence Modal Redesign
- Bookmark & Add Notes To Results
- User Workspace
- User Preferences
- User Login (SSO)
- Migration to Vite from CRA
- Results CSV Export
- Query Submission Redesign
- Graph View
- Path View
- Search Term Autocomplete
- Search History
- Sharable Link Generation
- FAQs Page
- Feedback Form -> GH Issue
- Frontend Framework: React 18.2 with TypeScript
- Build Tool: Vite
- State Management: Redux Toolkit with React Redux
- Routing: React Router DOM
- Styling: Sass modules
- Graph Visualization: Cytoscape.js with multiple layout extensions
- Rich Text Editing: Lexical
- Testing: Cypress for E2E testing, React Testing Library
- UI Components: Custom component library with React Toastify, React Tooltip, React Range
- Data Handling: React Query, React CSV for exports
The project follows a feature-based architecture organized into the following main areas:
- Accordion: Toggle visibility of child content with animation
- Alert: Contextual alerts with auto-dismiss and fading effects
- Autocomplete: Dynamic search suggestions with pagination
- Button: Reusable button components with various styles
- Checkbox/Radio: Form input components
- LoadingBar/LoadingIcon/LoadingWrapper: Loading state components
- Modal: Modal system with various specialized modals (Disclaimer, SendFeedback, NavConfirmation)
- Select: Dropdown selection component
- TextCrossfade: Cycling text with crossfade effects
- TextEditor: Rich text editor powered by Lexical
- TextInput: Text input component
- Toggle: Toggle switch component
- Tooltip: Customized tooltip component
- AutocompleteInput: Enhanced autocomplete for query terms
- CombinedQueryInterface: Main query interface component
- ExampleQueryList: Predefined example queries
- Query: Core query submission logic
- QueryBar: Search bar with autocomplete
- QueryInputView: Query input display
- QueryPathfinder: Query path visualization
- QueryResultsHeader: Results header information
- QueryResultsView: Results display view
- QuerySelect: Query type selection
- QueryTypeIcon: Icons for different query types
- BookmarkConfirmationModal: Bookmark confirmation dialog
- BookmarkToasts: Toast notifications for bookmark actions
- GraphLayoutButtons: Graph layout control buttons
- GraphView: Cytoscape graph visualization
- LastViewedTag: Tag for recently viewed items
- NotesModal: Notes editing modal
- PathObject: Individual path node/edge display
- PathView: Path list visualization
- Predicate: Predicate information display
- ResultItem: Main result item container
- ResultItemInteractables: Interactive elements for results
- ResultItemName: Result name display
- SupportPath: Support path visualization
- SupportPathGroup: Grouped support paths
- ResultFocusModal: Focus modal for results
- ResultList: Main results list component
- ResultListHeader: Results list header
- ResultListLoadingBar: Loading progress bar
- ResultListLoadingButton: Loading state button
- ResultListBottomPagination: Pagination controls
- ResultListTableHead: Table header component
- ResultsSummaryButton: Results summary button
- ResultsSummaryModal: Results summary modal
- ShareModal: Results sharing modal
- StickyToolbar: Sticky toolbar with actions
- EntitySearch: Entity search functionality
- FacetGroup: Grouped facet filters
- FacetHeading: Facet section headers
- FacetTag: Individual facet tags
- ResultsFilter: Main filtering interface
- SelectedFilterTag: Selected filter display
- EvidenceModal: Evidence information modal
- EvidenceTables: Evidence data tables
- QueryHistoryList: Historical query management
- FAQSidebar: FAQ navigation sidebar
- Footer: Site footer
- Header: Site header
- Page: Page template wrapper
- SendFeedbackForm: Feedback submission form
- LoginWarning: Login requirement warnings
- UserPreferences: User preference management
- UserSave: Individual saved result
- UserSaves: User's saved results management
src/pageRoutes/: Page-level components organized by routesrc/redux/: Redux store configuration and middlewaresrc/assets/: Static assets including icons, images, and stylessrc/testing/: Test files and testing utilities
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.
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.
npm start- Start development server with Vitenpm run build- Build for productionnpm run serve- Preview production buildnpm run analyze- Analyze bundle size
