diff --git a/taxonium_component/src/Deck.jsx b/taxonium_component/src/Deck.jsx index a9c6f1cf..eeeb91d5 100644 --- a/taxonium_component/src/Deck.jsx +++ b/taxonium_component/src/Deck.jsx @@ -44,6 +44,9 @@ function Deck({ deckRef, jbrowseRef, setAdditionalColorMapping, + mouseDownIsMinimap, + setMouseDownIsMinimap + }) { const zoomReset = view.zoomReset; const snapshot = useSnapshot(deckRef); @@ -75,7 +78,6 @@ function Deck({ ); const [treenomeReferenceInfo, setTreenomeReferenceInfo] = useState(null); - const [mouseDownIsMinimap, setMouseDownIsMinimap] = useState(false); const mouseDownPos = useRef(); @@ -109,6 +111,9 @@ function Deck({ y: event.nativeEvent.offsetY, radius: 10, }); + if (event._reactName === "onPointerUp") { + setMouseDownIsMinimap(false); + } if (event._reactName === "onPointerDown") { if (pickInfo && pickInfo.viewport.id === "minimap") { @@ -134,8 +139,10 @@ function Deck({ pickInfo.viewport.id === "minimap" && mouseDownIsMinimap ) { + onViewStateChange({ oldViewState: viewState, + specialMinimap:true, viewState: { ...viewState, target: [ diff --git a/taxonium_component/src/Taxonium.jsx b/taxonium_component/src/Taxonium.jsx index e974c874..f1da7b03 100644 --- a/taxonium_component/src/Taxonium.jsx +++ b/taxonium_component/src/Taxonium.jsx @@ -66,10 +66,11 @@ function Taxonium({ const deckRef = useRef(); const jbrowseRef = useRef(); + const [mouseDownIsMinimap, setMouseDownIsMinimap] = useState(false); const [deckSize, setDeckSize] = useState(null); const settings = useSettings({ query, updateQuery }); - const view = useView({ settings, deckSize, deckRef, jbrowseRef }); + const view = useView({ settings, deckSize, deckRef, jbrowseRef, mouseDownIsMinimap }); const url_on_fail = URL_ON_FAIL ? URL_ON_FAIL : null; @@ -194,6 +195,8 @@ function Taxonium({ isCurrentlyOutsideBounds={isCurrentlyOutsideBounds} treenomeState={treenomeState} deckRef={deckRef} + mouseDownIsMinimap={mouseDownIsMinimap} + setMouseDownIsMinimap={setMouseDownIsMinimap} jbrowseRef={jbrowseRef} setAdditionalColorMapping={setAdditionalColorMapping} /> diff --git a/taxonium_component/src/hooks/useView.jsx b/taxonium_component/src/hooks/useView.jsx index e864543f..88e47300 100644 --- a/taxonium_component/src/hooks/useView.jsx +++ b/taxonium_component/src/hooks/useView.jsx @@ -101,7 +101,7 @@ class MyOrthographicController extends OrthographicController { } } -const useView = ({ settings, deckSize, deckRef, jbrowseRef }) => { +const useView = ({ settings, deckSize, deckRef, jbrowseRef, mouseDownIsMinimap }) => { const [zoomAxis, setZoomAxis] = useState("Y"); const [xzoom, setXzoom] = useState(window.screen.width < 600 ? -1 : 0); globalSetZoomAxis = setZoomAxis; @@ -232,7 +232,10 @@ const useView = ({ settings, deckSize, deckRef, jbrowseRef }) => { oldViewState, basicTarget, overrideZoomAxis, + specialMinimap + }) => { + if (!deckSize) { return; } @@ -248,6 +251,11 @@ const useView = ({ settings, deckSize, deckRef, jbrowseRef }) => { const newScaleY = 2 ** newViewState.zoom; // eslint-disable-line no-unused-vars + if(mouseDownIsMinimap && !specialMinimap &&oldScaleY === newScaleY){ + + return; + } + let newScaleX = 2 ** xzoom; if (basicTarget) { newViewState.target[0] =