{"id":21662788,"url":"https://github.com/higlass/higlass-arcs","last_synced_at":"2025-04-11T23:51:08.755Z","repository":{"id":36933999,"uuid":"136978727","full_name":"higlass/higlass-arcs","owner":"higlass","description":"HiGlass track for displaying arcs between disconnected regions","archived":false,"fork":false,"pushed_at":"2022-12-13T21:52:00.000Z","size":2915,"stargazers_count":9,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T19:48:40.691Z","etag":null,"topics":["arcs","arcs-track","higlass"],"latest_commit_sha":null,"homepage":"https://higlass.github.io/higlass-arcs/","language":"JavaScript","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}},"created_at":"2018-06-11T20:42:00.000Z","updated_at":"2023-08-03T07:42:02.000Z","dependencies_parsed_at":"2023-01-17T07:19:29.833Z","dependency_job_id":null,"html_url":"https://github.com/higlass/higlass-arcs","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-arcs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-arcs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-arcs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/higlass%2Fhiglass-arcs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/higlass","download_url":"https://codeload.github.com/higlass/higlass-arcs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487732,"owners_count":21112188,"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":["arcs","arcs-track","higlass"],"created_at":"2024-11-25T10:18:05.542Z","updated_at":"2025-04-11T23:51:08.734Z","avatar_url":"https://github.com/higlass.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Arcs Track for HiGlass\n\n\u003e Display connections between non-adjacent regions as arcs\n\n[![HiGlass](https://img.shields.io/badge/higlass-😍-red.svg?colorB=7fb4ff\u0026style=flat-square)](http://higlass.io)\n[![npm version](https://img.shields.io/npm/v/higlass-arcs.svg?color=7f94ff\u0026style=flat-square)](https://www.npmjs.com/package/higlass-arcs)\n[![build status](https://img.shields.io/github/workflow/status/higlass/higlass-arcs/build?color=a17fff\u0026style=flat-square)](https://github.com/higlass/higlass-arcs/actions?query=workflow%3Abuild)\n[![gzipped size](https://img.badgesize.io/https:/unpkg.com/higlass-arcs/dist/higlass-arcs.min.js?color=e17fff\u0026compression=gzip\u0026style=flat-square)](https://bundlephobia.com/result?p=higlass-arcs)\n[![code style prettier](https://img.shields.io/badge/code_style-prettier-f57bf5.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![higlass-arcs demo](https://img.shields.io/badge/demo-online-f264ab.svg?style=flat-square)](https://higlass.github.io/higlass-arcs/)\n\n![Screenshot of the arcs track](https://user-images.githubusercontent.com/2143629/71704745-0bd15f00-2d91-11ea-99d3-4bad11dec7de.png 'An example of the arcs track')\n\nThe WebGL implementation is inspired by [Matt Deslauriers' wonderful blog post on drawing lines](https://mattdesl.svbtle.com/drawing-lines-is-hard).\n\n**Live demo:** https://higlass.github.io/higlass-arcs/\n\n**Note**: This is the source code for the arcs track only! You might want to check out the following repositories as well:\n\n- HiGlass viewer: https://github.com/higlass/higlass\n- HiGlass server: https://github.com/higlass/higlass-server\n- HiGlass docker: https://github.com/higlass/higlass-docker\n\n## Installation\n\n```\nnpm install higlass-arcs\n```\n\n## Usage\n\nThe live script can be found at:\n\n- https://unpkg.com/higlass-arcs/dist/higlass-arcs.min.js\n\n1. Make sure you load this track prior to `hglib.min.js`. For example:\n\n```html\n\u003cscript src=\"higlass-arcs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"hglib.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  ...\n\u003c/script\u003e\n```\n\nIf you build a custom React application, import `higlass-arcs` in your `index.js` as follows:\n\n```javascript\nimport 'higlass-arcs'; // This import is all you have to do\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './App';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n2. Now, configure the track in your view config and be happy! Cheers 🎉\n\n```javascript\n{\n  ...\n  {\n    server: 'http://localhost:8001/api/v1',\n    tilesetUid: 'my-aggregated-bedfile.beddb',\n    uid: 'some-uid',\n    type: '1d-arcs',\n    options: {\n      labelColor: 'red',\n      labelPosition: 'hidden',\n      trackBorderWidth: 0,\n      trackBorderColor: 'black',\n      name: 'Arcs for me and you!',\n    },\n  },\n  ...\n}\n```\n\nTake a look at [`src/index.html`](src/index.html) for an example. You can find the corresponding live demo at https://higlass.github.io/higlass-arcs/.\n\n## Custom Options\n\n#### startField\n\nBy default, a segments x1 start value is used as the start position. You can customize this behavior by specifying another column. Useful when drawing arcs from bedpe data.\n\n#### endField\n\nBy default, a segments x1 end value is used as the end position. You can customize this behavior by specifying another column. Useful when drawing arcs from bedpe data.\n\n#### filter\n\nAn object with the following properties to filter segments.\n\n**Properties:**\n\n- `set`: a list of values that will allow segments to be included, i.e., rendered\n- `field`: an integer defining the segment field column number that should be used to check against the `set`\n\nIn other words, this is how the filtering is basically implemented:\n\n```javascript\nsegments.filter((segment) =\u003e\n  options.filter.set.includes(segment.fields[options.filter.field])\n);\n```\n\n## Development\n\n### Installation\n\n```bash\n$ git clone https://github.com/higlass/higlass-arcs \u0026\u0026 higlass-arcs\n$ npm install\n```\n\n### Commands\n\n**Developmental server**: `npm start`\n**Production build**: `npm run build`\n**Deploy demo**: `npm run deploy`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiglass%2Fhiglass-arcs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiglass%2Fhiglass-arcs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiglass%2Fhiglass-arcs/lists"}