https://gosling-lang.org/assets/js/2f479dd6.130d17ea.js

1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[4805],{44735:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>t,metadata:()=>a,toc:()=>l});var i=s(74848),r=s(28453);const t={title:"JavaScript API Functions"},o=void 0,a={id:"js-api",title:"JavaScript API Functions",description:"This is a full list of JavaScript API functions supported in Gosling.js.",source:"@site/versioned_docs/version-0.10.1/js-api.md",sourceDirName:".",slug:"/js-api",permalink:"/docs/0.10.1/js-api",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-0.10.1/js-api.md",tags:[],version:"0.10.1",frontMatter:{title:"JavaScript API Functions"},sidebar:"docs",previous:{title:"Semantic Zoom",permalink:"/docs/0.10.1/semantic-zoom"},next:{title:"Integrating non-Gosling visualizations",permalink:"/docs/0.10.1/non-gos-vis"}},c={},l=[{value:"zoomTo",id:"zoomto",level:3},{value:"zoomToExtent",id:"zoomtoextent",level:2},{value:"zoomToGene",id:"zoomtogene",level:2},{value:"getViewIds",id:"getviewids",level:2},{value:"exportPng",id:"exportpng",level:2},{value:"exportPdf",id:"exportpdf",level:2},{value:"getCanvas",id:"getcanvas",level:2},{value:"subscribe",id:"subscribe",level:2},{value:"unsubscribe",id:"unsubscribe",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["This is a full list of JavaScript API functions supported in Gosling.js.\nyou need to create a ",(0,i.jsx)(n.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html",children:"Ref"})," to use API functions."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"import React, { useRef, useEffect } from \"react\";\nimport { GoslingComponent} from 'gosling.js';\n\nconst gosRef = useRef(null)\n\n<GoslingComponent\n       ref = {gosRef}\n       spec = {/**your gosling spec**/}\n/>\n\nif (gosRef.current) {\n   // then you can use any Gosling API you want\n   gosRef.current.api.exportPdf();\n }\n"})}),"\n",(0,i.jsxs)(n.p,{children:["To find an working example, please visit ",(0,i.jsx)(n.a,{href:"https://github.com/gosling-lang/gosling-react",children:"gosling-lang/gosling-react"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"zoomto",children:"zoomTo"}),"\n",(0,i.jsx)(n.p,{children:"This function makes a view navigate to a specific genomic position with the animated transition."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.zoomTo(viewId: string, position: string, padding?: number, duration?: number)\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"viewId"}),": string\nThe ID of a view that you want to control. This ID is consistent to what you specify as ",(0,i.jsx)(n.code,{children:"track.id"})," in your spec."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"position"}),": string\nThe genomic position that your view should be navigated to. You can either specify chromosome (e.g., ",(0,i.jsx)(n.code,{children:"chr1"}),") or a chromosome and range pair (e.g., ",(0,i.jsx)(n.code,{children:"chr1:1-10000"}),")."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"padding?"}),": number\nThis determines the padding around the specified position. The unit of this number is a base pair (Default: ",(0,i.jsx)(n.code,{children:"0"}),")."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"duration?"}),": number\nA duration of the animated transition in ms (Default: ",(0,i.jsx)(n.code,{children:"1000"}),")."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"zoomtoextent",children:"zoomToExtent"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.zoomToExtend(viewId: string, duration?: number)\n"})}),"\n",(0,i.jsx)(n.p,{children:"This function zooms out the specified view to see entire genome."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"viewId"}),": string\nThe ID of a view that you want to control. This ID is consistent to what you specify as ",(0,i.jsx)(n.code,{children:"track.id"})," in your spec."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"duration?"}),": number\nA duration of the animated transition in ms (Default: ",(0,i.jsx)(n.code,{children:"1000"}),")."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"zoomtogene",children:"zoomToGene"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.zoomToGene(viewId: string, gene: string, padding?: number, duration?: number)\n"})}

