Skip to content

Commit

Permalink
Merge pull request #132 from TeselaGen/multiViewTable
Browse files Browse the repository at this point in the history 
feat: add multi-view column functionality to DataTable for enhanced v…
  • Loading branch information
@tnrich
tnrich authored Jan 30, 2025
2 parents 7908250 + f47d69a commit 6d0654c
Show file tree
Hide file tree
Showing 5 changed files with 335 additions and 126 deletions.
329 changes: 210 additions & 119 deletions packages/ove/demo/src/SimpleCircularOrLinearViewDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Callout } from "@blueprintjs/core";

import { SimpleCircularOrLinearView } from "../../src";
import renderToggle from "./utils/renderToggle";
import { DataTable } from "@teselagen/ui";

const defaultState = {
hoverPart: false,
Expand All @@ -16,10 +17,61 @@ const defaultState = {
toggleNoRedux: false
};

const listOfABunchOfFeats = [
{
isVisible: true,
name: "Feature 1",
start: 5,
end: 15,
forward: true,
id: "feat1",
color: "blue"
},
{
isVisible: true,
name: "Feature 2",
start: 20,
end: 30,
forward: false,
id: "feat2",
color: "red"
},
{
isVisible: true,
name: "Feature 3",
start: 35,
end: 45,
forward: true,
id: "feat3",
color: "green"
},
{
isVisible: true,
name: "Feature 4",
start: 50,
end: 60,
forward: false,
id: "feat4",
color: "purple"
},
{
isVisible: true,
name: "Feature 5",
start: 65,
end: 75,
forward: true,
id: "feat5",
color: "orange"
}
];
export default class SimpleCircularOrLinearViewDemo extends React.Component {
constructor(props) {
super(props);
setupOptions({ that: this, defaultState, props });
this.state.recordIdToIsVisibleMap = listOfABunchOfFeats.reduce((acc, f) => {
acc[f.id] = f.isVisible;
return acc;
}, {});
}
componentDidUpdate() {
setParamsIfNecessary({ that: this, defaultState });
Expand All @@ -46,6 +98,11 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
type: "hoverPart",
label: "Toggle Part 1 Hover"
})}
{renderToggle({
that: this,
type: "featTableSelect",
label: "Toggle Feature Table Selection Example"
})}

