From 757cccad060137e6d4952fc98457e1da63d56128 Mon Sep 17 00:00:00 2001
From: Anukrati Mehta <anukratimehta@gmail.com>
Date: Tue, 20 Feb 2024 20:10:08 +0530
Subject: [PATCH] made explore page responsive

---
 web/src/App.jsx           |  20 +-
 web/src/pages/Explore.css | 185 +++++++++----
 web/src/pages/Explore.jsx | 565 +++++++++++++++++++-------------------
 3 files changed, 431 insertions(+), 339 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 5be532e..779f072 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -21,15 +21,17 @@ function App() {
     <Router basename={env.BASE_NAME}>
       <Nav />
       <div className="page">
-      <Routes>
-        {/* <Route path="/" element={isMobileDevice() ? <Mobile/> : <Home />} /> */}
-        <Route path="/" element={ <Home />} />
-        <Route path="/datasets/:dataset/explore/:scope" element={isMobileDevice() ? <Mobile/> : <Explore />} />
-        {readonly ? null : <Route path="/datasets/:dataset/setup" element={<Setup/>} />}
-        {readonly ? null : <Route path="/datasets/:dataset/setup/:scope" element={<Setup/>} />}
-        {readonly ? null : <Route path="/datasets/:dataset/jobs" element={<Jobs />} />}
-        {readonly ? null : <Route path="/datasets/:dataset/jobs/:job" element={<Job />} />}
-      </Routes>
+        <Routes>
+          {/* <Route path="/" element={isMobileDevice() ? <Mobile/> : <Home />} /> */}
+          <Route path="/" element={<Home />} />
+          {/* <Route path="/datasets/:dataset/explore/:scope" element={isMobileDevice() ? <Mobile/> : <Explore />} /> */}
+          <Route path="/datasets/:dataset/explore/:scope" element={<Explore />} />
+
+          {readonly ? null : <Route path="/datasets/:dataset/setup" element={<Setup />} />}
+          {readonly ? null : <Route path="/datasets/:dataset/setup/:scope" element={<Setup />} />}
+          {readonly ? null : <Route path="/datasets/:dataset/jobs" element={<Jobs />} />}
+          {readonly ? null : <Route path="/datasets/:dataset/jobs/:job" element={<Job />} />}
+        </Routes>
       </div>
     </Router>
 
diff --git a/web/src/pages/Explore.css b/web/src/pages/Explore.css
index 11eaaa8..0452a09 100644
--- a/web/src/pages/Explore.css
+++ b/web/src/pages/Explore.css
@@ -1,67 +1,93 @@
-.dataset--explore {
+.container {
   display: grid;
-  grid-template-columns: 548px 1fr; /* Left: 500px, Middle: 2/3 of remaining, Right: rest */
-  gap: 6px; /* This adds space between your columns */
-  height: 100%; 
+  grid-template-columns: 548px 1fr;
+  /* Left: 500px, Middle: 2/3 of remaining, Right: rest */
+  gap: 6px;
+  /* This adds space between your columns */
+  height: 100%;
   overflow: hidden;
 }
 
-.dataset--explore .column {
+.cluster {
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
   height: 100%;
 }
 
-.dataset--explore .first-row {
-  margin: 6px 12px;
-  padding: 6px;
-  height: 148px; /* Fixed height for the first row */
-  border: 1px solid lightgray;
-  border-radius: 5px;
+.data {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  height: 100%;
 }
 
-.dataset--explore .second-row {
+.umap-container {
   margin: 6px 12px;
-  /* flex-grow: 1; */
   height: 100%;
   overflow-y: hidden;
   min-height: 0;
 }
 
+.tab-tables {
+  margin: 6px 12px;
+  height: 100%;
+  overflow-y: hidden;
+  min-height: 0;
+}
 
 /* LEFT COLUMN */
 /* FIRST ROW: Dataset summary */
-.dataset--explore .summary {
+
+.summary {
   max-width: 500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  margin: 6px 12px;
+  padding: 16px;
+  height: 148px;
+  border: 1px solid lightgray;
+  border-radius: 5px;
 }
-.dataset--explore .summary h3 {
+
+.heading {
   margin: 0;
+  font-size: 1.17em;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-.dataset--explore .summary h3 a {
+
+.heading a {
   margin-left: 12px;
 }
-.dataset--explore .scope-card {
+
+.scope-card {
   display: flex;
   flex-direction: column;
 }
-.dataset--explore .scope-card .scope-selector {
+
+.scope-card .scope-selector {
   margin: 0 6px;
 }
-.dataset--explore .dataset-card {
+
+.dataset-card {
   display: flex;
   flex-direction: row;
   gap: 12px;
 }
 
 /* SECOND ROW: UMAP */
-.dataset--explore .umap-container {
-  /* max-height: 500px; */
-}
-.dataset--explore .scatters {
+
+.scatters {
   position: relative;
   border: 1px solid gray;
   border-radius: 5px;
@@ -69,30 +95,34 @@
 }
 
 /* THIRD ROW: hovered data point */
-.dataset--explore .hovered-point {
+.hovered-point {
   display: flex;
   flex-direction: column;
   padding: 6px;
 }
-.dataset--explore .hovered-point .key {
+
+.container .hovered-point .key {
   font-weight: bold;
 }
-.dataset--explore .hovered-point .value {
+
+.container .hovered-point .value {
   margin-left: 10px;
 }
 
 
 /* MIDDLE COLUMN */
-.dataset--explore .tab-tables {
+.container .tab-tables {
   /* padding: 12px 0; */
 
 }
+
 /* SECOND ROW: Tabs */
-.dataset--explore .tab-tables {
+.container .tab-tables {
   display: flex;
   flex-direction: column;
 }
-.dataset--explore .tab-header {
+
+.container .tab-header {
   height: 32px;
   background-color: #f1f1f1;
   border: 1px solid #ccc;
@@ -101,7 +131,8 @@
   cursor: pointer;
   transition: background-color 0.3s;
 }
-.dataset--explore .tab-header button {
+
+.container .tab-header button {
   height: 32px;
   display: inline-block;
   border: none;
@@ -109,15 +140,18 @@
   margin: 0;
   padding: 6px 24px;
 }
-.dataset--explore .tab-header button:hover {
+
+.container .tab-header button:hover {
   background-color: #ddd;
   border-color: none;
 }
-.dataset--explore .tab-header button:focus,
-.dataset--explore .tab-header button:focus-visible {
+
+.container .tab-header button:focus,
+.container .tab-header button:focus-visible {
   outline: none;
 }
-.dataset--explore .tab-header .tab-active {
+
+.container .tab-header .tab-active {
   background-color: white;
   border-top: 2px solid seagreen;
   border-bottom: none;
@@ -125,18 +159,20 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  .dataset--explore .tab-header {
+  .container .tab-header {
     background-color: #333;
   }
-  .dataset--explore .tab-header button:hover {
+
+  .container .tab-header button:hover {
     background-color: #333;
   }
-  .dataset--explore .tab-header .tab-active {
+
+  .container .tab-header .tab-active {
     background-color: #444;
   }
 }
 
-.dataset--explore .tab-content {
+.tab-content {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -144,60 +180,67 @@
   /* width: 650px; */
   /* flex-grow: 1; */
   height: calc(100% - 32px);
+  /* height: 100%; */
   overflow-y: auto;
   border: 1px solid lightgray;
   padding: 12px;
 }
 
 /* 
-.dataset--explore .tab-content table {
+.container .tab-content table {
   height: 100%;
 }
-.dataset--explore .tab-content table thead th {
+.container .tab-content table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
 }
-.dataset--explore .tab-content tbody {
+.container .tab-content tbody {
   display: block;
   max-height: 100%;
   overflow-y: scroll;
 } */
-/* .dataset--explore .tab-content tbody tr {
+/* .container .tab-content tbody tr {
 } */
 
 
-/* .dataset--explore .tab-active {
+/* .container .tab-active {
   color: seagreen;
   font-weight: bold;
   background-color: lightgray; 
 } */
 
 
-.dataset--explore .tags-box {
+.tags-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-evenly;
 }
-.dataset--explore .new-tag {
+
+.new-tag {
   margin: 6px 0;
 }
-.dataset--explore .new-tag form {
+
+.new-tag form {
   display: inline;
   width: 160px;
   border: 1px solid lightgray;
   padding: 7px;
 }
-.dataset--explore .new-tag input {
+
+.new-tag input {
   width: 60px;
 }
 
 /* Styling for nearest neighbors section */
-.dataset--explore .search-box input {
+.search-box input {
   /* height: 24px; */
   width: 350px;
 }
-.dataset--explore .search-box select {
+
+.search-box select {
   width: 358px;
 
 }
@@ -215,7 +258,49 @@
 /* SECOND ROW: Clusters */
 
 
-.dataset--explore .slide-bar {
+.slide-bar {
   padding: 6px;
   /* height: 100%; */
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    margin-top: 5px;
+  }
+
+  .data {
+    width: 100%
+  }
+
+  .data,
+  .cluster {
+    height: auto;
+    overflow-y: visible;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .container {
+    width: 100%;
+    padding: 5px;
+  }
+
+  .cluster {
+    width: 100%;
+    padding: 5px;
+  }
+
+  .summary {
+    height: auto;
+  }
+
+  .tab-content {
+    height: auto;
+    margin-top: 40px;
+  }
+
 }
\ No newline at end of file
diff --git a/web/src/pages/Explore.jsx b/web/src/pages/Explore.jsx
index 85d6968..02bfbaf 100644
--- a/web/src/pages/Explore.jsx
+++ b/web/src/pages/Explore.jsx
@@ -15,18 +15,20 @@ const scopeHeight = 500
 const apiUrl = import.meta.env.VITE_API_URL
 const readonly = import.meta.env.MODE == "read_only"
 
+
+
 function Explore() {
   const [dataset, setDataset] = useState(null);
-  const { dataset: datasetId, scope: scopeId } = useParams(); 
+  const { dataset: datasetId, scope: scopeId } = useParams();
 
   const navigate = useNavigate();
 
   // Tabs
   const tabs = [
-    { id: 0, name: "Selected"},
-    { id: 1, name: "Search"},
-    { id: 2, name: "Clusters"},
-    { id: 3, name: "Tags"},
+    { id: 0, name: "Selected" },
+    { id: 1, name: "Search" },
+    { id: 2, name: "Clusters" },
+    { id: 3, name: "Tags" },
   ]
   const [activeTab, setActiveTab] = useState(2)
 
@@ -39,7 +41,7 @@ function Explore() {
       });
   }, [datasetId, setDataset]);
 
-  const[ scopes, setScopes] = useState([]);
+  const [scopes, setScopes] = useState([]);
   useEffect(() => {
     fetch(`${apiUrl}/datasets/${datasetId}/scopes`)
       .then(response => response.json())
@@ -49,7 +51,7 @@ function Explore() {
   }, [datasetId, setScopes]);
 
 
-  const[ scope, setScope] = useState(null);
+  const [scope, setScope] = useState(null);
   useEffect(() => {
     fetch(`${apiUrl}/datasets/${datasetId}/scopes/${scopeId}`)
       .then(response => response.json())
@@ -80,7 +82,7 @@ function Explore() {
 
 
   useEffect(() => {
-    if(scope) {
+    if (scope) {
       setEmbedding(embeddings.find(e => e.id == scope.embedding_id))
       fetch(`${apiUrl}/datasets/${datasetId}/umaps/${scope.umap_id}`)
         .then(response => response.json())
@@ -110,7 +112,7 @@ function Explore() {
 
 
   useEffect(() => {
-    if(embedding) {
+    if (embedding) {
       setSearchModel(embedding.id)
     }
   }, [embedding, setSearchModel])
@@ -128,7 +130,7 @@ function Explore() {
   const [points, setPoints] = useState([]);
   const [loadingPoints, setLoadingPoints] = useState(false);
   useEffect(() => {
-    if(umap) {
+    if (umap) {
       fetch(`${apiUrl}/datasets/${dataset.id}/umaps/${umap.id}/points`)
         .then(response => response.json())
         .then(data => {
@@ -137,7 +139,7 @@ function Explore() {
         })
     }
   }, [dataset, umap])
-   
+
 
   const hydrateIndices = useCallback((indices, setter, distances = []) => {
     fetch(`${apiUrl}/indexed`, {
@@ -147,17 +149,17 @@ function Explore() {
       },
       body: JSON.stringify({ dataset: datasetId, indices: indices }),
     })
-    .then(response => response.json())
-    .then(data => {
-      if(!dataset) return;
-      let rows = data.map((row, index) => {
-        return {
-          index: indices[index],
-          ...row
-        }
+      .then(response => response.json())
+      .then(data => {
+        if (!dataset) return;
+        let rows = data.map((row, index) => {
+          return {
+            index: indices[index],
+            ...row
+          }
+        })
+        setter(rows)
       })
-      setter(rows)
-    })
   }, [dataset, datasetId])
 
 
@@ -191,7 +193,7 @@ function Explore() {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const [hovered, setHovered] = useState(null);
   useEffect(() => {
-    if(hoveredIndex !== null && hoveredIndex !== undefined) {
+    if (hoveredIndex !== null && hoveredIndex !== undefined) {
       hydrateIndices([hoveredIndex], (results) => {
         setHovered(results[0])
       })
@@ -202,11 +204,11 @@ function Explore() {
 
   const [hoveredCluster, setHoveredCluster] = useState(null);
   useEffect(() => {
-    if(hovered && clusterIndices.length && clusterLabels.length){
+    if (hovered && clusterIndices.length && clusterLabels.length) {
       const index = hovered.index
       const cluster = clusterIndices[index]
       const label = clusterLabels[cluster?.cluster]
-      setHoveredCluster({cluster: cluster.cluster, ...label})
+      setHoveredCluster({ cluster: cluster.cluster, ...label })
     } else {
       setHoveredCluster(null)
     }
@@ -214,7 +216,7 @@ function Explore() {
 
   const [hoverAnnotations, setHoverAnnotations] = useState([]);
   useEffect(() => {
-    if(hoveredIndex !== null && hoveredIndex !== undefined) {
+    if (hoveredIndex !== null && hoveredIndex !== undefined) {
       setHoverAnnotations([points[hoveredIndex]])
     } else {
       setHoverAnnotations([])
@@ -243,14 +245,14 @@ function Explore() {
 
   const [tagAnnotations, setTagAnnotations] = useState([]);
   useEffect(() => {
-    if(tagset[tag]) {
+    if (tagset[tag]) {
       const annots = tagset[tag].map(index => points[index])
       setTagAnnotations(annots)
     } else {
       setTagAnnotations([])
-      if(scatter && scatter.config) {
+      if (scatter && scatter.config) {
         scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
-      } 
+      }
     }
   }, [tagset, tag, points, scatter, setTagAnnotations])
 
@@ -283,14 +285,14 @@ function Explore() {
   const [slide, setSlide] = useState(null);
   const [slideAnnotations, setSlideAnnotations] = useState([]);
   useEffect(() => {
-    if(slide) {
+    if (slide) {
       const annots = slide.indices.map(index => points[index])
       setSlideAnnotations(annots)
     } else {
       setSlideAnnotations([])
-      if(scatter && scatter.config) {
+      if (scatter && scatter.config) {
         scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
-      } 
+      }
     }
   }, [slide, points, scatter, setSlideAnnotations])
 
@@ -333,25 +335,28 @@ function Explore() {
   if (!dataset) return <div>Loading...</div>;
 
   return (
-    <div className="dataset--explore">
-      <div className="column">
-        <div className="first-row summary">
+    <div className="container">
+      <div className="cluster">
+        <div className="summary">
           <div className="scope-card">
-            <h3> 
+            {/* <h3> */}
+            <div className='heading'>
               {/* {scope?.label || scope?.id} */}
 
               {datasetId}: <select className="scope-selector" onChange={(e) => {
-                  clearScope()
-                  navigate(`/datasets/${dataset?.id}/explore/${e.target.value}`)
-                }}>
+                clearScope()
+                navigate(`/datasets/${dataset?.id}/explore/${e.target.value}`)
+              }}>
+
                 {scopes.map((scopeOption, index) => (
                   <option key={index} value={scopeOption.id} selected={scopeOption.id === scope?.id}>
                     {scopeOption.label || scopeOption.id}
                   </option>
                 ))}
               </select>
-              {readonly ? null : <Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure</Link> }
-            </h3>
+              {readonly ? null : <Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure</Link>}
+            </div>
+            {/* </h3> */}
             <span>{scope?.description}</span>
             <span>Embeddings: {embedding?.model_id}</span>
             <span>{clusterLabels?.length} clusters</span>
@@ -360,295 +365,295 @@ function Explore() {
             <span>{dataset?.length} rows</span>
           </div>
         </div>
-        <div className="second-row">
-          <div className="umap-container">
-            <div className="scatters" style={{ width: scopeWidth, height: scopeHeight }}>
-            { points.length ? <><Scatter 
-                points={points} 
-                colors={memoClusterIndices}
-                loading={loadingPoints} 
-                width={scopeWidth} 
-                height={scopeHeight}
-                onScatter={setScatter}
-                onView={handleView} 
-                onSelect={handleSelected}
-                onHover={handleHover}
-                /> 
-              { hoveredCluster && hoveredCluster.hull && !scope.ignore_hulls ? <HullPlot
+        <div className="umap-container">
+          {/* <div className="umap-container"> */}
+          <div className="scatters" style={{ width: scopeWidth, height: scopeHeight }}>
+            {points.length ? <><Scatter
+              points={points}
+              colors={memoClusterIndices}
+              loading={loadingPoints}
+              width={scopeWidth}
+              height={scopeHeight}
+              onScatter={setScatter}
+              onView={handleView}
+              onSelect={handleSelected}
+              onHover={handleHover}
+            />
+              {hoveredCluster && hoveredCluster.hull && !scope.ignore_hulls ? <HullPlot
                 points={points}
                 hulls={[hoveredCluster?.hull]}
                 fill="lightgray"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} /> : null }
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight} /> : null}
 
-              { slide && slide.hull && !scope.ignore_hulls ? <HullPlot
+              {slide && slide.hull && !scope.ignore_hulls ? <HullPlot
                 points={points}
                 hulls={[slide?.hull]}
                 fill="darkgray"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} /> : null }
-              { clusterLabels.length && !scope.ignore_hulls ? <HullPlot
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight} /> : null}
+              {clusterLabels.length && !scope.ignore_hulls ? <HullPlot
                 points={points}
                 hulls={clusterLabels.map(d => d.hull)}
                 stroke="lightgray"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} /> : null }
-              <AnnotationPlot 
-                points={searchAnnotations} 
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight} /> : null}
+              <AnnotationPlot
+                points={searchAnnotations}
                 fill="black"
                 size="8"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} 
-                />
-              <AnnotationPlot 
-                points={slideAnnotations} 
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight}
+              />
+              <AnnotationPlot
+                points={slideAnnotations}
                 fill="darkred"
                 size="8"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} 
-                />
-              
-              <AnnotationPlot 
-                points={tagAnnotations} 
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight}
+              />
+
+              <AnnotationPlot
+                points={tagAnnotations}
                 symbol={tag}
                 size="20"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} 
-                />
-              <AnnotationPlot 
-                points={hoverAnnotations} 
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight}
+              />
+              <AnnotationPlot
+                points={hoverAnnotations}
                 stroke="black"
                 fill="orange"
                 size="16"
-                xDomain={xDomain} 
-                yDomain={yDomain} 
-                width={scopeWidth} 
-                height={scopeHeight} 
-                />
-              
-              </> : null }
-              
-            </div>
+                xDomain={xDomain}
+                yDomain={yDomain}
+                width={scopeWidth}
+                height={scopeHeight}
+              />
+
+            </> : null}
+
+            {/* </div> */}
           </div>
           <div className="hovered-point">
             {/* Hovered: &nbsp; */}
             {hovered && Object.keys(hovered).map((key) => (
               <span key={key}>
-                <span className="key">{key}:</span> 
+                <span className="key">{key}:</span>
                 <span className="value">{hovered[key]}</span>
               </span>
             ))}
-            {hoveredCluster ? <span><span className="key">Cluster {hoveredCluster.index}:</span><span className="value">{hoveredCluster.label}</span></span> : null }
+            {hoveredCluster ? <span><span className="key">Cluster {hoveredCluster.index}:</span><span className="value">{hoveredCluster.label}</span></span> : null}
             {/* <DataTable  data={hovered} tagset={tagset} datasetId={datasetId} onTagset={(data) => setTagset(data)} /> */}
           </div>
         </div>
       </div>
 
-      <div className="column">
-        <div className="second-row tab-tables">
-
-          <div className="tab-header">
-            {tabs.map(tab => (
-              <button 
-                key={tab.id} 
-                onClick={() => setActiveTab(tab.id)}
-                className={tab.id === activeTab ? 'tab-active' : 'tab-inactive'}>
-                  {tab.name}
-              </button>
-            ))}
+      <div className="data">
+        {/* <div className="tab-tables"> */}
+
+        <div className="tab-header">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={tab.id === activeTab ? 'tab-active' : 'tab-inactive'}>
+              {tab.name}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === 0 ?
+          <div className="tab-content">
+            <span>Selected: {selectedIndices?.length}
+              {selectedIndices?.length > 0 ?
+                <button className="deselect" onClick={() => {
+                  setSelectedIndices([])
+                  scatter?.select([])
+                  scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
+                }
+                }>X</button>
+                : null}
+            </span>
+            {selectedIndices?.length > 0 ?
+              <IndexDataTable
+                indices={selectedIndices}
+                clusterIndices={clusterIndices}
+                clusterLabels={clusterLabels}
+                tagset={tagset}
+                dataset={dataset}
+                maxRows={150}
+                onTagset={(data) => setTagset(data)}
+                onHover={handleHover}
+                onClick={handleClicked}
+              />
+              : null}
           </div>
+          : null}
+
+        {activeTab === 1 ?
+          <div className="tab-content">
+            <div className="search-box">
+              <form onSubmit={(e) => {
+                e.preventDefault();
+                searchQuery(e.target.elements.searchBox.value);
+                setActiveTab(1)
+              }}>
+                <input type="text" id="searchBox" />
+                <button type="submit">Similarity Search</button>
+                <br />
+                <label htmlFor="embeddingModel"></label>
+                <select id="embeddingModel"
+                  onChange={(e) => handleModelSelect(e.target.value)}
+                  value={searchModel}>
+                  {embeddings.map((emb, index) => (
+                    <option key={index} value={emb.id}>{emb.id} - {emb.model_id}</option>
+                  ))}
+                </select>
 
-            {activeTab === 0 ?
-            <div className="tab-content tab-selected">
-              <span>Selected: {selectedIndices?.length} 
-                {selectedIndices?.length > 0 ? 
-                  <button className="deselect" onClick={() => {
-                    setSelectedIndices([])
-                    scatter?.select([])
-                    scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
-                  }
-                  }>X</button> 
+              </form>
+            </div>
+            <span>
+              {searchIndices.length ? <span>Nearest Neighbors: {searchIndices.length} (capped at 150) </span> : null}
+              {searchIndices.length > 0 ?
+                <button className="deselect" onClick={() => {
+                  setSearchIndices([])
+                  document.getElementById("searchBox").value = "";
+                }
+                }>X</button>
                 : null}
-              </span>
-              {selectedIndices?.length > 0 ? 
-                <IndexDataTable 
-                  indices={selectedIndices}
-                  clusterIndices={clusterIndices}
-                  clusterLabels={clusterLabels}
-                  tagset={tagset} 
-                  dataset={dataset} 
-                  maxRows={150} 
-                  onTagset={(data) => setTagset(data)} 
-                  onHover={handleHover} 
-                  onClick={handleClicked}
-                  />
-              : null }
+            </span>
+            {searchIndices.length > 0 ?
+              <IndexDataTable
+                indices={searchIndices}
+                distances={distances}
+                clusterIndices={clusterIndices}
+                clusterLabels={clusterLabels}
+                tagset={tagset}
+                dataset={dataset}
+                onTagset={(data) => setTagset(data)}
+                onHover={handleHover}
+                onClick={handleClicked}
+              />
+              : null}
+          </div>
+          : null}
+
+        {activeTab === 2 ?
+          <div className="tab-content">
+            <div className="clusters-select">
+              <select onChange={(e) => {
+                const cl = clusterLabels.find(cluster => cluster.index === +e.target.value)
+                if (cl)
+                  setSlide(cl)
+              }} value={slide?.index}>
+                <option value="">Select a cluster</option>
+                {clusterLabels.map((cluster, index) => (
+                  <option key={index} value={cluster.index}>{cluster.index}: {cluster.label}</option>
+                ))}
+              </select>
             </div>
-            : null }
-
-            {activeTab === 1 ? 
-            <div className="tab-content tab-neighbors">
-              <div className="search-box">
+            <div className="cluster-selected">
+              {slide ?
                 <form onSubmit={(e) => {
                   e.preventDefault();
-                  searchQuery(e.target.elements.searchBox.value);
-                  setActiveTab(1)
+                  handleLabelUpdate(slide.index, clusterLabel);
                 }}>
-                  <input type="text" id="searchBox" />
-                  <button type="submit">Similarity Search</button>
-                  <br/>
-                  <label htmlFor="embeddingModel"></label>
-                  <select id="embeddingModel" 
-                    onChange={(e) => handleModelSelect(e.target.value)} 
-                    value={searchModel}>
-                    {embeddings.map((emb, index) => (
-                      <option key={index} value={emb.id}>{emb.id} - {emb.model_id}</option>
-                    ))}
-                  </select>
-                  
+                  <input
+                    type="text"
+                    id="new-label"
+                    value={clusterLabel}
+                    onChange={(e) => setClusterLabel(e.target.value)} />
+                  <button type="submit">Update Label</button>
                 </form>
-              </div>
-              <span>
-              { searchIndices.length ? <span>Nearest Neighbors: {searchIndices.length} (capped at 150) </span> : null }
-                {searchIndices.length > 0 ? 
-                  <button className="deselect" onClick={() => {
-                    setSearchIndices([])
-                    document.getElementById("searchBox").value = "";
-                  }
-                  }>X</button> 
                 : null}
+              <span>{slide?.indices.length} {slide?.indices.length ? "Rows" : ""}
+                {slide ? <button className="deselect" onClick={() => {
+                  setSlide(null)
+                }
+                }>X</button>
+                  : null}
               </span>
-              {searchIndices.length > 0 ?
-                <IndexDataTable 
-                  indices={searchIndices} 
-                  distances={distances}
+            </div>
+            <div className="cluster-table">
+              {slide?.indices ?
+                <IndexDataTable
+                  indices={slide?.indices}
                   clusterIndices={clusterIndices}
                   clusterLabels={clusterLabels}
-                  tagset={tagset} 
-                  dataset={dataset} 
-                  onTagset={(data) => setTagset(data)} 
-                  onHover={handleHover} 
+                  dataset={dataset}
+                  tagset={tagset}
+                  onTagset={(data) => setTagset(data)}
+                  onHover={handleHover}
                   onClick={handleClicked}
                 />
-              : null }
+                : null}
             </div>
-            : null }
-
-            {activeTab === 2 ? 
-             <div className="tab-content tab-cluster">
-              <div className="clusters-select">
-                <select onChange={(e) => {
-                    const cl = clusterLabels.find(cluster => cluster.index === +e.target.value)
-                    if(cl)
-                      setSlide(cl)
-                  }} value={slide?.index}>
-                    <option value="">Select a cluster</option>
-                  {clusterLabels.map((cluster, index) => (
-                    <option key={index} value={cluster.index}>{cluster.index}: {cluster.label}</option>
-                  ))}
-                </select>
+          </div>
+          : null}
+
+        {activeTab === 3 ?
+          <div className="tab-content">
+            <div className="tags-box">
+              <div className="tags-select">
+                Tags: {tags.map(t => {
+                  return <button className="dataset--tag-link" key={t} onClick={() => {
+                    setTag(t)
+                    setActiveTab(3)
+                    scatter?.zoomToPoints(tagset[t], { transition: true, padding: 0.2, transitionDuration: 1500 })
+                  }}>{t}({tagset[t].length})</button>
+                })}
               </div>
-              <div className="cluster-selected">
-                { slide ? 
-                  <form onSubmit={(e) => {
-                    e.preventDefault();
-                    handleLabelUpdate(slide.index, clusterLabel);
-                  }}>
-                    <input 
-                      type="text" 
-                      id="new-label" 
-                      value={clusterLabel} 
-                      onChange={(e) => setClusterLabel(e.target.value)}  />
-                    <button type="submit">Update Label</button>
-                  </form> 
-                : null }
-                <span>{slide?.indices.length} {slide?.indices.length ? "Rows" :""}
-                { slide ? <button className="deselect" onClick={() => {
-                    setSlide(null)
-                  }
-                  }>X</button> 
+              {readonly ? null : <div className="new-tag">
+                <form onSubmit={(e) => {
+                  e.preventDefault();
+                  const newTag = e.target.elements.newTag.value;
+                  fetch(`${apiUrl}/tags/new?dataset=${datasetId}&tag=${newTag}`)
+                    .then(response => response.json())
+                    .then(data => {
+                      console.log("new tag", data)
+                      setTagset(data);
+                    });
+                }}>
+                  <input type="text" id="newTag" />
+                  <button type="submit">New Tag</button>
+                </form>
+              </div>}
+            </div>
+            <span>{tag} {tagset[tag]?.length}
+              {tag ? <button className="deselect" onClick={() => {
+                setTag(null)
+              }
+              }>X</button>
                 : null}
-              </span>
-              </div>
-              <div className="cluster-table">
-                { slide?.indices ? 
-                  <IndexDataTable 
-                    indices={slide?.indices} 
-                    clusterIndices={clusterIndices}
-                    clusterLabels={clusterLabels}
-                    dataset={dataset} 
-                    tagset={tagset} 
-                    onTagset={(data) => setTagset(data)} 
-                    onHover={handleHover} 
-                    onClick={handleClicked}
-                  />
-                : null }
-                </div>
-              </div>
-            : null }
-
-            {activeTab === 3 ? 
-              <div className="tab-content tab-tag">
-                <div className="tags-box">
-                  <div className="tags-select">
-                    Tags: {tags.map(t => {
-                      return <button className="dataset--tag-link" key={t} onClick={() => {
-                        setTag(t)
-                        setActiveTab(3)
-                        scatter?.zoomToPoints(tagset[t], { transition: true, padding: 0.2, transitionDuration: 1500 })
-                      }}>{t}({tagset[t].length})</button>
-                    })}
-                  </div>
-                  {readonly ? null : <div className="new-tag">
-                    <form onSubmit={(e) => {
-                      e.preventDefault();
-                      const newTag = e.target.elements.newTag.value;
-                      fetch(`${apiUrl}/tags/new?dataset=${datasetId}&tag=${newTag}`)
-                        .then(response => response.json())
-                        .then(data => {
-                          console.log("new tag", data)
-                          setTagset(data);
-                        });
-                    }}>
-                      <input type="text" id="newTag" />
-                      <button type="submit">New Tag</button>
-                    </form>
-                  </div>}
-                </div>
-                <span>{tag} {tagset[tag]?.length}
-                  { tag ? <button className="deselect" onClick={() => {
-                      setTag(null)
-                    }
-                    }>X</button> 
-                  : null}
-                </span>
-                { tagset[tag] ? 
-                  <IndexDataTable 
-                    indices={tagset[tag]}
-                    clusterIndices={clusterIndices}
-                    clusterLabels={clusterLabels}
-                    tagset={tagset} 
-                    dataset={dataset} 
-                    onTagset={(data) => setTagset(data)} 
-                    onHover={handleHover} 
-                    onClick={handleClicked}
-                  />
-                : null }
-              </div>
-            : null }
-        </div>
+            </span>
+            {tagset[tag] ?
+              <IndexDataTable
+                indices={tagset[tag]}
+                clusterIndices={clusterIndices}
+                clusterLabels={clusterLabels}
+                tagset={tagset}
+                dataset={dataset}
+                onTagset={(data) => setTagset(data)}
+                onHover={handleHover}
+                onClick={handleClicked}
+              />
+              : null}
+          </div>
+          : null}
+        {/* </div> */}
       </div>
     </div>
   );