Everything is working
This commit is contained in:
parent
bbd5cb3783
commit
0d27239ca6
@ -1,6 +1,3 @@
|
||||
.Hover {
|
||||
border: 3px solid purple !important;
|
||||
}
|
||||
/* .js-plotly-plot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -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
|
||||
}}>
|
||||
{
|
||||
!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 }}>
|
||||
RAG Vector Visualization
|
||||
</Card>
|
||||
}
|
||||
<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" }}>
|
||||
<Card sx={{
|
||||
p: 0.5, m: 0.5,
|
||||
display: "flex",
|
||||
flexGrow: 0,
|
||||
height: isMobile ? "auto" : "320px",
|
||||
minHeight: isMobile ? "auto" : "320px",
|
||||
maxHeight: isMobile ? "auto" : "320px",
|
||||
position: "relative",
|
||||
flexDirection: "column"
|
||||
}}>
|
||||
<FormControlLabel
|
||||
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={{
|
||||
<Box sx={{ p: 0, m: 0, gap: 0 }}>
|
||||
{
|
||||
!inline &&
|
||||
<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 }}>
|
||||
RAG Vector Visualization
|
||||
</Paper>
|
||||
}
|
||||
<Paper sx={{
|
||||
p: 0.5, m: 0,
|
||||
display: "flex",
|
||||
flexGrow: 0,
|
||||
height: isMobile ? "auto" : "320px",
|
||||
minHeight: isMobile ? "auto" : "320px",
|
||||
maxHeight: isMobile ? "auto" : "320px",
|
||||
position: "relative",
|
||||
flexDirection: "column"
|
||||
}}>
|
||||
<FormControlLabel
|
||||
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",
|
||||
backgroundColor: "white",
|
||||
}}>
|
||||
<JsonView
|
||||
displayDataTypes={false}
|
||||
objectSortKeys={true}
|
||||
collapsed={1}
|
||||
value={querySet}
|
||||
style={{
|
||||
padding: "14px 0",
|
||||
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);
|
||||
}
|
||||
}
|
||||
minHeight: '240px',
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
layout={layout}
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
// console.log("keyName", keyName)
|
||||
// console.log("value", value)
|
||||
// console.log("parentValue", parentValue)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</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",
|
||||
}}>
|
||||
<Paper sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", mt: 0.5, p: 0.5, flexGrow: 1, minHeight: "fit-content" }}>
|
||||
{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" }}>
|
||||
<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 }}>
|
||||
<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>
|
||||
}
|
||||
|
||||
{
|
||||
!inline &&
|
||||
<Box className="Query" sx={{ display: "flex", flexDirection: "row", p: 1 }}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
type="text"
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
{node === null &&
|
||||
<Paper sx={{ m: 0.5, p: 2, flexGrow: 1 }}>
|
||||
Click a point in the scatter-graph to see information about that node.
|
||||
</Paper>
|
||||
}
|
||||
{!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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user