Everything is working

frontend/src/VectorVisualizer.css

@@ -1,6 +1,3 @@
-.Hover {
-  border: 3px solid purple !important;
-}
 /* .js-plotly-plot {
   width: 100%;
   height: 100%;

frontend/src/VectorVisualizer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
+import Paper from '@mui/material/Paper';
 import Plot from 'react-plotly.js';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
@@ -212,8 +212,6 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
       * filtered is for any item not in the querySet
       * query is for any item that is in the querySet
       */
-    console.log(querySet);
-
     full.ids.forEach((id, index) => {
       const foundIndex = querySet.ids.indexOf(id);
       /* Update metadata to hold the doc content and id */
@@ -222,7 +220,6 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
       if (foundIndex !== -1) {
         /* The query set will contain the distance to the query */
         full.metadatas[index].distance = querySet.distances ? querySet.distances[foundIndex] : undefined;
-        console.log(querySet.distances ? querySet.distances[foundIndex] : undefined);
         query.ids.push(id);
         query.documents.push(full.documents[index]);
         query.embeddings.push(full.embeddings[index]);
@@ -265,11 +262,6 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
     const query_y = normalizeDimension(query.embeddings.map((v: number[]) => v[1]));
     const query_z = is3D ? normalizeDimension(query.embeddings.map((v: number[]) => v[2])) : undefined;
 
-    query_sizes.forEach((s, i) => { console.log(`distance: ${query.metadatas[i].distance} size: ${s}`) });
-
-    // console.log(query_sizes.length, query_colors.length, query_x.length, query_y.length, query.ids.length, query.metadatas.length, query.embeddings.length);
-    // console.log(filtered_sizes.length, filtered_colors.length, filtered_x.length, filtered_y.length, filtered.ids.length, filtered.metadatas.length, filtered.embeddings.length);
-
     const data: any = [{
       name: 'All data',
       x: filtered_x,
@@ -407,7 +399,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
   };
 
   return (
-    <Card className="VectorVisualizer"
+    <Box className="VectorVisualizer Conversation"
       sx={{
         display: 'flex',
         position: 'relative',
@@ -418,127 +410,67 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
         border: "none",
         ...sx
       }}>
-      {
+      <Box sx={{ p: 0, m: 0, gap: 0 }}>
-        !inline &&
+        {
-        <Card sx={{ display: 'flex', flexDirection: 'column', flexGrow: 0, minHeight: '2.5rem', maxHeight: '2.5rem', height: '2.5rem', justifyContent: 'center', alignItems: 'center', m: 0, p: 0, mb: 1 }}>
+          !inline &&
-          RAG Vector Visualization
+          <Paper sx={{ display: 'flex', flexDirection: 'column', flexGrow: 0, minHeight: '2.5rem', maxHeight: '2.5rem', height: '2.5rem', justifyContent: 'center', alignItems: 'center', m: 0, p: 0, mb: 1 }}>
-        </Card>
+            RAG Vector Visualization
-      }
+          </Paper>
-      <Card sx={{ p: 0, m: 0, display: "flex", flexGrow: 1, position: "relative", flexDirection: isMobile ? "column" : "row" }}>
+        }
-        <Box sx={{ p: 0, m: 0, display: "flex", flexGrow: 1, position: "relative", flexDirection: "column" }}>
+        <Paper sx={{
-          <Card sx={{
+          p: 0.5, m: 0,
-            p: 0.5, m: 0.5,
+          display: "flex",
-            display: "flex",
+          flexGrow: 0,
-            flexGrow: 0,
+          height: isMobile ? "auto" : "320px",
-            height: isMobile ? "auto" : "320px",
+          minHeight: isMobile ? "auto" : "320px",
-            minHeight: isMobile ? "auto" : "320px",
+          maxHeight: isMobile ? "auto" : "320px",
-            maxHeight: isMobile ? "auto" : "320px",
+          position: "relative",
-            position: "relative",
+          flexDirection: "column"
-            flexDirection: "column"
+        }}>
-          }}>
+          <FormControlLabel
-            <FormControlLabel
+            sx={{
-              sx={{
-                display: "flex",
-                position: "relative",
-                width: "fit-content",
-                ml: 1,
-                mb: '-2.5rem',
-                zIndex: 100,
-                flexBasis: 0,
-                flexGrow: 0
-              }}
-              control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
-            <Plot
-              ref={plotlyRef}
-              onClick={(event: any) => { onNodeSelected(event.points[0].customdata); }}
-              data={plotData}
-              useResizeHandler={true}
-              config={{
-                responsive: true,
-                // displayModeBar: false,
-                displaylogo: false,
-                showSendToCloud: false,
-                staticPlot: false,
-              }}
-              style={{
-                display: "flex",
-                flexGrow: 1,
-                minHeight: '240px',
-                padding: 0,
-                margin: 0,
-                width: "100%",
-                height: "100%",
-                overflow: "hidden",
-              }}
-              layout={layout}
-            />
-          </Card>
-          {
-            !inline && querySet.ids.length > 0 && <Scrollable
-              autoscroll={false}
-              sx={{
               display: "flex",
               position: "relative",
-              width: "100%",
+              width: "fit-content",
+              ml: 1,
+              mb: '-2.5rem',
+              zIndex: 100,
+              flexBasis: 0,
+              flexGrow: 0
+            }}
+            control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
+          <Plot
+            ref={plotlyRef}
+            onClick={(event: any) => { onNodeSelected(event.points[0].customdata); }}
+            data={plotData}
+            useResizeHandler={true}
+            config={{
+              responsive: true,
+              // displayModeBar: false,
+              displaylogo: false,
+              showSendToCloud: false,
+              staticPlot: false,
+            }}
+            style={{
+              display: "flex",
               flexGrow: 1,
-              height: "max-content",
+              minHeight: '240px',
-              backgroundColor: "white",
+              padding: 0,
-            }}>
+              margin: 0,
-              <JsonView
+              width: "100%",
-                displayDataTypes={false}
+              height: "100%",
-                objectSortKeys={true}
+              overflow: "hidden",
-                collapsed={1}
+            }}
-                value={querySet}
+            layout={layout}
-                style={{
+          />
-                  padding: "14px 0",
+        </Paper>
-                  fontSize: "0.8rem",
-                  overflow: "hidden",
-                  width: "100%",
-                  minHeight: "max-content",
-                }}>
-                <JsonView.Row
-                  as="div"
-                  render={(props, { keyName, value, parentValue }) => {
-                    return (
-                      <div
-                        {...props}
-                        onClick={() => {
-                          if (typeof value === "string") {
-                            const id: string = value;
-                            /* Not sure why 'distance' isn't being tracked in customdata... */
-                            const item = plotData.customdata.find(m => m.id === id)
-                            if (item) {
-                              onNodeSelected(item);
-                            }
-                          }
 
-                          // console.log("keyName", keyName)
+        <Paper sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", mt: 0.5, p: 0.5, flexGrow: 1, minHeight: "fit-content" }}>
-                          // console.log("value", value)
+          {node !== null && 
-                          // console.log("parentValue", parentValue)
+            <Box sx={{ display: "flex", fontSize: "0.75rem", flexDirection: "column", minWidth: "25rem", flexBasis: 0, maxHeight: "min-content" }}>
-                        }}
+              <TableContainer component={Paper} sx={{ mb: isMobile ? 1 : 0, mr: isMobile ? 0 : 1 }}>
-                      />
-                    )
-                  }}
-                />
-              </JsonView>
-            </Scrollable>
-          }
-          {
-            !inline && querySet.ids.length === 0 && <Box sx={{ p: 1 }}>Enter query below to view distances.</Box>
-          }
-        </Box>
-
-        {<Box sx={{
-          display: "flex", flexDirection: "column",
-          flexGrow: isMobile ? 1 : 0.5,
-          width: isMobile ? "100%" : "600px",
-          maxWidth: isMobile ? "100%" : "600px",
-        }}>
-          {node !== null &&
-            <Card sx={{ display: "flex", flexDirection: "column", m: 0.5, p: 0.5, flexGrow: 1, minHeight: "fit-content" }}>
-              <TableContainer component={Card} sx={{ mb: 1, minHeight: "max-content" }}>
                 <Table size="small" sx={{ tableLayout: 'fixed' }}>
-                  <TableBody sx={{ '& td': { verticalAlign: "top" }, '& td:first-of-type': { whiteSpace: "nowrap", width: "5rem" } }}>
+                  <TableBody sx={{ '& td': { verticalAlign: "top", fontSize: "0.75rem", }, '& td:first-of-type': { whiteSpace: "nowrap", width: "5rem" } }}>
                     <TableRow>
                       <TableCell>Type</TableCell>
                       <TableCell>{node.emoji} {node.doc_type}</TableCell>
@@ -559,64 +491,62 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
                 </Table>
               </TableContainer>
               {node.content !== "" && node.content !== undefined &&
-                <Box sx={{ display: "flex", fontSize: "0.75rem", flexDirection: "column", border: "1px solid #808080", minHeight: "fit-content", flexGrow: 1 }}>
+                <Paper elevation={6} sx={{ display: "flex", flexDirection: "column", border: "1px solid #808080", minHeight: "fit-content", mt: 1 }}>
                   <Box sx={{ display: "flex", background: "#404040", p: 1, color: "white" }}>Vector Embedded Content</Box>
                   <Box sx={{ display: "flex", p: 1, flexGrow: 1 }}>{node.content}</Box>
-                </Box>
+                </Paper>
               }
-            </Card>
+            </Box>
           }
-          {node === null &&
-            <Card sx={{ m: 0.5, p: 1, flexGrow: 1 }}>No node selected. Click a point in the scatter-graph.</Card>
-          }
-          {!inline &&
-            <Scrollable
-              autoscroll={false}
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                // height: "calc(100vh - 72px - 144px)",  
-                m: 0,
-                p: 0.5,
-                whiteSpace: 'pre-line',
-                zIndex: 1000,
-                overflow: 'auto',
-                overflowWrap: 'break-all',
-                wordBreak: 'break-all',
-                flexGrow: 1
-              }}
-            >
-              {node !== null && node.full_content &&
-                node.full_content.split('\n').map((line, index) => {
-                  index += 1 + node.chunk_begin;
-                  const bgColor = (index > node.line_begin && index <= node.line_end) ? '#f0f0f0' : 'auto';
-                  // console.log(index, node.line_begin, node.line_end, bgColor);
-                  return <Box key={index} sx={{ display: "flex", flexDirection: "row", borderBottom: '1px solid #d0d0d0', backgroundColor: bgColor }}>
-                    <Box sx={{ fontFamily: 'courier', fontSize: "0.8rem", minWidth: "2rem", pt: "0.2rem", align: "left", verticalAlign: "top" }}>{index}</Box>
-                    <pre style={{ margin: 0, padding: 0, border: "none", minHeight: "1rem" }} >{line || " "}</pre>
-                  </Box>;
-                })
-              }
-              {node !== null && !node.line_begin && <pre style={{ margin: 0, padding: 0, border: "none" }}>{node.content}</pre>}
-              {node === null && "Select a node in the visualization."}
-          </Scrollable>
-          }
-        </Box >
-        }
-      </Card>
-      {!inline && querySet.query !== undefined && querySet.query !== '' &&
-        <Card sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flexGrow: 0, minHeight: '2.5rem', maxHeight: '2.5rem', height: '2.5rem', alignItems: 'center', mt: 1, pb: 0 }}>
-          Query: {querySet.query}
-        </Card>
-      }
 
-      {
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
-        !inline &&
+            {node === null &&
-        <Box className="Query" sx={{ display: "flex", flexDirection: "row", p: 1 }}>
+              <Paper sx={{ m: 0.5, p: 2, flexGrow: 1 }}>
-          <TextField
+                Click a point in the scatter-graph to see information about that node.
-            variant="outlined"
+              </Paper>
-            fullWidth
+            }
-            type="text"
+            {!inline && node !== null && node.full_content &&
+              <Scrollable
+                autoscroll={false}
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  m: 0,
+                  p: 0.5,
+                  pl: 1,
+                  flexShrink: 1,
+                }}
+              >
+                {
+                  node.full_content.split('\n').map((line, index) => {
+                    index += 1 + node.chunk_begin;
+                    const bgColor = (index > node.line_begin && index <= node.line_end) ? '#f0f0f0' : 'auto';
+                    return <Box key={index} sx={{ display: "flex", flexDirection: "row", borderBottom: '1px solid #d0d0d0', ':first-child': { borderTop: '1px solid #d0d0d0' }, backgroundColor: bgColor }}>
+                      <Box sx={{ fontFamily: 'courier', fontSize: "0.8rem", minWidth: "2rem", pt: "0.1rem", align: "left", verticalAlign: "top" }}>{index}</Box>
+                      <pre style={{ margin: 0, padding: 0, border: "none", minHeight: "1rem" }} >{line || " "}</pre>
+                    </Box>;
+                  })
+                }
+                {!node.line_begin && <pre style={{ margin: 0, padding: 0, border: "none" }}>{node.content}</pre>}
+              </Scrollable>
+            }
+          </Box>
+        </Paper>
+
+        {!inline && querySet.query !== undefined && querySet.query !== '' &&
+          <Paper sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flexGrow: 0, minHeight: '2.5rem', maxHeight: '2.5rem', height: '2.5rem', alignItems: 'center', mt: 1, pb: 0 }}>
+            {querySet.query !== undefined && querySet.query !== '' && `Query: ${querySet.query}`}
+            {querySet.ids.length === 0 && "Enter query below to perform a similarity search."}
+          </Paper>
+        }
+
+        {
+          !inline &&
+          <Box className="Query" sx={{ display: "flex", flexDirection: "row", p: 1 }}>
+            <TextField
+              variant="outlined"
+              fullWidth
+              type="text"
               value={newQuery}
               onChange={(e) => setNewQuery(e.target.value)}
               onKeyDown={handleKeyPress}
@@ -627,12 +557,12 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
               <Button sx={{ m: 1 }} variant="contained" onClick={() => { sendQuery(newQuery); }}><SendIcon /></Button>
             </Tooltip>
           </Box>
-      }
+        }
-    </Card>
+      </Box>
+    </Box>
   );
 };
 
-
 const VectorVisualizerPage: React.FC<VectorVisualizerProps> = (props: VectorVisualizerProps) => {
   return <Scrollable
     autoscroll={false}