{"id":23429073,"url":"https://github.com/thetechnocrat-dev/viztein","last_synced_at":"2025-04-12T20:22:10.154Z","repository":{"id":42087829,"uuid":"147765757","full_name":"thetechnocrat-dev/viztein","owner":"thetechnocrat-dev","description":"React library component for visualizing proteins","archived":false,"fork":false,"pushed_at":"2023-01-26T10:25:06.000Z","size":7405,"stargazers_count":6,"open_issues_count":38,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T14:39:15.262Z","etag":null,"topics":["molecular-graphics","protein-visualization","react","scientific-visualization","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thetechnocrat-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-07T03:30:00.000Z","updated_at":"2024-07-03T08:52:44.000Z","dependencies_parsed_at":"2023-02-05T20:15:17.685Z","dependency_job_id":null,"html_url":"https://github.com/thetechnocrat-dev/viztein","commit_stats":null,"previous_names":["mcmenemy/viztein"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetechnocrat-dev%2Fviztein","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetechnocrat-dev%2Fviztein/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetechnocrat-dev%2Fviztein/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetechnocrat-dev%2Fviztein/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thetechnocrat-dev","download_url":"https://codeload.github.com/thetechnocrat-dev/viztein/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248626380,"owners_count":21135654,"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":["molecular-graphics","protein-visualization","react","scientific-visualization","webgl"],"created_at":"2024-12-23T07:16:38.049Z","updated_at":"2025-04-12T20:22:10.133Z","avatar_url":"https://github.com/thetechnocrat-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Viztein\n\n[Viztein](https://mcmenemy.github.io/viztein/) is a React library component for **vi**suali**z**ing pro**tein**s and other macromolecules. The code is a light wrapper around [NGL](https://github.com/arose/ngl) which uses [WebGL](https://get.webgl.org/) for rendering graphics.\n\n[![npm version](https://badge.fury.io/js/viztein.svg)](https://badge.fury.io/js/viztein)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Quickstart\n\n```\n$ npm install viztein@0.1.7\n```\n\n```\nimport Viztein from 'viztein';\n\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cViztein data={{ filename: \"https://files.rcsb.org/download/4hhb.pdb\" }} /\u003e\n    );\n  }\n};\n```\n\n[JSFiddle](https://jsfiddle.net/mcmenemy/usq4216m/)\n\n## Examples\n\n[Default with Custom Viewport Style](https://jsfiddle.net/mcmenemy/unf82t7p/)\n\n[Ball and Stick](https://jsfiddle.net/mcmenemy/ho62qcwd/)\n\n[Ball and Stick Custom Ratio](https://jsfiddle.net/mcmenemy/uk0easm9/)\n\n[Custom Color](https://jsfiddle.net/mcmenemy/cvo3gq64/)\n\n## Installation\n\n### NPM\n\n```\n# latest stable\n$ npm install viztein\n```\n\n## Component Properties\n\n#### Data (Object) Required\n\nThe macromolecule source and display config data.\n\nRequires a filename key which can be a file path or url path to the source data. Supported file types are mmCIF, PDB, PQR, GRO, SDF, MOL2, and MMTF. A config key can also be passed in to change the display options. Each config option contains a type and input. The type is the name of the NGL function to use and the input are the arguments to pass in. A list of display functions is found in the [NGL molecular display documentation](http://nglviewer.org/ngl/api/manual/molecular-representations.html).\n\ndata Prop Example:\n\n```\n{\n  filename: 'https://files.rcsb.org/download/4hhb.pdb',\n  config: [\n    {\n      type: 'addRepresentation',\n      input: ['ball+stick', { color: 'orange' }]\n    }\n  ]\n}\n```\n\n#### ViewportId (string) optional\n\nId of the div element to render the graphic inside. When rendering multiple Viztein components on the same page, pass in an unique viewportId prop to each Viztein component.\n\nviewportId Default\n\n```\n'viztein-viewport'\n```\n\n#### ViewportStyle (object) optional\n\nCSS style of the viewport.\n\nviewportStyle Default\n\n```\n{\n  backgroundColor: 'black',\n  width: '500px',\n  height: '500px'\n}\n```\n\n## Dev Build\n\n```\n$ git clone https://github.com/mcmenemy/viztein.git\n$ cd viztein\n$ npm install\n$ npm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetechnocrat-dev%2Fviztein","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthetechnocrat-dev%2Fviztein","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetechnocrat-dev%2Fviztein/lists"}