[draft] feat: onAltGoslingSpecUpdate callback function

demo/DemoBulkGeneration.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+import { AltGoslingComponent } from '../src/AltGoslingComponent';
+
+// Editor examples
+import { examples as EditorExamples } from './editor-examples';
+const examples = {};
+Object.values(EditorExamples).forEach(ex => {
+    examples[ex.name] = ex.spec;
+});
+
+let output = '';
+console.log(Object.keys(examples).length);
+
+function download(filename: string, text: string) {
+    const element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+}
+
+function Demo() {
+    const [exampleIdx, setExampleIdx] = useState<number>(0);
+
+    return (
+        <>
+            <AltGoslingComponent
+                spec={Object.values(examples)[exampleIdx]}
+                download={true}
+                name={Object.keys(examples)[exampleIdx]}
+                onAltGoslingSpecUpdated={x => {
+                    output += `${Object.keys(examples)[exampleIdx]}\n\n`;
+                    output += `alt\n\n${x.alt}\n\n`;
+                    output += `fullDescription\n\n${x.fullDescription}\n\n`;
+                    output += `longDescription\n\n${x.longDescription}\n\n`;
+
+                    if (exampleIdx < Object.keys(examples).length - 1) {
+                        setExampleIdx(exampleIdx + 1);
+                    } else {
+                        // console.log(output);
+                        download("gosling-editor-examples.txt", output);
+                    }
+                }}
+            />
+        </>
+    );
+}
+
+export default Demo;

demo/DemoFull.tsx

@@ -27,17 +27,18 @@ import MenuItem from '@mui/material/MenuItem';
 
 
 function Demo() {
-    const examples = {'Bar chart': barChart,
-                      'Heatmap': heatmap,
-                      'Matrix': matrix,
-                      'Comparison of four samples': doubleMarks,
-                      'Annotated chart': ruleMark,
-                      'Comparing two samples': compareTwoSamples,
-                      'Linked views': brush,
-                      'Circular halves': circularHalves,
-                      'Gene annotations': geneAnnotation,
-                      'Ideogram expression': ideogramWithArea,
-                    };
+    const examples = {
+        'Bar chart': barChart,
+        'Heatmap': heatmap,
+        'Matrix': matrix,
+        'Comparison of four samples': doubleMarks,
+        'Annotated chart': ruleMark,
+        'Comparing two samples': compareTwoSamples,
+        'Linked views': brush,
+        'Circular halves': circularHalves,
+        'Gene annotations': geneAnnotation,
+        'Ideogram expression': ideogramWithArea,
+    };
     const [selectedExample, setSelectedExample] = useState<string>(Object.keys(examples)[0]);
 
     const ExampleOptions = () => {
@@ -63,14 +64,23 @@ function Demo() {
         <>
             <Grid container spacing={1}>
                 <Grid item aria-label='example checkbox' xs={12}>
-                    <ExampleOptions/>
+                    <ExampleOptions />
                 </Grid>
                 <Grid item aria-label='altgosling component' xs={12}>
-                    <AltGoslingComponent spec={examples[selectedExample]} download={true} name={selectedExample} />
+                    <AltGoslingComponent
+                        spec={examples[selectedExample]}
+                        download={true}
+                        name={selectedExample}
+                        onAltGoslingSpecUpdated={x => {
+                            console.log(x.alt);
+                            console.log(x.fullDescription);
+                            console.log(x.longDescription);
+                        }}
+                    />
                 </Grid>
             </Grid>
-       </>
-   );
+        </>
+    );
 }
 
-export default Demo;
+export default Demo;

demo/editor-examples/doc-examples/bed-demo.ts

