Skip to content

Latest commit

 

History

History
117 lines (91 loc) · 6.36 KB

README.md

File metadata and controls

117 lines (91 loc) · 6.36 KB
Raw

MoTrPAC Data Hub

User interface and Frontend for MoTrPAC Bioinformatics Center

CircleCI Sauce Test Status

Directory Layout and Setup

File Structure

.
├── src
│   ├── assets: images, logos, etc.
│   ├── components: jsx UI components
│   ├── lib: static information like team member names and assay lists
│   ├── main.css: Compiled from sass/main.sass
│   ├── sass: source sass styling
│   ├── storybook.test.js: initialize snapshots for storybook tests
│   ├── storybookSnapshotInit.Skiptest.js: rename Skiptest to test to include snapshot testing
│   ├── testData: Mock data used in stories and tests
│   └── [Component/Feature Name]: contains reducers, actions, components, subcomponents, and tests
│   | └── __test__: contains the storybook story and jest tests for the feature.
├── public
├── .storybook: configuration for storybook
├── .eslintrc.js: ESlint configuration
├── .prettierrc.js: Prettier configuration
├── .stylelint.config.js: StyleLint configurations for Sass Linting

Flow for creating new components

  1. Create [component].jsx file in src/[Component]
  2. Create storybook snapshots file src/[Component]/__test__/[component].stories.jsx
  3. Create tests in src/[Component]/__test__/[component].test.jsx
  4. Integrate required actions and reducers in to the components directory (ex. for upload handling logic that would be src/UploadPage/uploadReducer.js)
  5. If it is a full page, add routing logic to src/App/App.jsx

Building and running

  • Preparation:

    • Set node environment to 16.20.x, or use nvm to run nvm use v16.20.0
    • If node_modules directory already exist in your local working copy, run rm -fr node_modules/ and rm -f yarn.lock.
    • Create a .env file at the root of the local working copy and add ESLINT_NO_DEV_ERRORS=true.
    • Add additional required environment variables to the .env file in root (e.g. the API service address)
    • Run yarn install.

  • Building CSS: Uses sass in node_modules/sass/sass.js

    • yarn sass
    • Compiles sass from src/sass/main.scss to src/main.css
    • yarn sass-watch
    • Compiles sass from src/sass/main.scss to src/main.css and watches for changes

  • Running React App:

    • yarn start
    • Runs core React app at localhost:3000

  • Running Storybook:

    • yarn run storybook
    • Runs storybook server at localhost:9009

  • Testing:

    • yarn test
    • Runs tests and storybook snapshots
    • yarn test --coverage
    • Runs all tests and returns table illustrating code coverage

  • Quickly inspect someone's branch:

    • yarn inspect-branch
    • Compiles Scss, rebuilds node_modules if different, and starts react app

Software versions and styles

Software:

Additional Notes

Testing meta tags

  • localtunnel used to serve react app with command lt --port 3000 after running the app using yarn start in a seperate terminal
  • url from localtunnel used to test in Twitter Card Validator and the Facebook Sharing Debugger
  • %PUBLIC_URL% evaluates to nothing if the application is running on the dev server so the images which require absolute urls may not display

Notes on redux integration

  • Components that need to be linked to a redux store in implementation are exported by default as connected functions/containers. They are also exported in pure function form (ex: "import { UploadScreen } from 'path/to/component' " for pure function and "import UploadScreen from 'path/to/component'" for container).
  • mapStateToProps used to link the section from the combined reducer to properties required by the container
  • mapDispatchtoProps defines required actions and what to send to a reducer.
  • redux-thunk middleware used to handle asynchronous requests like for authentication

Potential down the line dependency issues

  • Storybook has trouble integrating with react-router, I installed a package called storybook-react-router to make them work together. If you run in to an issue with storybook saying something like "You should not use outside " it has something to do with react-router and storybook-react-router

Current navigation/routing implementation

  • React-router is being used to handle routing
  • history ( createBrowserHistory ) is used to update location from button clicks and function calls ( history.push('path/to/new/location') )
  • < Link > tags from react-router are used in place of < a > tags handle navigation from links. Certain elements return < Redirect to="path/to/new/location" > elements if protected and user not authenticated.
  • Analysis page only uses routing to differentiate between human and analysis (/analysis/human or /analysis/animal). After that it acts as a single page application.

Download Page Behavior

  • Makes call to backend for a list of uploads (size depending maxRows variable) on a given page. Expects backend to give total count of uploads fitting filters and the uploads for a specific page. (e.g on page 2, with 10 rows per page, expects items 11-20 from backend and a count of all rows that fit current filters)
  • Changing filters should also call backend

Cross-browser Testing Platform and Open Source ❤️ provided by Sauce Labs