fix axios and allow umap visualization

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,

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;

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) {

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>