Merge pull request #2 from datavisyn/mp/clone_performance_v2

Update to latest master

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
     push:
         branches:
-            - master
+            - main
     pull_request:
 
 env:
@@ -20,8 +20,9 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 20
-            - run: yarn install
-            - run: yarn build-editor
+            - uses: pnpm/action-setup@v2
+            - run: pnpm install
+            - run: pnpm build-editor
               env:
                   NODE_OPTIONS: '--max_old_space_size=4096'
 
@@ -37,10 +38,11 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
-            - run: yarn install
+            - uses: pnpm/action-setup@v2
+            - run: pnpm install
             - run: |
-                yarn build-types # typecheck
-                yarn coverage
+                pnpm build-types # typecheck
+                pnpm coverage
               env:
                   NODE_OPTIONS: '--max_old_space_size=4096'
             - uses: codecov/codecov-action@v3
@@ -55,10 +57,11 @@ jobs:
             - uses: actions/setup-node@v3
               with:
                   node-version: 20
-            - run: yarn install
+            - uses: pnpm/action-setup@v2
+            - run: pnpm install
             - name: ESLint
-              run: yarn eslint src/ editor/
+              run: pnpm eslint src/ editor/
             - name: Assert schemas are all up to date
               run: |
-                  yarn schema
+                  pnpm schema
                   git diff --exit-code

.github/workflows/deploy-editor.yml

@@ -2,29 +2,47 @@ name: Deploy Editor
 
 on:
     push:
-        branches:
-            - master
+        branches: [main]
+    workflow_dispatch:
 
-jobs:
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+    group: 'pages'
+    cancel-in-progress: false
 
-    deploy:
+jobs:
+    Build:
         runs-on: ubuntu-latest
-        if: github.ref == 'refs/heads/master'
         steps:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
                   node-version: 20
-            - run: yarn install
-            - run: yarn build-editor
+            - uses: pnpm/action-setup@v2
+            - run: |
+                  pnpm install
+                  pnpm build-editor
+                  echo "gosling.js.org" >> build/CNAME
               env:
                   NODE_OPTIONS: '--max_old_space_size=8192'
-            - name: Deploy editor
-              run: |
-                  git config --global user.name "[email protected]"
-                  git config --global user.email "GitHub Action"
-                  git remote set-url origin https://${ACCESS_TOKEN}@github.com/${REPO}.git
-                  yarn deploy
-              env:
-                  ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-                  REPO: ${{ github.repository }}
+            - uses: actions/upload-pages-artifact@v2
+              with:
+                  path: build
+
+    Deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        needs: Build
+        runs-on: ubuntu-latest
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2

.github/workflows/release.yml

@@ -15,9 +15,10 @@ jobs:
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: yarn
-      - run: yarn build
-      - run: yarn publish
+      - uses: pnpm/action-setup@v2
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm publish --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.github/workflows/semantic-pull-request.yml

@@ -25,6 +25,7 @@ jobs:
             docs
             refactor
             test
+            perf
           # Configure which scopes are allowed.
           scopes: |
             core

.gitignore

@@ -17,6 +17,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 report.*
 *.swp
 *.swo

.yarnrc.yml

@@ -0,0 +1,5 @@
+checksumBehavior: update
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

CHANGELOG.md

