chore(editor): add a demo for comparing rendering approaches

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,24 @@
+import type { GoslingSpec } from "@gosling-lang/gosling-schema"
+import { alignmentWithText } from "./responsive-alignment"
+
+const commonProps = { width: 800, height: 250, xAxis: false, rowLegend: false, colorLegend: false };
+export const EX_SPEC_PERF_ALIGNMENT: GoslingSpec = {
+    zoomLimits: [1, 396],
+    xDomain: { interval: [350, 396] },
+    assembly: 'unknown',
+    views: [
+        {
+            tracks: [{
+                ...alignmentWithText(commonProps),
+                title: 'New Approach: Stretching Tiles',
+                experimental: { stretchGraphics: true },
+            }]
+        },
+        {
+            tracks: [{
+                ...alignmentWithText(commonProps),
+                title: 'Original Approach'
+            }]
+        }
+    ]
+};

editor/example/thumbnails.ts

@@ -15,6 +15,7 @@ import MARK_DISPLACEMENT from './thumbnails/MARK_DISPLACEMENT.png';
 import MATRIX_HFFC6 from './thumbnails/MATRIX_HFFC6.gif';
 import MATRIX from './thumbnails/MATRIX.png';
 import MOUSE_EVENT from './thumbnails/MOUSE_EVENT.png';
+import PERF_ALIGNMENT from './thumbnails/PERF_ALIGNMENT.png';
 import RESPONSIVE_COMPARATIVE_MATRICES from './thumbnails/RESPONSIVE_COMPARATIVE_MATRICES.gif';
 import RESPONSIVE_IDEOGRAM from './thumbnails/RESPONSIVE_IDEOGRAM.gif';
 import RESPONSIVE_MULTIVEC from './thumbnails/RESPONSIVE_MULTIVEC.gif';
@@ -48,6 +49,7 @@ export const THUMBNAILS = {
     MATRIX_HFFC6,
     MATRIX,
     MOUSE_EVENT,
+    PERF_ALIGNMENT,
     RESPONSIVE_COMPARATIVE_MATRICES,
     RESPONSIVE_IDEOGRAM,
     RESPONSIVE_MULTIVEC,