Skip to content

Commit

Permalink
chore: adapt code to new API (#3)
Browse files Browse the repository at this point in the history 
* feat: add parent component for examples

* feat: add PhyloTree

* feat: write a wrapper for gosling component to avoid passing down the gosling ref

* fix: jsdocs

* feat: set states for track height and gosling height

* feat: create meta component wrapper

* feat: adapt table to new API

* feat: add very simple example to demonstrate track issue

* feat: adapt metatable to new events and fixed track ids

* feat: adapt code to new API

* feat: fix import

* chore: fix import in PhyloTree.tsx

* chore: adapt to review
  • Loading branch information
@ThHarbig
ThHarbig authored Jan 8, 2024
1 parent 75ef5b2 commit ef3f5d1
Show file tree
Hide file tree
Showing 12 changed files with 1,529 additions and 736 deletions.
317 changes: 28 additions & 289 deletions demo/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,293 +1,32 @@
import React from 'react';
import {GoslingMetaComponent} from '../src/index.ts';
import * as React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import IslandViewer from './IslandViewer';
import 'higlass/dist/hglib.css';
import GeneSpy from "./GeneSpy";

const islandData = {
data: {
type: 'csv',
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_islands.csv',
chromosomeField: 'Accession',
genomicFields: ['Island start', 'Island end']
},
x: {field: 'Island start', type: 'genomic'},
xe: {field: 'Island end', type: 'genomic'}
};
const detailID = 'detailedView';
const circularRadius = 200;
const centerRadius = 0.5;

const linearHeight = 120;
const linearSize = linearHeight / 6;

const goslingSpec = {
title: 'IslandViewer 4 (Bertelli et al. 2017)',
subtitle: 'Salmonella enterica subsp. enterica serovar Typhi Ty2, complete genome.',
description: 'Reimplementation of https://www.pathogenomics.sfu.ca/islandviewer/accession/NC_004631.1/',
assembly: [['NC_004631.1', 4791961]],
spacing: 50,
views: [
{
layout: 'circular',
static: true,
alignment: 'overlay',
spacing: 0.1,
tracks: [
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_GCcontent.csv',
type: 'csv',
separator: '\t',
genomicFields: ['Position']
},
y: {field: 'GCcontent', type: 'quantitative', range: [-250, 0], axis: 'none'},
mark: 'line',
size: {value: 0.5},
x: {field: 'Position', type: 'genomic'},
color: {
value: 'black'
}
},
{
experimental: {mouseEvents: true},
style: {outlineWidth: 1, outline: 'black'},
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_annotations.csv',
type: 'csv',
genomicFields: ['Gene start']
},
dataTransform: [
{
type: 'displace',
method: 'pile',
boundingBox: {
padding: 3.5,
startField: 'Gene start',
endField: 'Gene start'
},
newField: 'row'
}
],
y: {field: 'row', type: 'nominal', flip: true},
mark: 'point',
x: {field: 'Gene start', type: 'genomic'},
size: {value: 3},
color: {
field: 'Type',
type: 'nominal',
domain: ['Victors', 'BLAST', 'RGI', 'PAG'],
range: ['#460B80', '#A684EA', '#FF9CC1', '#FF9CC1']
}
},
{
...islandData,
row: {
field: 'Method',
domain: [
'Predicted by at least one method',
'IslandPath-DIMOB',
'SIGI-HMM',
'IslandPick',
'Islander'
],
type: 'nominal'
},
color: {
field: 'Method',
type: 'nominal',
domain: [
'Predicted by at least one method',
'IslandPath-DIMOB',
'SIGI-HMM',
'IslandPick',
'Islander'
],
range: ['#B22222', '#4169E1', '#FF8C00', '#008001', '#40E0D0']
},
mark: 'rect'
},
{
mark: 'brush',
x: {linkingId: 'detail'}
}
],
width: circularRadius * 2,
centerRadius: centerRadius
},
{
layout: 'linear',
xDomain: {chromosome: 'NC_004631.1', interval: [1000000, 1500000]},
linkingId: 'detail',
alignment: 'overlay',
tracks: [
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_genes.csv',
type: 'csv',
chromosomeField: 'Accession',
genomicFields: ['Gene start', 'Gene end']
},
id: detailID,
x: {field: 'Gene start', type: 'genomic'},
xe: {field: 'Gene end', type: 'genomic'},
y: {value: 5.5 * linearSize},
size: {value: linearSize},
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Strand', oneOf: ['1']}],
color: {value: '#E9967A'},
tooltip: [{field: 'Gene name', type: 'nominal', alt: 'Name'}]
},
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_genes.csv',
type: 'csv',
chromosomeField: 'Accession',
genomicFields: ['Gene start', 'Gene end']
},
x: {field: 'Gene start', type: 'genomic'},
xe: {field: 'Gene end', type: 'genomic'},
y: {value: 4.5 * linearSize},
size: {value: linearSize},
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Strand', oneOf: ['-1']}],
color: {value: '#87976E'},
tooltip: [{field: 'Gene name', type: 'nominal', alt: 'Name'}]
},
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_genes.csv',
type: 'csv',
chromosomeField: 'Accession',
genomicFields: ['Gene start', 'Gene end']
},
x: {field: 'Gene start', type: 'genomic'},
xe: {field: 'Gene end', type: 'genomic'},
y: {value: 5.5 * linearSize},
mark: 'text',
text: {field: 'Gene name', type: 'nominal'},
dataTransform: [{type: 'filter', field: 'Strand', oneOf: ['1']}],
color: {value: '#ffffff'},
visibility: [
{
operation: 'less-than',
measure: 'width',
threshold: '|xe-x|',
transitionPadding: 10,
target: 'mark'
}
]
},
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_genes.csv',
type: 'csv',
chromosomeField: 'Accession',
genomicFields: ['Gene start', 'Gene end']
},
x: {field: 'Gene start', type: 'genomic'},
xe: {field: 'Gene end', type: 'genomic'},
y: {value: 4.5 * linearSize},
mark: 'text',
text: {field: 'Gene name', type: 'nominal'},
dataTransform: [{type: 'filter', field: 'Strand', oneOf: ['-1']}],
color: {value: '#ffffff'},
visibility: [
{
operation: 'less-than',
measure: 'width',
threshold: '|xe-x|',
transitionPadding: 10,
target: 'mark'
}
]
},
{
...islandData,
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Method', oneOf: ['IslandPath-DIMOB']}],
y: {value: 0.5 * linearSize},
size: {value: linearSize},
color: {value: '#4169E1'}
},
{
...islandData,
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Method', oneOf: ['SIGI-HMM']}],
y: {value: 1.5 * linearSize},
size: {value: linearSize},
color: {value: '#FF8C00'}
},
{
...islandData,
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Method', oneOf: ['IslandPick']}],
y: {value: 2.5 * linearSize},
size: {value: linearSize},
color: {value: '#008001'}
},
{
...islandData,
mark: 'rect',
dataTransform: [{type: 'filter', field: 'Method', oneOf: ['Islander']}],
y: {value: 3.5 * linearSize},
size: {value: linearSize},
color: {value: '#40E0D0'}
},
{
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_annotations.csv',
type: 'csv',
genomicFields: ['Gene start']
},
dataTransform: [
{
type: 'displace',
method: 'pile',
boundingBox: {
padding: 3.5,
startField: 'Gene start',
endField: 'Gene start'
},
newField: 'row'
}
],
row: {field: 'row', type: 'nominal'},
mark: 'point',
x: {field: 'Gene start', type: 'genomic'},
size: {value: 3},
color: {
field: 'Type',
type: 'nominal',
domain: ['Victors', 'BLAST', 'RGI', 'PAG'],
range: ['#460B80', '#A684EA', '#FF9CC1', '#FF9CC1']
},
tooltip: [{field: 'Type', type: 'nominal', alt: 'Name'}]
}
],
width: circularRadius * 2,
height: linearHeight
}
]
};
const metaSpec = {
type: 'table',
dataTransform: [
{
type: "merge",
fields: ["Islands", "Annotations"],
mergeChar: "/",
newField: "Prediction Method",
}
],
width: 600,
genomicColumns: ['Gene start', 'Gene end'],
columns: ['Prediction Method', 'Gene name', 'Accnum', 'Product']
// The full list of examples
const examples = {
IslandViewer: <IslandViewer/>,
GeneSpy: <GeneSpy/>,
}

export default function App() {
return (
<GoslingMetaComponent
goslingSpec={goslingSpec}
metaSpec={metaSpec}
connectionType={{type: "weak", trackId: detailID}}
/>
);
function App() {
return (
<div className='flex flex-row h-full w-full'>
<div className='flex-none border-r-[1px]'>
<div className='font-bold font-lg m-3'>Examples</div>
<ol className='list-decimal list-inside divide-y divide-solid'>
{Object.entries(examples).map(entry => <li className='p-3' key={entry[0]}><Link className='hover:underline' to={`/${entry[0].replace(' ', '_')}`}>{entry[0]}</Link></li>)}
</ol>
</div>
<div className=''>
<Routes>
<Route path="/" element={examples.IslandViewer} />
{Object.entries(examples).map(entry => <Route key={entry[0]} path={`/${entry[0].replace(' ', '_')}`} element={entry[1]}/>)}
</Routes>
</div>
</div>
);
}

export default App;
Loading

0 comments on commit ef3f5d1

Please sign in to comment.