{"id":19476832,"url":"https://github.com/openchemistry/oc-web-components","last_synced_at":"2025-04-25T14:32:27.959Z","repository":{"id":32576056,"uuid":"137375286","full_name":"OpenChemistry/oc-web-components","owner":"OpenChemistry","description":"Web components supporting the Open Chemistry project","archived":false,"fork":false,"pushed_at":"2023-02-01T19:40:10.000Z","size":4771,"stargazers_count":9,"open_issues_count":71,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T05:19:41.521Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpenChemistry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-14T15:16:31.000Z","updated_at":"2025-04-02T09:37:55.000Z","dependencies_parsed_at":"2023-02-17T10:15:35.049Z","dependency_job_id":null,"html_url":"https://github.com/OpenChemistry/oc-web-components","commit_stats":null,"previous_names":[],"tags_count":711,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenChemistry%2Foc-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenChemistry%2Foc-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenChemistry%2Foc-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenChemistry%2Foc-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpenChemistry","download_url":"https://codeload.github.com/OpenChemistry/oc-web-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250834194,"owners_count":21494926,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T19:42:10.215Z","updated_at":"2025-04-25T14:32:25.357Z","avatar_url":"https://github.com/OpenChemistry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# oc-web-components\n[![CircleCI Status](https://circleci.com/gh/OpenChemistry/oc-web-components.svg?style=shield)](https://circleci.com/gh/OpenChemistry/oc-web-components)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n\n[Lerna](https://github.com/lerna/lerna) monorepo containing Open Chemistry npm packages.\n\n## Table of Contents\n- [Packages](#packages)\n- [Build](#build)\n- [Develop](#develop)\n\n\n## Packages\n|   |   |\n|---|---|\n| [`@openchemistry/types`](#openchemistry_types) | [![npm package](https://img.shields.io/npm/v/@openchemistry/types.svg)](https://www.npmjs.com/package/@openchemistry/types) |\n| [`@openchemistry/utils`](#openchemistry_utils) | [![npm package](https://img.shields.io/npm/v/@openchemistry/utils.svg)](https://www.npmjs.com/package/@openchemistry/utils) |\n| [`@openchemistry/moljs-es`](#openchemistry_moljs-es) | [![npm package](https://img.shields.io/npm/v/@openchemistry/moljs-es.svg)](https://www.npmjs.com/package/@openchemistry/moljs-es) |\n| [`@openchemistry/molecule-moljs`](#openchemistry_molecule-moljs) | [![npm package](https://img.shields.io/npm/v/@openchemistry/molecule-moljs.svg)](https://www.npmjs.com/package/@openchemistry/molecule-moljs) |\n| [`@openchemistry/molecule-vtkjs`](#openchemistry_molecule-vtkjs) | [![npm package](https://img.shields.io/npm/v/@openchemistry/molecule-vtkjs.svg)](https://www.npmjs.com/package/@openchemistry/molecule-vtkjs) |\n| [`@openchemistry/molecule-menu`](#openchemistry_molecule-menu) | [![npm package](https://img.shields.io/npm/v/@openchemistry/molecule-menu.svg)](https://www.npmjs.com/package/@openchemistry/molecule-menu) |\n| [`@openchemistry/volume-controls`](#openchemistry_volume-controls) | [![npm package](https://img.shields.io/npm/v/@openchemistry/volume-controls.svg)](https://www.npmjs.com/package/@openchemistry/volume-controls) |\n| [`@openchemistry/vibrational-spectrum`](#openchemistry_vibrational-spectrum) | [![npm package](https://img.shields.io/npm/v/@openchemistry/vibrational-spectrum.svg)](https://www.npmjs.com/package/@openchemistry/vibrational-spectrum) |\n| [`@openchemistry/molecule`](#openchemistry_molecule) | [![npm package](https://img.shields.io/npm/v/@openchemistry/molecule.svg)](https://www.npmjs.com/package/@openchemistry/molecule) |\n| [`@openchemistry/energy-plot`](#openchemistry_energy-plot) | [![npm package](https://img.shields.io/npm/v/@openchemistry/energy-plot.svg)](https://www.npmjs.com/package/@openchemistry/energy-plot) |\n| [`@openchemistry/sample-data`](#openchemistry_sample-data) | [![npm package](https://img.shields.io/npm/v/@openchemistry/sample-data.svg)](https://www.npmjs.com/package/@openchemistry/sample-data) |\n| [`@openchemistry/girder-client`](#openchemistry_girder-client) | [![npm package](https://img.shields.io/npm/v/@openchemistry/girder-client.svg)](https://www.npmjs.com/package/@openchemistry/girder-client) |\n| [`@openchemistry/girder-redux`](#openchemistry_girder-redux) | [![npm package](https://img.shields.io/npm/v/@openchemistry/girder-redux.svg)](https://www.npmjs.com/package/@openchemistry/girder-redux) |\n| [`@openchemistry/girder-ui`](#openchemistry_girder-ui) | [![npm package](https://img.shields.io/npm/v/@openchemistry/girder-ui.svg)](https://www.npmjs.com/package/@openchemistry/girder-ui) |\n| [`@openchemistry/rest`](#openchemistry_rest) | [![npm package](https://img.shields.io/npm/v/@openchemistry/rest.svg)](https://www.npmjs.com/package/@openchemistry/rest) |\n| [`@openchemistry/redux`](#openchemistry_redux) | [![npm package](https://img.shields.io/npm/v/@openchemistry/redux.svg)](https://www.npmjs.com/package/@openchemistry/redux) |\n| [`@openchemistry/sagas`](#openchemistry_sagas) | [![npm package](https://img.shields.io/npm/v/@openchemistry/sagas.svg)](https://www.npmjs.com/package/@openchemistry/sagas) |\n\n\n### `@openchemistry/types`\n- TypeScript interfaces used across all packages.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/types)\n\n\n### `@openchemistry/utils`\n- Auxiliary functions to convert and validate cjson data, and components props.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/utils)\n\n\n### `@openchemistry/moljs-es`\n- Wrapper around [3dmoljs](https://github.com/3dmol/3Dmol.js) to turn it into an ES6 module.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/moljs-es)\n\n\n### `@openchemistry/molecule-moljs`\n- A web component to display chemical json data that uses [3dmoljs](https://github.com/3dmol/3Dmol.js).\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/molecule-moljs)\n\n\n### `@openchemistry/molecule-vtkjs`\n- A web component to display chemical json data that uses [vtkjs](https://github.com/kitware/vtk-js).\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/molecule-vtkjs)\n\n\n### `@openchemistry/volume-controls`\n- A web component to visualize and manipulate the color transfer function.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/volume-controls)\n\n\n### `@openchemistry/molecule-menu`\n- A web component to tweak the visual appearance of the molecular viewers.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/molecule-menu)\n\n\n### `@openchemistry/vibrational-spectrum`\n- A web component to display the vibrational spectrum of a molecule.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/vibrational-spectrum)\n\n\n### `@openchemistry/molecule`\n- A high level web component combining `molecule-vtkjs`, `molecule-moljs`, `vibrational-spectrum` and `molecule-menu`.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/molecule)\n\n\n### `@openchemistry/energy-plot`\n- A web component to display the free energy of a set of reactions.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/energy-plot)\n\n\n### `@openchemistry/sample-data`\n- Sample cjson data for demo purposes.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/sample-data)\n\n\n### `@openchemistry/girder-client`\n- A utility client to make authenticated HTTP requests to a girder instance.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/girder-client)\n\n\n### `@openchemistry/girder-redux`\n- Redux ducks and sagas containing the boilerplate needed to perform various common operations (auth, notifications, ...) on a girder instance.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/girder-redux)\n\n\n### `@openchemistry/girder-ui`\n- Reusable React UI components to perform common operations (auth, notifications, ...) on an app with a girder server.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/girder-redux)\n\n\n### `@openchemistry/rest`\n- [LEGACY] A set of function to perform REST calls specific to the mongochem project.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/rest)\n\n\n### `@openchemistry/redux`\n- [LEGACY] Redux ducks and sagas specific to the mongochem project.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/redux)\n\n\n### `@openchemistry/sagas`\n- [LEGACY] Redux sagas specific to the mongochem project.\n- [Sources and Docs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/sagas)\n\n\n## Build\n\nTo build all the packages in the monorepo, follow the steps below.\n\nClone the repository:\n```\ngit clone git@github.com:OpenChemistry/oc-web-components.git\n```\n\nInstall the monorepo dependencies and bootstrap the various packages:\n```\ncd oc-web-components\nyarn install\nyarn run bootstrap\n```\n\nBuild the packages:\n```\nyarn run build\n```\n\n## Develop\nTo use the local dev version of the Open Chemistry packages within the mongochem project follow the steps below.\n\nNOTE: When linking the packages in development, `yarn` **must** be used instead of `npm`.\n\nBuild all the packages in the monorepo. See instructions [above](#build).\n\nCreate local links for all the packages:\n```bash\n# From the oc-web-components root directory\n\nexport OPENCHEMISTRY_PACKAGES=$(ls packages)\n\nfor package in $OPENCHEMISTRY_PACKAGES; do \\\n  cd packages/${package} \u0026\u0026 \\\n  yarn unlink \u0026\u0026 \\\n  yarn link \u0026\u0026 \\\n  cd ../../\ndone;\n```\n\nConsume the linked packages in the mongochemclient:\n```bash\n# From the mongochemclient root directory\n\nyarn install\n\nfor package in $OPENCHEMISTRY_PACKAGES; do \\\n  yarn link @openchemistry/${package}\ndone;\n\nyarn run start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenchemistry%2Foc-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenchemistry%2Foc-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenchemistry%2Foc-web-components/lists"}