1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[242],{48420:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var t=n(74848),o=n(28453);const i={title:"Frequently Asked Questions"},l=void 0,r={id:"FAQ",title:"Frequently Asked Questions",description:"A list of frequently asked questions about Gosling.js.",source:"@site/versioned_docs/version-0.9/FAQ.md",sourceDirName:".",slug:"/FAQ",permalink:"/docs/0.9/FAQ",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-0.9/FAQ.md",tags:[],version:"0.9",frontMatter:{title:"Frequently Asked Questions"},sidebar:"docs",previous:{title:"Public Datasets",permalink:"/docs/0.9/public-datasets"}},a={},d=[{value:"How to debug gosling specs?",id:"how-to-debug-gosling-specs",level:2},{value:"How to show Gosling Tooltips that are hidden under other components?",id:"how-to-show-gosling-tooltips-that-are-hidden-under-other-components",level:2},{value:"The component is rendered in React but there is no visualization",id:"the-component-is-rendered-in-react-but-there-is-no-visualization",level:2},{value:"How to make Gosling visualizations responsive?",id:"how-to-make-gosling-visualizations-responsive",level:2}];function c(e){const s={a:"a",br:"br",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.p,{children:"A list of frequently asked questions about Gosling.js."}),"\n",(0,t.jsx)(s.h2,{id:"how-to-debug-gosling-specs",children:"How to debug gosling specs?"}),"\n",(0,t.jsx)(s.p,{children:"To check whether your gosling spec is valid, you can either"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["copy-and-paste your spec on the ",(0,t.jsx)(s.a,{href:"http://gosling.js.org",children:"online Editor"})," to see if there is any warning message."]}),"\n",(0,t.jsxs)(s.li,{children:["call a validation function ",(0,t.jsx)(s.code,{children:"console.log(gosling.validateGoslingSpec(yourSpec));"})]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"how-to-show-gosling-tooltips-that-are-hidden-under-other-components",children:"How to show Gosling Tooltips that are hidden under other components?"}),"\n",(0,t.jsx)(s.p,{children:"You can modify the z-index of the tooltip components to address this issue."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* override styles of tooltips */\n.track-mouseover-menu {\n z-index: 1;\n}\n"})}),"\n",(0,t.jsxs)(s.p,{children:["HiGlass defines the original ",(0,t.jsx)(s.a,{href:"https://github.com/higlass/higlass/blob/54f5aae61d3474f9e868621228270f0c90ef9343/app/styles/HiGlass.module.scss#L54",children:"CSS styles of the tooltips"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"the-component-is-rendered-in-react-but-there-is-no-visualization",children:"The component is rendered in React but there is no visualization"}),"\n",(0,t.jsx)("img",{src:"https://user-images.githubusercontent.com/44389194/136196719-abefef53-49e0-4ea5-8dae-a438fa6d5f33.png",alt:"bug_screenshot"}),"\n",(0,t.jsx)(s.p,{children:"For problems like this, please ensure that you have added the following style sheets in your base html file."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:'<head>\n ...\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\n <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/hglib.css">\n</head>\n'})}),"\n",(0,t.jsxs)(s.p,{children:["Please refer to ",(0,t.jsx)(s.a,{href:"./#use-goslingjs-in-react-app",children:"Use Gosling.js in React App"})," for more details."]}),"\n",(0,t.jsx)(s.h2,{id:"how-to-make-gosling-visualizations-responsive",children:"How to make Gosling visualizations responsive?"}),"\n",(0,t.jsxs)(s.p,{children:["To make Gosling visualizations responsive, you need to listen to the resize event and update the ",(0,t.jsx)(s.code,{children:"width"})," property accordingly.",(0,t.jsx)(s.br,{}),"\n","Below is an example in React app."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-javascript",children:'// Change the width upon resize event of the browser\nuseEffect(() =>
1 {\n window.addEventListener(\n "resize",\n debounce(() => {\n // this value is used to set `width` of a track when updating spec\n setVisPanelWidth( window.innerWidth ); \n }, 500) // wait for 500ms instead of updating right away\n );\n}, []);\n'})})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},28453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>r});var t=n(96540);const o={},i=t.createContext(o);function l(e){const s=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.