Skip to content

Commit

Permalink
feat: Jump linking table, virtualized tanstack table (#4)
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: Add sortable table

* feat: fix import

* chore: add TanStack Table Props interface and increase gosling.js version

* feat: add jump button to table

* feat: add linkageType for table (scroll, window, jump)

* feat: implement jump linkage

* fix: adapt to new gosling version

* feat: virtualize metadata table

* fix: Typescript issues

* chore: add default parameter for linkageType

* chore: add eslint rules
  • Loading branch information
@ThHarbig
ThHarbig authored Jun 25, 2024
1 parent ef3f5d1 commit 4754d64
Show file tree
Hide file tree
Showing 16 changed files with 1,145 additions and 490 deletions.
89 changes: 61 additions & 28 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,64 @@
module.exports = {
settings: {
react: {
version: "detect",
settings: {
react: {
version: "detect",
},
},
},
env: {
browser: true,
es2021: true
},
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
"prettier",
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
"prettier"
],
rules: {
'@typescript-eslint/no-unused-vars': "off",
}
env: {
browser: true,
es2021: true
},
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
"prettier",
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
"prettier"
],
rules: {
'prettier/prettier': 'warn',
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/prefer-for-of': 'error',
'@typescript-eslint/no-for-in-array': 'error',
'@typescript-eslint/no-require-imports': 'error',
'@typescript-eslint/no-empty-function': 'off', // we need this in HiGlass plugin track
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-namespace': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'no-unused-vars': 'off', // must disable the base rule as it can report incorrect errors
// https://www.executeprogram.com/blog/the-code-is-the-to-do-list
"no-warning-comments": ["error", {terms: ["xxx"], location: "anywhere"}],
'@typescript-eslint/no-unused-vars': [
'error',
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: true
}
],
// https://eslint.org/docs/rules/
'linebreak-style': ['error', 'unix'],
'no-console': ['error', {allow: ['warn', 'error']}],
'no-trailing-spaces': 'error',
'no-irregular-whitespace': ['error', {skipComments: true}],
'no-alert': 'error',
'prefer-const': 'error',
'no-case-declarations': 'warn',
'no-return-assign': 'error',
'no-useless-call': 'error',
'no-shadow': 'off', // 'error', // we could enable this later
'no-useless-concat': 'error',
"prefer-template": 'error'
}
}
50 changes: 29 additions & 21 deletions demo/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,39 @@ 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";
import GeneSpy from './GeneSpy';

// The full list of examples
const examples = {
IslandViewer: <IslandViewer/>,
GeneSpy: <GeneSpy/>,
}
IslandViewer: <IslandViewer />,
GeneSpy: <GeneSpy />
};

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>
);
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;
export default App;
40 changes: 18 additions & 22 deletions demo/GeneSpy.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {GoslingMetaComponent} from '../src/index.ts';
import { GoslingMetaComponent } from '../src/index.ts';

const gosId = 'gosID';
const goslingSpec = {
Expand All @@ -8,14 +8,14 @@ const goslingSpec = {
description: 'Idea: https://doi.org/10.1093/bioinformatics/bty459',
assembly: [['', 11000]],
arrangement: 'horizontal',
spacing:0,
spacing: 0,
static: true,
views: [
{
tracks: [
{
type: "dummy-track",
id: "tree",
type: 'dummy-track',
id: 'tree'
}
],
width: 350,
Expand All @@ -38,26 +38,22 @@ const goslingSpec = {
id: gosId,
row: {
field: 'Accession',
type: 'nominal',
type: 'nominal'
},
tracks: [
{
dataTransform: [
{type: 'filter', field: 'Strand', oneOf: ['+']}
],
dataTransform: [{ type: 'filter', field: 'Strand', oneOf: ['+'] }],
mark: 'triangleRight',
style: {align: 'right'},
x: {field: 'Gene start', type: 'genomic', axis: 'none'},
xe: {field: 'Gene end', type: 'genomic'}
style: { align: 'right' },
x: { field: 'Gene start', type: 'genomic', axis: 'none' },
xe: { field: 'Gene end', type: 'genomic' }
},
{
dataTransform: [
{type: 'filter', field: 'Strand', oneOf: ['-']}
],
dataTransform: [{ type: 'filter', field: 'Strand', oneOf: ['-'] }],
mark: 'triangleLeft',
style: {align: 'left'},
x: {field: 'Gene start', type: 'genomic'},
xe: {field: 'Gene end', type: 'genomic'}
style: { align: 'left' },
x: { field: 'Gene start', type: 'genomic' },
xe: { field: 'Gene end', type: 'genomic' }
}
],
height: 300
Expand All @@ -67,18 +63,18 @@ const goslingSpec = {
const metaSpec = {
type: 'tree',
data: {
url: 'https://s3.amazonaws.com/gosling-lang.org/data/GeneSpy/gene_spy_example.nwk',
type: 'nwk',
url: 'https://s3.amazonaws.com/gosling-lang.org/data/GeneSpy/gene_spy_tree.json',
type: 'json'
},
width: 400,
}
width: 400
};

export default function GeneSpy() {
return (
<GoslingMetaComponent
goslingSpec={goslingSpec}
metaSpec={metaSpec}
connectionType={{type: "strong", trackId: gosId, placeholderId: "tree"}}
connectionType={{ type: 'strong', trackId: gosId, placeholderId: 'tree' }}
/>
);
}
Loading

0 comments on commit 4754d64

Please sign in to comment.