Skip to content

Latest commit

 

History

History
71 lines (49 loc) · 2.47 KB

README.md

File metadata and controls

71 lines (49 loc) · 2.47 KB

MPCSL UI

CircleCI

Getting started

Requirements

Module Installation

yarn

Start Development Server (with hot reloading)

yarn start

Will start a development server on localhost:3000 if available. API requests will be proxied to localhost:5000.

Run Tests

yarn test

Run Linter

yarn lint

Create a Production Build

yarn build

Project Structure and Implementation Notes

  • src/components: React components, nested to represent their usage.
    • /GraphExplorer: D3 rendering of force graph layout and UI to modify the rendering.
    • /ObservationMatrixView: Card list view of available datasets.
    • /ExperimentsView: Card list view of available experiments for a dataset.
    • /ExperimentsDetails: Experiment details and job list for an experiment.
    • /ExperimentsComparison: Comparison view for experiments.
    • /Header: Different headers for views.
  • src/restAPI:
    • apiEndpoints.ts: Backend endpoints are defined here.
    • apiRequests.ts: API request functions and caching mechanisms are defined here.
  • src/types:
    • graphTypes.ts: Holding types for two different graphs:
      • API Graph: The graph structure that is returned by the API.
      • ID3Graph: The graph structure that is used by D3.
    • types.ts: Types used across the project.
  • src/errorHandling:
    • errorHandler.ts: Listener for backend error messages.
  • src/graph:
    • graph.ts: The graph (inherits from ID3Graph) which consists of the following logic:
      • Handles conversions from API Graph to ID3Graph (marked with api).
      • Add unique edges and nodes to context and focus.
      • Deletion of nodes from focus.
      • Holds graph data for d3 rendering
      • Emits graph changes to components
      • Singleton instance

Additional Notes

Linter

This project uses eslint. Please consider the use of a linter extension in your IDE. (e.g. Visual Studio Code ESLint)

The configuration is placed in .eslintrc.json.

Consider to use a formatting extensions like Prettier to format the files automatically.