Synapse-react-client NPM

Synapse React Client

This project helps you integrate your app with the Synapse API backend.

See the available Components

Getting started with Synapse.

Synapse.org is a client written for the Synapse platform.

Interested in contributing to this project? See contributing.

Installation

Run the following command:

npm install synapse-react-client

Usage

See index.ts for a comprehensive list of components that can be used.

To function properly, all components must be wrapped in a SynapseContextProvider. To make authenticated requests, you must provide the user's access token as a property to the context provider, among other values. You may maintain this in state, or provide it however you like.

The context provider also maintains a shared cache (via react-query). It is recommended to place the provider at the highest possible point in your component tree, and to use the same provider across components if possible.

Example:

const myToken = "example-token" // this value may also be undefined, if a user is not signed in
const useUtcTime = true
const inExperimentalMode = false

<SynapseContextProvider synapseContext={{ accessToken: myToken, isInExperimentalMode: inExperimentalMode, utcTime: useUtcTime }} >
  <EntityFinder {...entityFinderProps} />
</SynapseContextProvider>

Setting Endpoints

Configuring endpoint destinations for repo and portal

Specifying the following in the window object will override request endpoints:

window.SRC.OVERRIDE_ENDPOINT_CONFIG = {
  PORTAL: '<endpoint>',
  REPO: '<endpoint>',
}

Note - this will apply to all calls being made.

Theming

We are primarily using MUI for styling and per-app theming. We provide a default theme in DefaultTheme.ts which can be overridden with your own theme properties.

SCSS

Synapse React Client also uses Dart Sass. The core css lives in src/style and src/template_style.

For a list of variables you can override, see src/style/abstracts/_variables.scss.

Override the variables by importing the SCSS in your project like so:

@use 'synapse-react-client/dist/style/main.scss' with ($primary-action-color:
      $-my-primary-color, $secondary-action-color: $-my-secondary-color, // ...any other overrides continue);
@use 'synapse-react-client/dist/template_style/Index.scss';

In this example, make sure that your node_modules folder is in your Dart Sass load path.

Project Contents

├── ./src
│   ├── ./assets    Assets such as svgs/pngs needed for logos or buttons
│   ├── ./components  Contains all React components
│   ├── ./style   Contains scss stylesheets
│   ├── ./synapse-client   Functions used to call the Synapse REST API
│   ├── ./synapse-queries   react-query hooks used to interact with the Synapse REST API
│   ├── ./template-style   Contains scss stylesheets
│   ├── ./theme   Utilities and exports for MUI theming
│   └── ./utils   Contains utilities
├── ./mocks Mock data used for testing and stories
├── ./test Tests for all components and utilities
└── ./stories Storybook stories for components

Adding a new component and Publishing a new version of SRC

To expose a component from the library you must export it from index.ts. Ideally, your component will get its own subfolder within src/components/, which will contain an index.ts file that exports the public API of the component (typically the component and its props type). In src/components/index.ts, you can then export the contents of the new subfolder.

To expose a component for use in synapse.org, you must export it from umd.index.ts. Note that certain dependencies are not included in the UMD bundle. See the script that builds the bundle, src/esbuild.config.mjs, for more details.

Available Scripts

Before doing anything else run:

`pnpm install`

In the project directory, you can run:

`pnpm start`

Runs Storybook, which allows you to inspect and interact with components.

`pnpm test`

Launches the test runner in the interactive watch mode.

`pnpm test:ci`

Launches the test runner in the non-interactive mode to run all tests and calculate test coverage.

Links to Resources on Testing:

Jest: https://jestjs.io/
React Testing Library: https://testing-library.com/docs/react-testing-library/intro

`pnpm build`

Bundles the library for production to the build folder.

`pnpm build:js`

Bundles the library for production to the build folder using tsup. This command creates CJS and ESM bundles with all dependencies removed, and also outputs a single TypeScript declaration file.

Note - this script is run automatically as part of the build command.

`pnpm build:esbuild`

This project can be built as a umd bundle. It produces three files

synapse-react-client.production.min.js
synapse-react-client.development.js
synapse-react-client.production.min.styles.css.

Note - this script is run automatically as part of the build command.

@apidevtools/json-schema-ref-parser @brainhubeu/react-carousel @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/system @mui/utils @mui/x-data-grid @mui/x-date-pickers @popperjs/core @react-google-maps/api @react-hook/resize-observer @react-hookz/web @rjsf/core @rjsf/mui @rjsf/utils @rjsf/validator-ajv8 @sage-bionetworks/react-base-table @tanstack/query-core @tanstack/react-query @tanstack/react-query-devtools @tanstack/react-table @upsetjs/react animate.css bootstrap classnames dagre dayjs downshift history immutable jotai json-rules-engine katex lodash-es markdown-it markdown-it-br markdown-it-center-text markdown-it-container markdown-it-emphasis-alt markdown-it-inline-comments markdown-it-strikethrough-alt markdown-it-sub-alt markdown-it-sup-alt markdown-it-synapse-heading markdown-it-synapse-math markdown-it-synapse-table mui-one-time-password-input papaparse plotly.js plotly.js-basic-dist pluralize prop-types qrcode raf react-app-polyfill react-bootstrap react-datetime react-error-boundary react-hot-toast react-inspector react-intersection-observer react-mailchimp-subscribe react-measure react-plotly.js react-popper react-reflex react-router-dom react-select react-sizeme react-switch react-transition-group react-virtualized-auto-sizer react-vtree react-window reactflow rss-parser sass shortid spark-md5 tinycolor2 tslib ua-parser-js universal-cookie use-deep-compare-effect xss zod @sage-bionetworks/synapse-types markdown-it-synapse

@infinitebrahmanuniverse/nolb-syna @everything-registry/sub-chunk-2866

3 days ago

3 days ago

3 days ago

9 days ago

21 days ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-experimental-69c31738

3 years ago

1.15.87

3 years ago

1.15.86

3 years ago

0.0.0-experimental-9587ccdd

3 years ago

0.0.0-experimental-0149bd90

3 years ago

0.0.0-experimental-75c67747

3 years ago

0.0.0-experimental-0c446dbb

3 years ago

0.0.0-experimental-331c4d92

3 years ago

0.0.0-experimental-371b1897

3 years ago

1.15.85

3 years ago

0.0.0-experimental-4a04c1a8

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago