Add WIP map view

.gitignore

@@ -16,3 +16,4 @@ taxonium_component/storybook-static/**
 **/*.egg-info/**
 **/*.pyc
 **/_version.py
+node_modules

taxonium_component/src/Deck.jsx

@@ -3,7 +3,6 @@ import React, { useState, useCallback, useRef } from "react";
 import DeckGL from "@deck.gl/react";
 import { View } from "@deck.gl/core";
 import useLayers from "./hooks/useLayers";
-import JBrowsePanel from "./components/JBrowsePanel";
 import { ClipLoader } from "react-spinners";
 import {
   CircularProgressbarWithChildren,
@@ -19,9 +18,9 @@ import DeckSettingsModal from "./components/DeckSettingsModal";
 import { TreenomeButtons } from "./components/TreenomeButtons";
 import TreenomeModal from "./components/TreenomeModal";
 import FirefoxWarning from "./components/FirefoxWarning";
-import { JBrowseErrorBoundary } from "./components/JBrowseErrorBoundary";
-import ColorSettingModal from "./components/ColorSettingModal";
 import Key from "./components/Key";
+import ColorSettingModal from "./components/ColorSettingModal";
+import TreenomeBrowser from "./components/TreenomeBrowser";
 
 const MemoizedKey = React.memo(Key);
 
@@ -359,12 +358,7 @@ function Deck({
             }}
           >
             <span ref={jbrowseRef}>
-              <JBrowseErrorBoundary>
-                <JBrowsePanel
-                  treenomeState={treenomeState}
-                  settings={settings}
-                />
-              </JBrowseErrorBoundary>
+              <TreenomeBrowser state={treenomeState} settings={settings} />
               <TreenomeModal
                 treenomeSettingsOpen={treenomeSettingsOpen}
                 setTreenomeSettingsOpen={setTreenomeSettingsOpen}
@@ -384,7 +378,59 @@ function Deck({
             settings={settings}
           />
         </View>
-        <View id="main"></View>
+
+        <View id="map">
+          <div
+            id="map-div"
+            key={crypto.randomUUID()}
+            style={{
+              width: "100%",
+              height: "100%",
+              borderLeftWidth: "1px",
+              borderColor: "black",
+              borderStyle: "solid",
+              position: "relative",
+              zIndex: 2,
+            }}
+          ></div>
+        </View>
+
+        <View id="main">
+          <NodeHoverTip
+            hoverInfo={hoverInfo}
+            hoverDetails={hoverDetails}
+            colorHook={colorHook}
+            colorBy={colorBy}
+            config={config}
+            filterMutations={settings.filterMutations}
+            deckSize={deckSize}
+          />
+          <TreenomeMutationHoverTip
+            hoverInfo={hoverInfo}
+            hoverDetails={hoverDetails}
+            colorHook={colorHook}
+            colorBy={colorBy}
+            config={config}
+            treenomeReferenceInfo={treenomeReferenceInfo}
+          />
+          <MemoizedKey
+            keyStuff={keyStuff}
+            colorByField={colorBy.colorByField}
+            colorByGene={colorBy.colorByGene}
+            colorByPosition={colorBy.colorByPosition}
+            config={config}
+          />
+          <DeckButtons
+            zoomReset={zoomReset}
+            zoomIncrement={zoomIncrement}
+            zoomAxis={zoomAxis}
+            setZoomAxis={setZoomAxis}
+            snapshot={snapshot}
+            loading={data.status === "loading"}
+            requestOpenSettings={() => setDeckSettingsOpen(true)}
+            settings={settings}
+          />
+        </View>
       </DeckGL>
     </div>
   );

taxonium_component/src/components/SearchPanel.jsx

@@ -317,6 +317,33 @@ function SearchPanel({
               </button>
             </span>
           )}
+        {<br />}
+        {true && (
+          <span>
+            <span className="text-gray-500 text-sm">Map View:</span>
+            <input
+              name="mapEnabled"
+              style={{ verticalAlign: "middle" }}
+              type="checkbox"
+              className="m-3 inline-block"
+              checked={settings.mapViewOpen}
+              onChange={(e) => {
+                settings.setMapOpenAndToast(!settings.mapViewOpen);
+              }}
+            />
+            <button
+              style={{ cursor: "default" }}
+              data-tip="Display a map with points corresponding to the location a sample was collected."
+              data-html={true}
+            >
+              <span
+                style={{ display: "inline-block", verticalAlign: "middle" }}
+              >
+                <BsQuestionCircle />
+              </span>
+            </button>
+          </span>
+        )}
       </div>
       <div className="py-3 space-y-2">
         <div className="flex space-x-2">

taxonium_component/src/components/TreenomeBrowser.jsx

@@ -0,0 +1,10 @@
+import JBrowsePanel from "./JBrowsePanel";
+import { JBrowseErrorBoundary } from "./JBrowseErrorBoundary";
+
+export default function TreenomeBrowser({ state, settings }) {
+  return (
+    <JBrowseErrorBoundary>
+      <JBrowsePanel treenomeState={state} settings={settings} />
+    </JBrowseErrorBoundary>
+  );
+}