From 5ca1f4f2d1a83d66e2f95f559a74d10d68f94b2f Mon Sep 17 00:00:00 2001 From: sehilyi Date: Thu, 27 Jun 2024 14:05:21 -0400 Subject: [PATCH] chore: small edits --- docs/FAQ.md | 8 +++----- docs/getting-started.md | 10 +++++----- docs/non-gos-vis.mdx | 10 +++++++--- docs/usage.md | 26 +++++++++++++++++--------- docs/user-interaction.mdx | 2 -- src/pages/index.js | 18 ++++-------------- 6 files changed, 36 insertions(+), 38 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 4b6e6f3..05b75d9 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -2,13 +2,11 @@ title: Frequently Asked Questions --- -A list of frequently asked questions about Gosling.js. - ## How to debug gosling specs? -To check whether your gosling spec is valid, you can either -- copy-and-paste your spec on the [online Editor](http://gosling.js.org) to see if there is any warning message. -- call a validation function `console.log(gosling.validateGoslingSpec(yourSpec));` +To check whether your gosling spec is valid, you can use either option. +- Copy and paste your spec on the [online Editor](http://gosling.js.org) to see if there is any warning message. +- Aall a validation function `console.log(gosling.validateGoslingSpec(yourSpec));`. ## How to show Gosling Tooltips that are hidden under other components? You can modify the z-index of the tooltip components to address this issue. diff --git a/docs/getting-started.md b/docs/getting-started.md index 88a1d61..dceb591 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -5,21 +5,21 @@ slug: / Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web. -To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), go through the [grammar guide](category/grammar-guide), and start building your own Gosling visualizations using the the [grammar reference](reference) and [Javascript API](js-api) documentation. +To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), go through the [grammar guide](category/grammar-guide), and start building your own Gosling visualizations using the the [grammar reference](reference) and [JavaScript API](js-api) documentation. Please see [usage guide](usage) to learn about all the contexts in which Gosling can be used. ## What is a grammar for data visualization? -Words are combined together into sentences based on their parts of speech and grammar rules. In a similar way, visual components (such as a coordinate axis, plot markers, and legend) have specific roles and are combined according to certain rules. You probably know these rules without realizing it! These roles and rules have been made explicit such as in the [Grammar of Graphics](https://link.springer.com/book/10.1007/0-387-28695-0). +Words are combined together into sentences based on their parts of speech and grammar rules. In a similar way, visual components (e.g., a coordinate axis, plot markers, and legends) have specific roles and are combined according to certain rules. You probably know these rules without realizing it! These roles and rules have been made explicit, such as in the [Grammar of Graphics](https://link.springer.com/book/10.1007/0-387-28695-0). Similarly, *genomic* data visualizations can be understood as being made up of components which follow a set of rules. The **Gosling grammar** formalizes these rules for genomic data visualizations. -How is the Gosling grammar used in practice? A Gosling visualization is defined using a **Gosling specification**, which is a JSON object. The structure and values within this JSON object are determined by the Gosling grammar. See the example below to see how parts of a Gosling specification corresponds to its visualization. +How is the Gosling grammar used in practice? A Gosling visualization is defined using a **Gosling specification**, which is a [JSON object](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON). The structure and values within this JSON object are determined by the Gosling grammar. See the example below to see how parts of a Gosling specification corresponds to its visualization. -## Javascript API +## JavaScript API -**Gosling.js** takes the Gosling specification as an input and creates the visualization defined by it. You can programmatically interact with this visualization using **Javascript API functions**. +**Gosling.js** takes the Gosling specification as an input and creates the visualization defined by it. You can programmatically interact with this visualization using [**JavaScript API functions**](js-api). For example, you can use an API function to make the visualization zoom to a particular genomic position, or you can subscribe to click events in the visualization. This is useful to building your own interactive visualizations with Gosling! \ No newline at end of file diff --git a/docs/non-gos-vis.mdx b/docs/non-gos-vis.mdx index 515cc92..c76a07b 100644 --- a/docs/non-gos-vis.mdx +++ b/docs/non-gos-vis.mdx @@ -5,18 +5,22 @@ title: Integrating non-Gosling visualizations import {TableWrapper} from '@site/react-components/DocComponments/table' import GoslingSchema from './assets/gosling.schema.json' -# Integrating non-Gosling visualizations +# Integrating Non-Gosling Visualizations -You may want to visualize a non-Gosling visualization within a Gosling visualization, such as showing a lineage tree along with multiple sequences. +You may want to visualize a non-Gosling visualization **within** a Gosling visualization, such as showing a lineage tree along with multiple sequences. In Gosling, you can do this by using `DummyTrack` as a placeholder to create space for your non-Gosling visualization. -Your non-Gosling visualization can then be overlaid on top of the `DummyTrack` using [JS API functions](./js-api) to +Your non-Gosling visualization can then be overlaid on top of the `DummyTrack` using [JS API functions](js-api) to get the position of the placeholder. :::caution `DummyTrack` can only be used with a linear `layout` at the moment. ::: +::: +You can also find another example of using Gosling with [Vega-Lite](https://vega.github.io/vega-lite/) at https://github.com/gosling-lang/gosling-react-example +::: + [DummyTrack demo in the Editor](https://gosling-lang.github.io/gosling.js/?example=doc_dummy_track) Here's a `DummyTrack` specification example diff --git a/docs/usage.md b/docs/usage.md index fe21774..741419b 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -7,7 +7,7 @@ title: Usage Gosling can be used and deployed in a variety of contexts. - In the [online editor](#online-editor) -- In Python using [Gos](https://gosling-lang.github.io/gos/) +- In Python using the [Gos](https://gosling-lang.github.io/gos/) package - In a [HTML page](#html) - In a [React application](#react) @@ -15,18 +15,24 @@ Gosling can be used and deployed in a variety of contexts. You can visit the [online editor](https://gosling.js.org) to start trying Gosling immediately. -### Load a Gosling Spec From Your Github Gist +### Loading/Sharing Your Gosling Visualization + +If you want to share your Gosling visualization using the online editor with your fiends and collaborators, you use [GitHub Gist](https://gist.github.com/). 1. To load a spec you first have to create a gist with a file named gosling.js\* that specifies the spec. -1. You can additionally specify a `readme.md` file to describe your spec. -1. Also be sure to give your gist a fabulous title. It'll be shown in the gosling editor. - You can then open your visualization at http:///?gist=/. - - For example, https://gosling.js.org/?gist=wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3 +1. You can additionally specify a `readme.md` file to describe your spec. This will be shown as a side panel on the online editor. +1. Also, be sure to give your gist a fabulous title. It'll be shown in the gosling editor. +1. You can then open your visualization at http:///?gist=/. + +::: +Example: +- Demo: https://gosling.js.org/?gist=wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3 +- Gist: https://gist.github.com/wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3 +::: ## HTML -Gosling can be embedded directly into your HTML page by adding gosling.js and several other dependencies in script tags. +Gosling can be embedded directly into your HTML file by adding gosling.js and several other dependencies in script tags. ```html @@ -75,8 +81,10 @@ Gosling can be embedded directly into your HTML page by adding gosling.js and se ## React +::: Beginning with version 0.9.30, Gosling now supports React v18 (You can still use React v16 or v17). If you are using a Gosling version prior to 0.9.30, please continue to use React v16. +::: Install `gosling.js` and its dependent libraries: @@ -104,4 +112,4 @@ function App() { } ``` -Please visit [gosling-react](https://github.com/gosling-lang/gosling-react) to find detailed instruction on using React. +Please visit [gosling-react](https://github.com/gosling-lang/gosling-react-example) to find detailed instruction on using React. diff --git a/docs/user-interaction.mdx b/docs/user-interaction.mdx index df261db..4af441a 100644 --- a/docs/user-interaction.mdx +++ b/docs/user-interaction.mdx @@ -6,7 +6,6 @@ import {TableWrapper} from '@site/react-components/DocComponments/table' import GoslingSchema from './assets/gosling.schema.json' ## Zooming and Panning - Each visualization in Gosling supports the Zooming and Panning interaction. Users can zoom in/out a visualization using the scrolling up/down actions. @@ -32,7 +31,6 @@ Users can set the `static` property of all tracks at the root level or specify i ``` ## Linking Views - When views/tracks are linked, the zooming and panning performed in one view/track will be automatically applied to the linked views/tracks. diff --git a/src/pages/index.js b/src/pages/index.js index e2d57ab..15aed58 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -36,12 +36,12 @@ const features = [ ), }, { - title: 'Interactivity', + title: 'User Interaction', imageUrl: 'img/undraw_docusaurus_react.svg', description: ( <> - Gosling has intuitive and effective user interactions built in, including zooming and panning and brushing and linking. - This enables flexible visualizations that cover a wide range of visual analysis scenarios, like overview + detail views with brushes or comparative views. + Gosling has intuitive and effective user interactions built in, including zooming, panning, brushing, and linking. + This enables the creation of flexible visualizations that cover a wide range of visual analysis scenarios, like overview + detail views with brushes or comparative views. ), }, @@ -57,20 +57,10 @@ function Feature({ imageUrl, title, description }) { ); } -const dummyGosling = - {() => { - const { GoslingComponent } = require("gosling.js"); - return
- }} - - - const floatingWindow =

News