From 0d2a3b74a41fd86808b9607721dfbe756c29f4c6 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Fri, 24 Nov 2023 16:55:20 +0000 Subject: [PATCH] add product, add zoom --- .../src/components/GensploreView.jsx | 44 +- .../src/stories/Gensplore.stories.jsx | 932 +++++++++++++++++- 2 files changed, 949 insertions(+), 27 deletions(-) diff --git a/gensplore-component/src/components/GensploreView.jsx b/gensplore-component/src/components/GensploreView.jsx index 5312342..10b9b2a 100644 --- a/gensplore-component/src/components/GensploreView.jsx +++ b/gensplore-component/src/components/GensploreView.jsx @@ -22,7 +22,6 @@ import { ToastContainer, toast } from "react-toastify"; import SearchPanel from "../SearchPanel"; import { GiDna1 } from "react-icons/gi"; - function GensploreView({ genbankString, searchInput, setSearchInput, showLogo }) { const [searchPanelOpen, setSearchPanelOpen] = useState(false); const [zoomLevel, setRawZoomLevel] = useState(0); @@ -218,6 +217,7 @@ function GensploreView({ genbankString, searchInput, setSearchInput, showLogo }) const [lastSearch, setLastSearch] = useState(null); const [enableRC, setEnableRC] = useState(false); const [configModalOpen, setConfigModalOpen] = useState(false); + const [scrollToFeature, setScrollToFeature] = useState(null); useEffect(() => { if (!intSearchInput) return; @@ -234,6 +234,18 @@ function GensploreView({ genbankString, searchInput, setSearchInput, showLogo }) setLastSearch(intSearchInput); }, [intSearchInput, rowWidth]); + + useEffect(() => { + if (!scrollToFeature) return; + const row = Math.floor(scrollToFeature.start / rowWidth); + rowVirtualizer.scrollToIndex(row + 1, { align: "center" }); + + setScrollToFeature(null); + }, [scrollToFeature, rowWidth]); + + + + useEffect(() => { if (!annotSearchInput) return; const strippedAnnotInput = annotSearchInput.replace(/\s/g, ""); @@ -526,9 +538,15 @@ function GensploreView({ genbankString, searchInput, setSearchInput, showLogo }) Feature + + Product + Type + + + @@ -536,7 +554,12 @@ function GensploreView({ genbankString, searchInput, setSearchInput, showLogo }) {genbankData?.parsedSequence.features.map((feature, index) => ( - + + {feature.name} + { + feature.notes?.product?.join(", ") + } + {feature.type} + + + + diff --git a/gensplore-component/src/stories/Gensplore.stories.jsx b/gensplore-component/src/stories/Gensplore.stories.jsx index fd126e3..98f382e 100644 --- a/gensplore-component/src/stories/Gensplore.stories.jsx +++ b/gensplore-component/src/stories/Gensplore.stories.jsx @@ -8,35 +8,917 @@ export default { }; const Template = (args) => ;