Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[draft] feat: onAltGoslingSpecUpdate callback function #48

Closed
wants to merge 5 commits into from
Closed

[draft] feat: onAltGoslingSpecUpdate callback function #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ca458f
working on onAltGoslingSpecUpdate
sehilyi Jan 23, 2025
f2eedd6
chore: add a demo and generate bulk for all examples
sehilyi Jan 28, 2025
bd2c534
wip testing gosling editor data
sehilyi Jan 28, 2025
c9f52be
chore: remote unused variables/imports
sehilyi Jan 28, 2025
09dde57
add generated descriptions
sehilyi Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
51 changes: 51 additions & 0 deletions demo/DemoBulkGeneration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React, { useState } from 'react';

import { AltGoslingComponent } from '../src/AltGoslingComponent';

import examples from './screenshots/index.ts';

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) {
console.log(exampleIdx);
setExampleIdx(exampleIdx + 1);
} else {
console.log(exampleIdx);
download("gosling-editor-examples.txt", output);
}
}}
/>
</>
);
}

export default Demo;
57 changes: 20 additions & 37 deletions demo/DemoFull.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,17 @@ import React, { useState } from 'react';

import { AltGoslingComponent } from '../src/AltGoslingComponent';

// simple examples
import { barChart } from './examples/barChart';
import { ideogramWithArea } from './examples/ideogram';
import { compareTwoSamples } from './examples/tonsil';
import { circularHalves } from './examples/circularHalves';
import { heatmap } from './examples/heatmap';

// multiple visual encodings
import { doubleMarks } from './examples/visualEncodingOverlay';
import { ruleMark } from './examples/ruleMark';
import { brush } from './examples/brush';

// complex examples
import { geneAnnotation } from './examples/geneAnnotation';
import { matrix } from './examples/matrix';

// MUI elements
import Grid from '@mui/material/Grid';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

import examples from './screenshots/index.ts';

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 [selectedExample, setSelectedExample] = useState<string>(Object.keys(examples)[0]);
const [selectedExampleName, setSelectedExampleName] = useState<string>(Object.keys(examples)[0]);

const ExampleOptions = () => {
return (
Expand All @@ -47,9 +21,9 @@ function Demo() {
<Select
aria-labelledby="example-options-radio-button"
defaultValue={Object.keys(examples)[0]}
value={selectedExample}
value={selectedExampleName}
name="example-options-radio-button"
onChange={(event) => setSelectedExample(event.target.value)}
onChange={(event) => setSelectedExampleName(event.target.value)}
>
{Object.keys(examples).sort().map(e => (
<MenuItem value={e}>{e}</MenuItem>
Expand All @@ -63,14 +37,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} />
</Grid>
</Grid>
</>
);
<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;
73 changes: 73 additions & 0 deletions demo/editor-examples/doc-examples/bed-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
}
]
}
]
};
68 changes: 68 additions & 0 deletions demo/editor-examples/doc-examples/brush.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
]
};
Loading