@@ -0,0 +1,73 @@
+import type { GoslingSpec } from 'gosling.js';
+
+export const BED_DEMO: GoslingSpec = {
+    title: 'BED files',
+    subtitle: 'Demonstration of using BED files of different specifications',
+    layout: 'linear',
+    arrangement: 'vertical',
+    xDomain: { chromosome: 'chr1', interval: [1, 2000000] },
+    views: [
+        {
+            tracks: [
+                {
+                    title: 'BED12: All 12 standard fields',
+                    data: {
+                        url: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12.bed.gz',
+                        indexUrl: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12.bed.gz.tbi',
+                        type: 'bed'
+                    },
+                    mark: 'rect',
+                    x: { field: 'chromStart', type: 'genomic' },
+                    xe: { field: 'chromEnd', type: 'genomic' },
+                    size: { value: 10 },
+                    stroke: { value: 'black' },
+                    strokeWidth: { value: 1 }
+                },
+                {
+                    title: 'BED6: A file with the first 6 BED fields',
+                    data: {
+                        url: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED6.bed.gz',
+                        indexUrl: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED6.bed.gz.tbi',
+                        type: 'bed'
+                    },
+                    mark: 'rect',
+                    x: { field: 'chromStart', type: 'genomic' },
+                    xe: { field: 'chromEnd', type: 'genomic' },
+                    size: { value: 10 },
+                    stroke: { value: 'black' },
+                    strokeWidth: { value: 1 }
+                },
+                {
+                    title: 'BED6+6: A file with the first 6 BED fields, and 6 custom fields',
+                    data: {
+                        url: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12.bed.gz',
+                        indexUrl: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12.bed.gz.tbi',
+                        type: 'bed',
+                        customFields: ['col7', 'col8', 'col9', 'col10', 'col11', 'col12']
+                    },
+                    mark: 'rect',
+                    x: { field: 'col7', type: 'genomic' },
+                    xe: { field: 'col8', type: 'genomic' },
+                    size: { value: 10 },
+                    stroke: { value: 'black' },
+                    strokeWidth: { value: 1 }
+                },
+                {
+                    title: 'BED12+1: A file with all 12 standard fields, and a single extra custom field',
+                    data: {
+                        url: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12%2B1.bed.gz',
+                        indexUrl: 'https://s3.amazonaws.com/gosling-lang.org/data/bed/chr1_CDS_BED12%2B1.bed.gz.tbi',
+                        type: 'bed',
+                        customFields: ['col13']
+                    },
+                    mark: 'rect',
+                    x: { field: 'chromStart', type: 'genomic' },
+                    xe: { field: 'chromEnd', type: 'genomic' },
+                    size: { value: 10 },
+                    stroke: { value: 'black' },
+                    strokeWidth: { value: 1 }
+                }
+            ]
+        }
+    ]
+};

demo/editor-examples/doc-examples/brush.ts

@@ -0,0 +1,68 @@
+import type { GoslingSpec } from 'gosling.js';
+import { data } from './single-mark';
+
+export const BRUSH: GoslingSpec = {
+    title: 'Example: Brushing and Linking',
+    layout: 'linear',
+    tracks: [
+        {
+            width: 800,
+            height: 200,
+            data,
+            mark: 'line',
+            x: {
+                field: 'position',
+                type: 'genomic',
+                domain: {
+                    chromosome: 'chr1'
+                },
+                axis: 'top'
+            },
+            y: {
+                field: 'peak',
+                type: 'quantitative'
+            },
+            // create a rectangle brush
+            alignment: 'overlay',
+            tracks: [
+                {}, // this dummy object cannot be removed
+                {
+                    mark: 'brush',
+                    x: {
+                        linkingId: 'linking-with-brush'
+                    },
+                    color: {
+                        value: 'steelBlue'
+                    }
+                }
+            ]
+        },
+        {
+            width: 800,
+            height: 200,
+            data,
+            mark: 'line',
+            x: {
+                field: 'position',
+                type: 'genomic',
+                domain: {
+                    chromosome: 'chr1',
+                    interval: [200000000, 220000000]
+                },
+                axis: 'top',
+                linkingId: 'linking-with-brush'
+            },
+            y: {
+                field: 'peak',
+                type: 'quantitative'
+            },
+            opacity: {
+                value: 1
+            },
+            style: {
+                background: 'steelBlue',
+                backgroundOpacity: 0.1
+            }
+        }
+    ]
+};