Cleaning up

.gitignore

@@ -1,3 +1,7 @@
+users/**
+!users/eliza
+users-prod/**
+!users-prod/eliza
 .env*
 docs/**
 docs-prod/**

frontend/src/Components/Conversation.css

@@ -1,4 +1,3 @@
-
 .Conversation {
   display: flex;
   background-color: #F5F5F5;
@@ -12,3 +11,4 @@
   overflow-y: auto;
   height: calc(100vh - 72px);
 }
+

frontend/src/Components/VectorVisualizer.css

@@ -1,19 +1,13 @@
-/* .js-plotly-plot {
-  width: 100%;
-  height: 100%;
-}
 
-.js-plotly-plot .plotly  {
+.VectorVisualizer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  background-color: #F5F5F5;
+  border: 1px solid #E0E0E0;
+  font-size: 0.9rem;
+  margin: 0 auto;
+  padding: 10px;
+  position: relative;
   width: 100%;
-  height: 100%;
 }
-
-.js-plotly-plot .plotly .main-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.plotly .svg-container {
-  width: 100% !important;
-  height: 100% !important;
-} */

frontend/src/Components/VectorVisualizer.tsx

@@ -70,8 +70,8 @@ const config: Partial<Plotly.Config> = {
   showSendToCloud: false,
   staticPlot: false,
   frameMargins: 0,
-  scrollZoom: true,
-  doubleClick: "reset+autosize",
+  scrollZoom: false,
+  doubleClick: false,
   //   | "lasso2d"
   //   | "select2d"
   //   | "sendDataToCloud"
@@ -116,6 +116,7 @@ const config: Partial<Plotly.Config> = {
 
 const layout: Partial<Plotly.Layout> = {
   autosize: false,
+  clickmode: 'event+select',
   paper_bgcolor: '#FFFFFF', // white
   plot_bgcolor: '#FFFFFF',  // white plot background
   font: {
@@ -193,6 +194,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
   const [result, setResult] = useState<QuerySet | undefined>(undefined);
   const [view2D, setView2D] = useState<boolean>(true);
   const plotlyRef = useRef(null);
+  const boxRef = useRef<HTMLElement>(null);
   const [node, setNode] = useState<Node | null>(null);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -201,16 +203,24 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
   /* Force resize of Plotly as it tends to not be the correct size if it is initially rendered
    * off screen (eg., the VectorVisualizer is not on the tab the app loads to) */
   useEffect(() => {
-    requestAnimationFrame(() => {
-      const plotContainer = document.querySelector('.plot-container') as HTMLElement;
-      const svgContainer = document?.querySelector('.svg-container') as HTMLElement;
-      if ( plotContainer && svgContainer) {
-        const plotContainerRect = plotContainer.getBoundingClientRect();
-        svgContainer.style.width = `${plotContainerRect.width}px`;
-        svgContainer.style.height = `${plotContainerRect.height}px`;
-        setPlotDimensions({ width: plotContainerRect.width, height: plotContainerRect.height});
-      }
-    });
+    if (!boxRef.current) {
+      return;
+    }
+    const resize = () => {
+      requestAnimationFrame(() => {
+        const plotContainer = document.querySelector('.plot-container') as HTMLElement;
+        const svgContainer = document?.querySelector('.svg-container') as HTMLElement;
+        if (plotContainer && svgContainer) {
+          const plotContainerRect = plotContainer.getBoundingClientRect();
+          svgContainer.style.width = `${plotContainerRect.width}px`;
+          svgContainer.style.height = `${plotContainerRect.height}px`;
+          if (plotDimensions.width !== plotContainerRect.width || plotDimensions.height != plotContainerRect.height) {
+            setPlotDimensions({ width: plotContainerRect.width, height: plotContainerRect.height });
+          }
+        }
+      });
+    }
+    resize();
   });
 
   // Get the collection to visualize
@@ -237,7 +247,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
     };
 
     fetchCollection();
-  }, [result, setResult, setSnack, sessionId, view2D])  
+  }, [result, setSnack, sessionId, view2D])  
 
   useEffect(() => {
     if (!result || !result.embeddings) return;
@@ -365,12 +375,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
 
     setPlotData(data);
 
-  }, [result, querySet, view2D, setPlotData, setSnack]);
-
-  if (setSnack === undefined) {
-    console.error('setSnack function is undefined');
-    return null;
-  }
+  }, [result, querySet, view2D]);
 
   const handleKeyPress = (event: any) => {
     if (event.key === 'Enter') {
@@ -465,7 +470,8 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
   };
 
   return (
-    <Box className="VectorVisualizer Conversation"
+    <Box className="VectorVisualizer"
+      ref={boxRef}
       sx={{
         display: 'flex',
         position: 'relative',
@@ -507,7 +513,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
             control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
           <Plot
             ref={plotlyRef}
-            onClick={(event: any) => { onNodeSelected(event.points[0].customdata); }}
+            onClick={(event: any) => { console.log("click"); onNodeSelected(event.points[0].customdata); }}
             data={plotData}
             useResizeHandler={true}
             config={config}

frontend/src/Pages/VectorVisualizerPage.css

@@ -0,0 +1,15 @@
+
+.VectorVisualizerPage {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  background-color: #F5F5F5;
+  border: 1px solid #E0E0E0;
+  font-size: 0.9rem;
+  margin: 0 auto;
+  padding: 10px;
+  position: relative;
+  width: 100%;
+  max-width: 1024px;
+  height: calc(100vh - 72px);
+}

frontend/src/Pages/VectorVisualizerPage.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React from 'react';
 
 import { Scrollable } from '../Components/Scrollable';
 import { VectorVisualizer } from '../Components/VectorVisualizer';
 import { BackstoryPageProps } from '../Components/BackstoryTab';
 
+import './VectorVisualizerPage.css';
+
 interface VectorVisualizerProps extends BackstoryPageProps {
   inline?: boolean;
   rag?: any;
@@ -11,10 +13,10 @@ interface VectorVisualizerProps extends BackstoryPageProps {
 
 const VectorVisualizerPage: React.FC<VectorVisualizerProps> = (props: VectorVisualizerProps) => {
   return <Scrollable
+    className="VectorVisualizerPage"
     autoscroll={false}
     sx={{
-      maxWidth: "1024px",
-      height: "calc(100vh - 72px)",
+      overflowY: "scroll",
     }}
   >
     <VectorVisualizer {...props} />

src/tests/test-context.py

@@ -5,8 +5,6 @@ import os
 os.environ["TORCH_CPP_LOG_LEVEL"] = "ERROR"
 import warnings
 
-warnings.filterwarnings("ignore", message="Couldn't find ffmpeg or avconv")
-
 import ollama
 
 from ..utils import rag as Rag, Context, defines