@@ -1,3 +1,32 @@
+# [0.14.0](https://github.com/gosling-lang/gosling.js/compare/v0.13.2...v0.14.0) (2024-01-08)
+
+
+### Performance Improvements
+
+* **core:** stretch certain marks instead of redraw ([#1018](https://github.com/gosling-lang/gosling.js/issues/1018)) ([0b405ba](https://github.com/gosling-lang/gosling.js/commit/0b405ba4d912e988768a467668730b877a0b7a61)), closes [#1023](https://github.com/gosling-lang/gosling.js/issues/1023)
+
+
+
+## [0.13.2](https://github.com/gosling-lang/gosling.js/compare/v0.13.1...v0.13.2) (2023-12-19)
+
+
+### Features
+
+* **core:** export util functions for conversion to flat tracks ([#1016](https://github.com/gosling-lang/gosling.js/issues/1016)) ([85f0be1](https://github.com/gosling-lang/gosling.js/commit/85f0be1efcac6db4e2e3e95cb6665e544b1e91f1)), closes [#1017](https://github.com/gosling-lang/gosling.js/issues/1017)
+
+
+
+## [0.13.1](https://github.com/gosling-lang/gosling.js/compare/v0.13.0...v0.13.1) (2023-12-12)
+
+
+### Bug Fixes
+
+* **core:** editor deployment  ([#1010](https://github.com/gosling-lang/gosling.js/issues/1010)) ([afb8ae4](https://github.com/gosling-lang/gosling.js/commit/afb8ae46fff8d13b1cc6e5a8971dbcf8ea654504))
+* **core:** pnpm deploy ([#1009](https://github.com/gosling-lang/gosling.js/issues/1009)) ([8e51fbe](https://github.com/gosling-lang/gosling.js/commit/8e51fbe2f1cb37fb6de630aa41699e961ec2e8da))
+* **track:** Allows for tracks in stacked circular tracks to receive click events ([#1005](https://github.com/gosling-lang/gosling.js/issues/1005)) ([aea3a5d](https://github.com/gosling-lang/gosling.js/commit/aea3a5d8a5b700e9316cf6206cf5eaf4d1d9858d))
+
+
+
 # [0.13.0](https://github.com/gosling-lang/gosling.js/compare/v0.12.0...v0.13.0) (2023-12-04)
 
 

CONTRIBUTING.md

@@ -5,15 +5,15 @@ While contribution guidelines are loosely defined, we recommend to read the foll
 
 ## Getting Started
 
-We use Yarn (and not NPM) to manage dependencies in stable and consistent ways. 
+We use pnpm (and not NPM) to manage dependencies in stable and consistent ways. 
 
-After installing [Yarn](https://yarnpkg.com/getting-started/install), clone this repository and run the following commands to install all dependencies and run the Gosling.js editor locally. We recommend you use Node 20. 
+After installing [pnpm](https://pnpm.io/installation), clone this repository and run the following commands to install all dependencies and run the Gosling.js editor locally. We recommend you use Node 20. 
 
 ```sh
 git clone https://github.com/gosling-lang/gosling.js.git # Clone the repository to your current directory
 cd gosling.js                                            # Navigate to gosling repository
-yarn                                                     # Install dependencies 
-yarn start                                               # Start a local server running the Gosling online editor 
+pnpm install                                             # Install dependencies 
+pnpm start                                               # Start a local server running the Gosling online editor 
 ```
 
 Then, you can open http://localhost:3000/ in a web browser to test the online editor.
@@ -49,11 +49,11 @@ git commit -m 'docs: add details about commitlint in README.md'
 To learn more about the commitlint, please visit [conventional-changelog/commitlint](https://github.com/conventional-changelog/commitlint#what-is-commitlint).
 
 ## Opening Pull Requests
-We use the [commitlint](#commitlint) for the title of PR. So, if the title of PR is not following the commitlint conventions, [Semantic Pull Request](https://github.com/zeke/semantic-pull-requests) will complain about it, disallowing your PR to be merged. When your PR is accepted and merged into the master branch, the title of the PR will be recorded as a single commit message which will then added as a single item in [CHANGELOG.md](/CHANGELOG.md).
+We use the [commitlint](#commitlint) for the title of PR. So, if the title of PR is not following the commitlint conventions, [Semantic Pull Request](https://github.com/zeke/semantic-pull-requests) will complain about it, disallowing your PR to be merged. When your PR is accepted and merged into the main branch, the title of the PR will be recorded as a single commit message which will then added as a single item in [CHANGELOG.md](/CHANGELOG.md).
 
 ## Testing 
 
-Gosling.js uses [Vitest](https://vitest.dev/) for running tests. To run all of the tests, you can use the command `yarn test`. 
+Gosling.js uses [Vitest](https://vitest.dev/) for running tests. To run all of the tests, you can use the command `pnpm test`. 
 
 ## Testing Production Build Using Editor
 
@@ -62,9 +62,9 @@ It is sometimes necessary to test the production build of Gosling.js. This frequ
 To test this, you need to build the project first and then preview the production build.
 
 ```sh
-yarn build
-yarn build-editor
-yarn preview
+pnpm build
+pnpm build-editor
+pnpm preview
 ```
 
 ## Editing `gosling.js/embed`
@@ -74,7 +74,7 @@ used in [Observable notebooks](https://observablehq.com). You can start the deve
 via:
 
 ```sh
-yarn start-embed
+pnpm start-embed
 ```
 
 and open a new Observable notebook with a cell containing,
@@ -95,12 +95,12 @@ to get started.
 You may want to edit the grammar (e.g., rename properties) and test the updated grammar in the Online Editor. The Gosling's grammar is defined using TypeScript in a single file, [/src/core/gosling.schema.ts](/src/core/gosling.schema.ts). You can update this file to edit grammar. However, to test with Online Editor, you need to update [/src/core/gosling.schema.json](/src/core/gosling.schema.json) by running the following command:
 
 ```sh
-yarn schema
+pnpm schema
 ```
 
 This will create the `gosling.schema.json` file based on the `gosling.schema.ts`. The reason for updating the `*.json` file is that the Online Editor only compiles the gosling spec only if the specification is valid depending of the `gosling.schema.json`. Therefore, if you edit the grammar and do not update the `gosling.schema.json` file, the Online Editor will not compile the spec, showing an empty view.
 
-`gosling.schema.json` is updated everytime when you `commit` changes, so you do not have to run `yarn schema` by yourselves before the `commit`.
+`gosling.schema.json` is updated everytime when you `commit` changes, so you do not have to run `pnpm schema` by yourselves before the `commit`.
 
 ### Editing Grammar for Documentation
 Since `gosling.schema.json` is used to semi-automatically generate property tables in [Gosling Documentation](http://gosling-lang.org/docs), we highly recommend you to **provide comments** for added/modified grammar properties in `gosling.schema.ts`. These comments will be used to explain properties in the documentation (e.g., [BigWig Data](http://gosling-lang.org/docs/data#bigwig-no-higlass-server)).
@@ -141,8 +141,8 @@ If there is an example you would like to add to the editor example library, plea
 GitHub Action handles bumping the version of Gosling.js. The pattern looks like the following:
 
 ```
-yarn version --patch
-git push origin master --tags
+pnpm version patch # or minor or major
+git push origin main --tags
 ```
 
 # Internal Explanations  

README.md

@@ -60,4 +60,4 @@ We welcome and greatly appreciate your contribution to this project! Please read
 
 ## License
 
-This project is licensed under the terms of the [MIT license](https://github.com/gosling-lang/gosling.js/blob/master/LICENSE.md).
+This project is licensed under the terms of the [MIT license](https://github.com/gosling-lang/gosling.js/blob/main/LICENSE.md).

editor/Editor.tsx

@@ -1389,7 +1389,7 @@ function Editor(props: RouteComponentProps) {
                     <br />
                     <br />
                     <a
-                        href="https://github.com/gosling-lang/gosling.js/blob/master/CHANGELOG.md"
+                        href="https://github.com/gosling-lang/gosling.js/blob/main/CHANGELOG.md"
                         target="_blank"
                         rel="noopener noreferrer"
                     >
@@ -1398,7 +1398,7 @@ function Editor(props: RouteComponentProps) {
                     <br />
                     <br />
                     <a
-                        href="https://github.com/gosling-lang/gosling.js/blob/master/LICENSE.md"
+                        href="https://github.com/gosling-lang/gosling.js/blob/main/LICENSE.md"
                         target="_blank"
                         rel="noopener noreferrer"
                     >

editor/EditorPanel.tsx

@@ -111,7 +111,7 @@ function EditorPanel(props: {
             validate: true,
             schemas: [
                 {
-                    uri: 'https://raw.githubusercontent.com/gosling-lang/gosling.js/master/schema/gosling.schema.json',
+                    uri: 'https://raw.githubusercontent.com/gosling-lang/gosling.js/main/schema/gosling.schema.json',
                     fileMatch: ['*'],
                     schema: GoslingSchema
                 }

editor/example/index.ts

@@ -36,6 +36,7 @@ export type ExampleGroup =
     | 'Coordinated Multiple Views'
     | 'Applications'
     | 'Track Templates'
+    | 'Experimental'
     | 'Doc'
     | 'Unassigned';
 
@@ -75,6 +76,10 @@ export const ExampleGroups: {
         name: 'Track Templates',
         description: 'Built-in track templates that allow creating common tracks, like ideograms and gene annotations.'
     },
+    {
+        name: 'Experimental',
+        description: 'Examples that include experimental features, such as performance improvements.'
+    },
     {
         name: 'Doc',
         description: 'Examples used in the official documentation.'
@@ -412,6 +417,12 @@ export const editorExampleObj: {
         spec: JsonExampleSpecs.EX_SPEC_ALIGNMENT_CHART,
         image: THUMBNAILS.ALIGNMENT
     },
+    PERF_ALIGNMENT: {
+        group: 'Experimental',
+        name: 'Performance Comparison: Stretching Tiles',
+        spec: JsonExampleSpecs.EX_SPEC_PERF_ALIGNMENT,
+        image: THUMBNAILS.PERF_ALIGNMENT
+    },
     CORCES_ET_AL: {
         group: 'Coordinated Multiple Views',
         name: 'Corces et al. 2020',

editor/example/json-spec/index.ts

@@ -24,6 +24,7 @@ import { EX_SPEC_CYTOBANDS } from './ideograms';
 import { EX_SPEC_PILEUP } from './pileup';
 import { EX_SPEC_TEMPLATE } from './track-template';
 import { EX_SPEC_MOUSE_EVENT } from './mouse-event';
+import { EX_SPEC_PERF_ALIGNMENT } from './perf-alignment'
 import { EX_SPEC_DEBUG } from './debug';
 
 export const JsonExampleSpecs = {
@@ -42,6 +43,7 @@ export const JsonExampleSpecs = {
     EX_SPEC_RESPONSIVE_TRACK_WISE_COMPARISON,
     EX_SPEC_ALIGNMENT_CHART,
     EX_SPEC_RESPONSIVE_ALIGNMENT_CHART,
+    EX_SPEC_PERF_ALIGNMENT,
     EX_SPEC_MARK_DISPLACEMENT,
     EX_SPEC_CIRCULAR_OVERVIEW_LINEAR_DETAIL,
     EX_SPEC_SARS_COV_2,

editor/example/json-spec/perf-alignment.ts

@@ -0,0 +1,30 @@
+import type { GoslingSpec } from '@gosling-lang/gosling-schema';
+import { alignmentWithText } from './responsive-alignment';
+
+const commonProps = { width: 800, height: 400, xAxis: false, rowLegend: false, colorLegend: false };
+export const EX_SPEC_PERF_ALIGNMENT: GoslingSpec = {
+    zoomLimits: [1, 396],
+    xDomain: { interval: [350, 396] },
+    assembly: 'unknown',
+    title: 'Smoother Zoom',
+    subtitle: 'Rather than redrawing every element at every frame, we can scale existing elements',
+    views: [
+        {
+            tracks: [
+                {
+                    ...alignmentWithText(commonProps),
+                    title: 'New Approach: Stretching Tiles',
+                    experimental: { stretchGraphics: true }
+                }
+            ]
+        },
+        {
+            tracks: [
+                {
+                    ...alignmentWithText(commonProps),
+                    title: 'Original Approach'
+                }
+            ]
+        }
+    ]
+};