{renderToggle({ that: this, type: "toggleSelection" })}
{renderToggle({ that: this, type: "limitLengthTo50Bps" })}
Expand Down Expand Up @@ -94,129 +151,150 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
<br />
<br />
</div>
<SimpleCircularOrLinearView
{...{
...this.state,
...(this.state.toggleNoRedux && { noRedux: true }),
...(this.state.hideNameAndInfo && { hideName: true }),
...(this.state.hoverPart && { hoveredId: "fakeId1" }),
...(this.state.changeSize && { height: 500, width: 500 }),
...(this.state.toggleSelection && {
selectionLayer: { start: 2, end: 30 }
}),
partClicked: () => {
window.toastr.success("Part Clicked!");
},
partRightClicked: () => {
window.toastr.success("Part Right Clicked!");
},

sequenceData: {
// annotationLabelVisibility: {
// parts: false,
// features: false,
// cutsites: false,
// primers: false
// },
// annotationVisibility: {
// axis: sequenceData.circular
// }
...(this.state.noSequence
? {
noSequence: true,
size: this.state.superLongSequence
? 1640
: this.state.limitLengthTo50Bps
? 50
: 164
}
: {
sequence: this.state.superLongSequence
? "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacacccccc"
: this.state.limitLengthTo50Bps
? "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAaga"
: "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacacccccc"
}),
...(this.state.isOligo
? {
isOligo: true
}
: {}),
...(this.state.isProtein
? {
isProtein: true
}
: {}),
name: "Test Seq",
circular: this.state.circular, //toggle to true to change this!
features: [
{
name: "Feat 1",
forward: true,
id: "fakeId2",
color: "green",
start: 1,
end: 70
},
{
name: "Feat 2",
id: "fakeId3",
color: "green",
start: 90,
end: 100
}
],
parts: [
{
name: "Part 1",
id: "fakeId1",
start: 10,
end: 20,
...(this.state.togglePartColor && { color: "override_red" })
},
<div style={{ display: "flex", flexDirection: "column" }}>
<SimpleCircularOrLinearView
{...{
...this.state,
...(this.state.toggleNoRedux && { noRedux: true }),
...(this.state.hideNameAndInfo && { hideName: true }),
...(this.state.hoverPart && { hoveredId: "fakeId1" }),
...(this.state.changeSize && { height: 500, width: 500 }),
...(this.state.toggleSelection && {
selectionLayer: { start: 2, end: 30 }
}),
partClicked: () => {
window.toastr.success("Part Clicked!");
},
partRightClicked: () => {
window.toastr.success("Part Right Clicked!");
},

...(this.state.withAdditionalParts
? [
sequenceData: {
// annotationLabelVisibility: {
// parts: false,
// features: false,
// cutsites: false,
// primers: false
// },
// annotationVisibility: {
// axis: sequenceData.circular
// }
...(this.state.noSequence
? {
noSequence: true,
size: this.state.superLongSequence
? 1640
: this.state.limitLengthTo50Bps
? 50
: 164
}
: {
sequence: this.state.superLongSequence
? "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacacccccc"
: this.state.limitLengthTo50Bps
? "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAaga"
: "GGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacaccccccGGGAAAagagagtgagagagtagagagagaccacacccccc"
}),
...(this.state.isOligo
? {
isOligo: true
}
: {}),
...(this.state.isProtein
? {
isProtein: true
}
: {}),
name: "Test Seq",
circular: this.state.circular, //toggle to true to change this!
features: this.state.featTableSelect
? listOfABunchOfFeats.filter(
f => this.state.recordIdToIsVisibleMap[f.id]
)
: [
{
name: "Additional Part 1",
id: "fakeId76",
start: 25,
end: 30,
...(this.state.togglePartColor && {
color: "override_red"
})
}
]
: []),
{
name: "Part 2",
id: "fakeId3",
overlapsSelf: true,
start: 25,
end: 30,
forward: true,
...(this.state.togglePartColor && {
color: "override_blue"
}),
...(this.state.partOverlapsSelf && { overlapsSelf: true })
},
...(this.state.withAdditionalParts
? [
name: "Feat 1",
forward: true,
id: "fakeId2",
color: "green",
start: 1,
end: 70
},
{
name: "Additional Part 2",
id: "fakeId1991",
start: 10,
end: 20,
...(this.state.togglePartColor && {
color: "override_red"
})
name: "Feat 2",
id: "fakeId3",
color: "green",
start: 90,
end: 100
}
]
: [])
]
}
}}
/>
],
parts: [
{
name: "Part 1",
id: "fakeId1",
start: 10,
end: 20,
...(this.state.togglePartColor && {
color: "override_red"
})
},

...(this.state.withAdditionalParts
? [
{
name: "Additional Part 1",
id: "fakeId76",
start: 25,
end: 30,
...(this.state.togglePartColor && {
color: "override_red"
})
}
]
: []),
{
name: "Part 2",
id: "fakeId3",
overlapsSelf: true,
start: 25,
end: 30,
forward: true,
...(this.state.togglePartColor && {
color: "override_blue"
}),
...(this.state.partOverlapsSelf && { overlapsSelf: true })
},
...(this.state.withAdditionalParts
? [
{
name: "Additional Part 2",
id: "fakeId1991",
start: 10,
end: 20,
...(this.state.togglePartColor && {
color: "override_red"
})
}
]
: [])
]
}
}}
/>
{this.state.featTableSelect && (
<DataTable
withCheckboxes
recordIdToIsVisibleMap={this.state.recordIdToIsVisibleMap}
setRecordIdToIsVisibleMap={recordIdToIsVisibleMap => {
this.setState({ recordIdToIsVisibleMap });
}}
isSimple
formName="featTableSelect"
entities={listOfABunchOfFeats}
schema={schema}
></DataTable>
)}
</div>
</div>

<br />
Expand Down Expand Up @@ -261,3 +339,16 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
);
}
}

const schema = {
fields: [
"name",
{
path: "color",
type: "string",
render: color => {
return <div style={{ height: 20, width: 20, background: color }} />;
}
}
]
};
Loading

0 comments on commit 6d0654c

Please sign in to comment.