Skip to content

Commit

Permalink
Merge pull request #17 from gosling-lang/etowahadams/upgrade
Browse files Browse the repository at this point in the history 
feat: upgrade Gosling version
  • Loading branch information
@etowahadams
etowahadams authored Jun 5, 2024
2 parents a695b2b + fd01e06 commit 6e5a53a
Show file tree
Hide file tree
Showing 5 changed files with 414 additions and 806 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
"deploy": "yarn build; touch build/.nojekyll; gh-pages -d build -t --git git"
},
"dependencies": {
"gosling.js": "^0.9.30",
"higlass": "^1.12.3",
"pixi.js": "6.0.4",
"gosling.js": "^0.17.0",
"higlass": "^1.13.4",
"pixi.js": "6.5.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
Expand Down
210 changes: 114 additions & 96 deletions src/example/MouseEvents.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,124 @@
import React, { useEffect, useRef, useState } from 'react';
import { GoslingComponent } from 'gosling.js';
import React, { useEffect, useMemo, useRef, useState } from "react";
import { GoslingComponent } from "gosling.js";

function MouseEvents() {
const gosRef = useRef();
const [position, setPosition] = useState();
const [data, setData] = useState([]);

const gosRef = useRef();
const [position, setPosition] = useState();
const [data, setData] = useState([]);
useEffect(() => {
if (!gosRef.current) return;
const localRef = gosRef.current;

useEffect(() => {
if(!gosRef.current) return;
const localRef=gosRef.current
localRef.api.subscribe("click", (_, eventData) => {
const { genomicPosition: p } = eventData;
setPosition(`${p.chromosome}:${p.position}`);
setData(eventData.data);
});

localRef.api.subscribe('click', (_, eventData) => {
const { genomicPosition: p } = eventData;
setPosition(`${p.chromosome}:${p.position}`)
setData(eventData.data);
});
localRef.api.subscribe("rangeSelect", (_, eventData) => {
if (!eventData || !eventData.genomicRange) {
// range selection cleared
setPosition("N/A");
setData([]);
} else {
const { genomicRange: p } = eventData;
if (p.length === 2)
setPosition(
`${p[0].chromosome}:${p[0].position}-${p[1].chromosome}:${p[1].position}`
);
setData(
eventData.data.length > 10
? eventData.data.slice(0, 10)
: eventData.data
);
}
});
}, []);

localRef.api.subscribe('rangeSelect', (_, eventData) => {
if(!eventData || !eventData.genomicRange) {
// range selection cleared
setPosition('N/A');
setData([]);
} else {
const { genomicRange: p } = eventData;
if(p.length === 2) setPosition(`${p[0].chromosome}:${p[0].position}-${p[1].chromosome}:${p[1].position}`);
setData(eventData.data.length > 10 ? eventData.data.slice(0, 10) : eventData.data);
}
});
const goslingComponent = useMemo(
() => (
<GoslingComponent
ref={gosRef}
spec={{
xDomain: { chromosome: "chr3", interval: [52168000, 52890000] },
tracks: [
{
title: "Group Marks By Gene",
template: "gene",
data: {
url: "https://server.gosling-lang.org/api/v1/tileset_info/?d=gene-annotation",
type: "beddb",
genomicFields: [
{ index: 1, name: "start" },
{ index: 2, name: "end" },
],
valueFields: [
{ index: 5, name: "strand", type: "nominal" },
{ index: 3, name: "name", type: "nominal" },
],
exonIntervalFields: [
{ index: 12, name: "start" },
{ index: 13, name: "end" },
],
},
encoding: {
startPosition: { field: "start" },
endPosition: { field: "end" },
strandColor: { field: "strand", range: ["gray"] },
strandRow: { field: "strand" },
opacity: { value: 0.4 },
geneHeight: { value: 20 },
geneLabel: { field: "name" },
geneLabelFontSize: { value: 20 },
geneLabelColor: { field: "strand", range: ["gray"] },
geneLabelStroke: { value: "white" },
geneLabelStrokeThickness: { value: 4 },
geneLabelOpacity: { value: 1 },
type: { field: "type" },
},
tooltip: [{ field: "name", type: "nominal" }],
width: 600,
height: 60,
experimental: {
mouseEvents: {
mouseOver: true,
rangeSelect: true,
groupMarksByField: "name",
},
},
style: {
mouseOver: {
arrange: "behind",
color: "#E0E0E0",
stroke: "#E0E0E0",
strokeWidth: 4,
},
select: {
arrange: "behind",
color: "#B9D4FA",
stroke: "#B9D4FA",
strokeWidth: 4,
},
},
},
],
}}
/>
),
[]
);

return () => {
localRef.api.unsubscribe('click');
localRef.api.unsubscribe('rangeSelect');
}
}, []);

return (
<div>
<div style={{ marginTop: 30, marginLeft: 80 }}>
Selected Position: {position ? position : 'N/A'}
</div>
<GoslingComponent
ref={gosRef}
spec={{
style: {
outlineWidth: 0,
select: { color: 'grey' },
mouseOver: { stroke: 'black', strokeWidth: 1 }
},
xDomain: {chromosome: '1', interval: [136750, 139450]},
spacing: 0,
tracks: [
{
title: 'Click or mouse drag w/ ALT',
experimental: { mouseEvents: true },
data: {
type: 'bam',
url: 'https://somatic-browser-test.s3.amazonaws.com/SRR7890905_GAPFI2USVS21.bam',
indexUrl: 'https://somatic-browser-test.s3.amazonaws.com/SRR7890905_GAPFI2USVS21.bam.bai'
},
mark: 'rect',
dataTransform: [
{
type: 'displace',
method: 'pile',
boundingBox: {
startField: 'start',
endField: 'end',
padding: 5,
isPaddingBP: true
},
newField: 'pileup-row'
}
],
x: {field: 'start', type: 'genomic'},
xe: {field: 'end', type: 'genomic'},
color: { value: 'lightgrey' },
tooltip: [
{field: 'start', type: 'genomic'},
{field: 'end', type: 'genomic'},
{field: 'strand', type: 'nominal'},
],
row: {field: 'pileup-row', type: 'nominal', padding: 0.2},
width: 500,
height: 400
}
]
}}
experimental={{ reactive: true }}
/>
{data.length === 0 ? null : (<div className='mx-[60px]'>
<table className='table-fixed border-collapse border border-slate-400'>
<thead className='capitalize'>
<tr className='border border-slate-300 bg-slate-100'>{Object.keys(data[0]).map(d => <th className='px-1' key={d}>{d}</th>)}</tr>
</thead>
<tbody>
{data.map(d => <tr className='border border-slate-300' key={JSON.stringify(d)}>{Object.entries(d).map(datum => <td className='px-1' key={datum[0]}>{datum[1]}</td>)}</tr>)}
</tbody>
</table>
</div>)}
</div>
);
return (
<div>
<div style={{ marginTop: 30, marginLeft: 60 }}>
Hold down the alt or option key to select a range. <br />
Selected Position: <b>{position ? position : "N/A"}</b>
</div>
{goslingComponent}
{/* Rest of the code */}
</div>
);
}

export default MouseEvents;
1 change: 1 addition & 0 deletions src/example/Simple.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { GoslingComponent } from 'gosling.js';
function SimpleExample() {
return (
<>
<h1 style={{ marginLeft: '60px', marginTop: '60px'}}>Zoom and pan in the track below using your mouse and mouse wheel.</h1>
<GoslingComponent
spec={{
tracks: [{
Expand Down
1 change: 0 additions & 1 deletion src/example/WidgetEncoding.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const goslingSpec = (mark, layout, binSize) => {
layout,
arrangement: 'vertical',
centerRadius: 0.4,
xDomain: { chromosome: '1' },
style: {
select: { color: 'black', stroke: 'black', strokeWidth: 6, arrange: 'behind', opacity: 0.1 }
},
Expand Down
Loading

0 comments on commit 6e5a53a

Please sign in to comment.