{"id":21662809,"url":"https://github.com/higlass/higlass-multivec","last_synced_at":"2025-03-20T05:48:59.522Z","repository":{"id":31896131,"uuid":"129957606","full_name":"higlass/higlass-multivec","owner":"higlass","description":"Multivec Tracks for Higlass","archived":false,"fork":false,"pushed_at":"2024-07-25T03:13:46.000Z","size":3462,"stargazers_count":7,"open_issues_count":30,"forks_count":6,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-26T18:19:33.172Z","etag":null,"topics":["gehlenborglab","higlass","visualization"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/higlass.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-17T19:55:31.000Z","updated_at":"2024-10-01T11:04:19.000Z","dependencies_parsed_at":"2024-07-25T04:25:32.818Z","dependency_job_id":"212077ca-4e29-417f-8231-e19ce19fc4cc","html_url":"https://github.com/higlass/higlass-multivec","commit_stats":{"total_commits":176,"total_committers":7,"mean_commits":"25.142857142857142","dds":0.5852272727272727,"last_synced_commit":"61f2990fb4fad018370221dd7cb360b959cf85b9"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-multivec","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-multivec/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-multivec/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-multivec/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/higlass","download_url":"https://codeload.github.com/higlass/higlass-multivec/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244560373,"owners_count":20472219,"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":["gehlenborglab","higlass","visualization"],"created_at":"2024-11-25T10:18:11.321Z","updated_at":"2025-03-20T05:48:59.502Z","avatar_url":"https://github.com/higlass.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multivec Tracks for HiGlass\n\nDisplay genome-wide multivec tracks in HiGlass!\n\n[![HiGlass](https://img.shields.io/badge/higlass-🌸-brightgreen.svg)](http://higlass.io)\n[![Travis](https://img.shields.io/travis/higlass/higlass-multivec.svg)](https://travis-ci.org/higlass/higlass-multivec)\n\n\nThis is the source code for multivec tracks in HiGlass only; for the rest of HiGlass,\nsee these repositories:\n\n - HiGlass viewer: https://github.com/hms-dbmi/higlass\n - HiGlass server: https://github.com/hms-dbmi/higlass-server\n - HiGlass docker: https://github.com/hms-dbmi/higlass-docker\n\n## Installation\n \n```\nnpm install higlass-multivec\n```\n## Usage\n\nThe live scripts can be found at:\n\n- https://unpkg.com/higlass-multivec/dist/higlass-multivec.min.js\n\nThere are three types of tracks to choose from:\n\n```\n\"basic-multiple-line-chart\"\n\"horizontal-stacked-bar\"\n\"basic-multiple-bar-chart\"\n```\n\nConfigure the track in your view config; you should be all set from here!\n```\n[...\n   {\n    \"type\": \"horizontal-stacked-bar\",\n    \"tilesetUid\": \"my-multivec-db\",\n    \"server\": \"http://test1.resgen.io/api/v1\",\n       \"height\": 200,\n       \"width\": 470,\n       \"options\": {\n           \"labelPosition\": \"topLeft\",\n           \"labelColor\": \"black\",\n           \"labelTextOpacity\": 0.4,\n           \"valueScaling\": \"exponential\",\n           \"trackBorderWidth\": 0,\n           \"trackBorderColor\": \"black\",\n           \"heatmapValueScaling\": \"log\",\n           \"name\": \"all.KL.bed.multires.mv5\",\n           \"scaledHeight\": true,\n           \"backgroundColor\": \"white\",\n           \"sortLargestOnTop\": true,\n       },\n    },\n]   \n```\nFor an example, see [`src/index.html`](src/index.html).\n\n### ECMAScript Modules (ESM)\n\nWe also build out ES modules for usage by applications who may need to import or use `higlass-multivec` as a component.\n\nWhenever have a statement such as the following, assuming `higlass-multivec` is in your node_modules folder:\n```javascript\nimport { StackedBarTrack } from 'higlass-multivec';\n```\n\nThen StackedBarTrack would automatically be imported from the `./es` directory (set via package.json's `\"module\"` value). Can also import component(s) directly, especially if only need to use one or two, e.g.:\n\n```javascript\nimport { StackedBarTrack } from 'higlass-multivec/es/StackedBarTrack';\n```\n\nTo use this then along with HiGlassComponent, assuming you are developing with React either in an environment where `window` is available (client-side), use via the following:\n\n```javascript\nimport React from 'react';\nimport { StackedBarTrack } from 'higlass-multivec/es/StackedBarTrack';\nimport { HiGlassComponent } from 'higlass/dist/hglib';\nimport { default as higlassRegister } from 'higlass-register';\n\n// Call this sometime before we render out MyComponent below (synchronous)\nhiglassRegister({\n    name: 'StackedBarTrack',\n    track: StackedBarTrack,\n    config: StackedBarTrack.config,\n})\n\n...\n\n\nfunction MyComponent(props){\n    const { viewConfig, options, width, height, ...otherProps } = props;\n    return (\n        \u003cdiv className=\"container\"\u003e\n            \u003cHiGlassComponent {...{ viewConfig, options, width, height }} /\u003e\n        \u003c/div\u003e\n    );\n}\nMyComponent.defaultProps = { ... };\n\nReactDOM.render(\n    \u003cMyComponent {...someData} /\u003e,\n    document.getElementById(\"root\")\n);\n\n```\n\n#### Minor Background Info\n\n- https://dev.to/bennypowers/you-should-be-using-esm-kn3\n- https://nodejs.org/api/esm.html#esm_introduction\n\n## Development\n\n### Testing\n\nTo run the test suite:\n\n```\nnpm run test-watch\n```\n\n\n### Installation\n\n```bash\n$ git clone https://github.com/hms-dbmi/higlass-multivec.git\n$ cd higlass-multivec\n$ npm install\n```\nIf you have a local copy of higlass, you can then run this command in the higlass-multivec directory:\n\n```bash\nnpm link higlass\n```\n\n### Commands\n\n - **Developmental server**: `npm start`\n - **Production build**: `npm run build`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiglass%2Fhiglass-multivec","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiglass%2Fhiglass-multivec","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiglass%2Fhiglass-multivec/lists"}