1),"\n",(0,i.jsx)(n.p,{children:"This function makes a view navigate to a certain gene with animated transition."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"viewId"}),": string\nThe ID of a view that you want to control. This ID is consistent to what you specify as ",(0,i.jsx)(n.code,{children:"track.id"})," in your spec."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"gene"}),": string\nThe target gene symbol that your view should be navigated to (e.g., ",(0,i.jsx)(n.code,{children:"MYC"}),")."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"padding?"}),": number\nThis determines the padding around the specified position. The unit of this number is a base pair (Default: ",(0,i.jsx)(n.code,{children:"0"}),")."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"duration?"}),": number\nA duration of the animated transition in ms (Default: ",(0,i.jsx)(n.code,{children:"1000"}),")."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"getviewids",children:"getViewIds"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.getViewIds()\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Return"})}),"\n",(0,i.jsx)(n.p,{children:"Returns a list of IDs that are assigned to individual views.\nThis function can be used prior to navigation functions to check whether certain view IDs exist."}),"\n",(0,i.jsx)(n.h2,{id:"exportpng",children:"exportPng"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.exportPng(transparentBackground?: boolean)\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"transparentBackground?"}),": boolean\nDetermine if the background should be transparent or not (Default: ",(0,i.jsx)(n.code,{children:"false"}),")."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"exportpdf",children:"exportPdf"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.exportPdf(transparentBackground?: boolean)\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"transparentBackground?"}),": boolean\nDetermine if the background should be transparent or not (Default: ",(0,i.jsx)(n.code,{children:"false"}),")."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"getcanvas",children:"getCanvas"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.getCanvas(options?: { resolution?: number; transparentBackground?: boolean })\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"options.resolution?"}),": number\nRelative resolution of Gosling.js visualization (Default: ",(0,i.jsx)(n.code,{children:"4"}),")."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"options.transparentBackground?"}),": boolean\nDetermine if the background should be transparent or not (Default: ",(0,i.jsx)(n.code,{children:"false"}),")."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Return"}),"\nReturns a canvas that renders Gosling.js visualization:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"{\n    canvas: HTMLCanvasElement;\n    canvasWidth: number;\n    canvasHeight: number;\n    resolution: number;\n};\n"})}),"\n",(0,i.jsx)(n.h2,{id:"subscribe",children:"subscribe"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.subscribe(eventName:string, callback: (msg:string, eventData)=>void)\n"})}),"\n",(0,i.jsx)(n.p,{children:"Subscribe the callback function to the specified event."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Parameters"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"eventName"}),": string\nSpecify the event using its name.\nOne of ",(0,i.jsx)(n.code,{children:'"mouseOver"'}),", ",(0,i.jsx)(n.code,{children:'"rangeSelect"'}),", ",(0,i.jsx)(n.code,{children:'"click"'}),", ",(0,i.jsx)(n.code,{children:'"rawData"'}),", ",(0,i.jsx)(n.code,{children:'"onNewTrack"'}),", ",(0,i.jsx)(n.code,{children:'"onNewView"'}),", ",(0,i.jsx)(n.code,{children:'"location"'}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"callback"}),": ",(0,i.jsx)(n.code,{children:"(msg:string, eventData)=>void"}),"\nA function that is subscribed to the specified event."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["For ",(0,i.jsx)(n.code,{children:'"onNewTrack"'})," and ",(0,i.jsx)(n.code,{children:'"onNewView"'}),", the ",(0,i.jsx)(n.code,{children:"eventData"}

1)," contains just the ",(0,i.jsx)(n.code,{children:"id"})," of a track or view that has been added. These API functions can be useful if you want to know when certain tracks and views have been added."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"{ \n    id: string\n}\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["For ",(0,i.jsx)(n.code,{children:'"rawData"'}),", the ",(0,i.jsx)(n.code,{children:"eventData"})," stores columnar data that has been used internally in Gosling to display the view:"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"{ \n    id: string,\n    data: {[k:string]: number|string}[]\n}\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["For ",(0,i.jsx)(n.code,{children:'"mouseOver"'})," or ",(0,i.jsx)(n.code,{children:'"Click"'}),", the ",(0,i.jsx)(n.code,{children:"eventData"})," stores the genomic position of the event and the columnar data corresponding to the visual mark that is either clicked or mouse overed."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:" { \n     id: string,\n     data: {[k:string]: number|string}[],\n     genomicPosition: {chromosome: string, position: number}\n }\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["For ",(0,i.jsx)(n.code,{children:'"rangeSelect"'}),", the ",(0,i.jsx)(n.code,{children:"eventData"})," stores the genomic range of the range select event and the columnar data corresponding to all selected visual marks that are within a range brush."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"{ \n    id: string,\n    data: {[k:string]: number|string}[],\n    genomicRange: [\n      {chromosome: string, position: number}, \n      {chromosome: string, position: number}\n    ]\n}\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["For ",(0,i.jsx)(n.code,{children:'"location"'}),", the ",(0,i.jsx)(n.code,{children:"eventData"})," contains the genomic range of a track. Every time a track axis range changes, this\nAPI gets updated. For example, if a user zooms in to a track, the axis range changes, and the location API gets updated.\nIf the axis starts before the first chromosome, the start of the genomic range will return the beginning of the first chromosome.\nIf the axis ends after the last chromosome, the end of the genomic range will be the last position in the last chromosome."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"{ \n    id: string, \n    genomicRange: [\n      {chromosome: string, position: number}, \n      {chromosome: string, position: number}\n    ]\n}\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"unsubscribe",children:"unsubscribe"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",children:"api.unsubscribe(eventName:string)\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Unsubscribe the callback function from the specified event.\n",(0,i.jsx)(n.strong,{children:"Parameters"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"eventName"}),": string\nName of the event.\nOne of ",(0,i.jsx)(n.code,{children:'"mouseOver"'}),", ",(0,i.jsx)(n.code,{children:'"rangeSelect"'}),", ",(0,i.jsx)(n.code,{children:'"click"'}),", ",(0,i.jsx)(n.code,{children:'"rawData"'}),", ",(0,i.jsx)(n.code,{children:'"location"'}),"."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>a});var i=s(96540);const r={},t=i.createContext(r);function o(e){const n=i.useContext(t);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),i.createElement(t.Provider,{value:n},e.children)}}}]);