From 52203c5a2da415bbe6048c84066d9f0c5fdc2c3f Mon Sep 17 00:00:00 2001 From: Jakub Szpila Date: Tue, 5 Jul 2022 16:34:23 +0100 Subject: [PATCH 01/17] WIP - replace gene selection, add autoscroll --- src/components/plots/ScrollOnDrag.jsx | 44 ++++++++++++ .../HierarchicalTreeGenes.jsx | 17 +++-- .../plots/styling/MarkerGeneSelection.jsx | 28 ++++---- .../plots-and-tables/marker-heatmap/index.jsx | 67 ++++++++----------- 4 files changed, 97 insertions(+), 59 deletions(-) create mode 100644 src/components/plots/ScrollOnDrag.jsx diff --git a/src/components/plots/ScrollOnDrag.jsx b/src/components/plots/ScrollOnDrag.jsx new file mode 100644 index 0000000000..8d3b340b75 --- /dev/null +++ b/src/components/plots/ScrollOnDrag.jsx @@ -0,0 +1,44 @@ +// find the Y position of an object in the document +// based on https://www.quirksmode.org/js/findpos.html +const findPos = (elem) => { + let posTop = 0; + + if (!elem.offsetParent) { + return; + } + // recursion to add .offsetTop of an object and all parents of the object + // until obj.offsetParent is undefined, needed to compare with event.clientY for drag event + do { + posTop += elem.offsetTop; + } while (elem = elem.offsetParent); + + return posTop; +}; + +const ScrollOnDrag = () => { + const treeScrollable = document.querySelector('div#ScrollWrapper'); + if (!treeScrollable) return; + + const treeTop = findPos(treeScrollable); + const treeHeight = treeScrollable.clientHeight; + let interval; + + const handleScrollOnDrag = (event) => { + const relY = event.clientY - treeTop; + + clearInterval(interval); + + // drag event ends with relY = -treeTop, currently hardcoded to ignore + if (relY < 10 && relY !== -treeTop) { + interval = setInterval(() => { treeScrollable.scrollTop -= 5; }, 20); + } + + if (relY > treeHeight - 10) { + interval = setInterval(() => { treeScrollable.scrollTop += 5; }, 20); + } + }; + + document.addEventListener('drag', handleScrollOnDrag); +}; + +export default ScrollOnDrag; diff --git a/src/components/plots/hierarchical-tree-genes/HierarchicalTreeGenes.jsx b/src/components/plots/hierarchical-tree-genes/HierarchicalTreeGenes.jsx index 13d9d31434..21c6438c80 100644 --- a/src/components/plots/hierarchical-tree-genes/HierarchicalTreeGenes.jsx +++ b/src/components/plots/hierarchical-tree-genes/HierarchicalTreeGenes.jsx @@ -12,7 +12,7 @@ const HierarchicalTreeGenes = (props) => { const onDrop = (info) => { const { - dragNode, node, dropPosition, dropToGap, + dragNode, dropPosition, dropToGap, } = info; // if dropped in place, ignore @@ -31,12 +31,15 @@ const HierarchicalTreeGenes = (props) => { if (!treeData) return ; return ( - + // wrapping in div needed to not unload dragged element when scrolling +
+ +
); }; diff --git a/src/components/plots/styling/MarkerGeneSelection.jsx b/src/components/plots/styling/MarkerGeneSelection.jsx index 7622997125..577f4ab1af 100644 --- a/src/components/plots/styling/MarkerGeneSelection.jsx +++ b/src/components/plots/styling/MarkerGeneSelection.jsx @@ -4,13 +4,15 @@ import { Space, Radio, InputNumber, - Select, Button, } from 'antd'; +import GeneReorderTool from 'components/plots/GeneReorderTool'; +import GeneSearchBar from 'components/plots/GeneSearchBar'; + const MarkerGeneSelection = (props) => { const { - config, onUpdate, onReset, onGeneEnter, + config, plotUuid, experimentId, searchBarUuid, onUpdate, onReset, } = props; const [numGenes, setNumGenes] = useState(config.nMarkerGenes); @@ -41,15 +43,14 @@ const MarkerGeneSelection = (props) => { return ( -

Type in a gene name and hit space or enter to add it to the heatmap.

-