From 435d5d8d32843a328a724a20c4d8ec066b4098d8 Mon Sep 17 00:00:00 2001
From: Andrey Vasnetsov <andrey@vasnetsov.com>
Date: Tue, 20 Aug 2024 12:31:38 +0200
Subject: [PATCH] fix axios and allow umap visualization (#211)

* fix axios and allow umap visualization

* fmt
---
 .../FilterEditorWindow/config/RequestFromCode.js  |  4 ++--
 src/components/VisualizeChart/index.jsx           |  8 ++++++--
 src/components/VisualizeChart/worker.js           |  5 ++++-
 src/pages/Visualize.jsx                           | 15 ++++++++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/FilterEditorWindow/config/RequestFromCode.js b/src/components/FilterEditorWindow/config/RequestFromCode.js
index 27e9af7a..de2354e3 100644
--- a/src/components/FilterEditorWindow/config/RequestFromCode.js
+++ b/src/components/FilterEditorWindow/config/RequestFromCode.js
@@ -1,5 +1,5 @@
-import axios from 'axios';
 import { bigIntJSON } from '../../../common/bigIntJSON';
+import { axiosInstance } from '../../../common/axios';
 
 function parseDataToRequest(reqBody) {
   // Validate color_by
@@ -62,7 +62,7 @@ export async function requestFromCode(dataRaw, collectionName) {
 
 async function actionFromCode(collectionName, data, action) {
   try {
-    const response = await axios({
+    const response = await axiosInstance({
       method: 'POST',
       url: `collections/${collectionName}/points/${action || 'scroll'}`,
       data: data.reqBody,
diff --git a/src/components/VisualizeChart/index.jsx b/src/components/VisualizeChart/index.jsx
index 4b55901f..e88c7e7f 100644
--- a/src/components/VisualizeChart/index.jsx
+++ b/src/components/VisualizeChart/index.jsx
@@ -10,7 +10,7 @@ import { bigIntJSON } from '../../common/bigIntJSON';
 
 const SCORE_GRADIENT_COLORS = ['#EB5353', '#F9D923', '#36AE7C'];
 
-const VisualizeChart = ({ scrollResult }) => {
+const VisualizeChart = ({ scrollResult, algorithm = null }) => {
   const { enqueueSnackbar } = useSnackbar();
   const [openViewPoints, setOpenViewPoints] = useState(false);
   const [viewPoints, setViewPoint] = useState([]);
@@ -180,7 +180,10 @@ const VisualizeChart = ({ scrollResult }) => {
     };
 
     if (scrollResult.data.result?.points?.length > 0) {
-      worker.postMessage(scrollResult.data);
+      worker.postMessage({
+        ...scrollResult.data,
+        algorithm: algorithm,
+      });
     }
 
     return () => {
@@ -199,6 +202,7 @@ const VisualizeChart = ({ scrollResult }) => {
 
 VisualizeChart.propTypes = {
   scrollResult: PropTypes.object.isRequired,
+  algorithm: PropTypes.string,
 };
 
 export default VisualizeChart;
diff --git a/src/components/VisualizeChart/worker.js b/src/components/VisualizeChart/worker.js
index f7f8e755..27e3b3cf 100644
--- a/src/components/VisualizeChart/worker.js
+++ b/src/components/VisualizeChart/worker.js
@@ -6,6 +6,9 @@ const MESSAGE_INTERVAL = 200;
 
 self.onmessage = function (e) {
   let now = new Date().getTime();
+
+  const algorithm = e?.data?.algorithm || 'TSNE';
+
   const data1 = e.data;
   const data = [];
 
@@ -64,7 +67,7 @@ self.onmessage = function (e) {
     return;
   }
   if (data.length) {
-    const D = new druid['TSNE'](data, {}); // ex  params = { perplexity : 50,epsilon :5}
+    const D = new druid[algorithm](data, {}); // ex  params = { perplexity : 50,epsilon :5}
     const next = D.generator(); // default = 500 iterations
     let i = {};
     for (i of next) {
diff --git a/src/pages/Visualize.jsx b/src/pages/Visualize.jsx
index 294cd30b..1e518a4c 100644
--- a/src/pages/Visualize.jsx
+++ b/src/pages/Visualize.jsx
@@ -44,6 +44,8 @@ const query = `
 // - 'vector_name': specify which vector to use for visualization
 //                  if there are multiple.
 //
+// - 'algorithm': specify algorithm to use for visualization. Available options: 'TSNE', 'UMAP'.
+//
 // Minimal example:
 
 {
@@ -58,6 +60,7 @@ function Visualize() {
   const theme = useTheme();
   const [code, setCode] = useState(query);
   const [result, setResult] = useState(defaultResult);
+  const [algorithm, setAlgorithm] = useState('TSNE');
   // const [errorMessage, setErrorMessage] = useState(null); // todo: use or remove
   const navigate = useNavigate();
   const params = useParams();
@@ -70,6 +73,10 @@ function Visualize() {
   }, [height, VisualizeChartWrapper]);
 
   const onEditorCodeRun = async (data, collectionName) => {
+    if (data?.algorithm) {
+      setAlgorithm(data.algorithm);
+    }
+
     const result = await requestFromCode(data, collectionName);
     setResult(result);
   };
@@ -106,6 +113,12 @@ function Visualize() {
         type: 'string',
         nullable: true,
       },
+      algorithm: {
+        description: 'Algorithm to use for visualization',
+        type: 'string',
+        enum: ['TSNE', 'UMAP'],
+        default: 'TSNE',
+      },
     },
   });
 
@@ -146,7 +159,7 @@ function Visualize() {
                     </Paper>
                   </Box>
                   <Box ref={VisualizeChartWrapper} height={visualizeChartHeight} width={'100%'}>
-                    <VisualizeChart scrollResult={result} />
+                    <VisualizeChart scrollResult={result} algorithm={algorithm} />
                   </Box>
                 </Box>
               </Panel>