compare page for directly comparing two umaps

enjalot · Feb 29, 2024 · 96d1b5e · 96d1b5e
1 parent 14c01a1
commit 96d1b5e
Show file tree

Hide file tree

Showing 7 changed files with 793 additions and 5 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -2,6 +2,7 @@ import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import Mobile from './pages/Mobile';
 import Home from './components/Home';
 import Explore from './pages/Explore';
+import Compare from './pages/Compare';
 import Setup from './pages/Setup';
 import Jobs from './pages/Jobs';
 import Job from './pages/Job';
@@ -26,6 +27,7 @@ function App() {
           <Route path="/" element={<Home />} />
           {/* <Route path="/datasets/:dataset/explore/:scope" element={isMobileDevice() ? <Mobile/> : <Explore />} /> */}
           <Route path="/datasets/:dataset/explore/:scope" element={<Explore />} />
+          <Route path="/datasets/:dataset/compare/" element={<Compare/>} />
 
           {readonly ? null : <Route path="/datasets/:dataset/setup" element={<Setup />} />}
           {readonly ? null : <Route path="/datasets/:dataset/setup/:scope" element={<Setup />} />}

diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx
@@ -68,7 +68,7 @@ function DataTable({ data, tagset, datasetId, maxRows, onTagset, onHover, onClic
             onClick={() => onClick && onClick(row.index)}
             >
             {headers.map((header, idx) => 
-              <td key={idx}>{header == "url" ? <a href={row[header]}>url</a> : row[header]}</td>)}
+              <td key={idx}>{header.toLowerCase() == "url" && row[header] ? <a href={row[header]}>url</a> : row[header]}</td>)}
             {tags ? <td>
               {tags.map((tag, idx) => (
                 <button 

diff --git a/web/src/components/Scatter.jsx b/web/src/components/Scatter.jsx
@@ -14,6 +14,7 @@ ScatterPlot.propTypes = {
   colors: PropTypes.array,              // an array of integer values
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
+  pointScale: PropTypes.number,
   duration: PropTypes.number,
   onScatter: PropTypes.func,
   onView: PropTypes.func,
@@ -51,6 +52,7 @@ function ScatterPlot ({
   width, 
   height, 
   duration = 0,
+  pointScale = 1,
   onScatter,
   onView,
   onSelect,
@@ -115,7 +117,7 @@ function ScatterPlot ({
     const prevPoints = prevPointsRef.current;
     if(scatterplot && points && points.length){
 
-      const pointSize = calculatePointSize(points.length);
+      const pointSize = calculatePointSize(points.length) * pointScale;
       const opacity = calculatePointOpacity(points.length);
       // console.log("point size", pointSize, opacity)
       let pointColor = [250/255, 128/255, 114/255, 1] //salmon