feat(VectorSearch, QueryInput): redesign UI layout

HUBioDataLab · Feb 27, 2025 · 06a2b00 · 06a2b00
1 parent 8bebffe
commit 06a2b00
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 71 deletions.
diff --git a/crossbar_llm/frontend/src/App.js b/crossbar_llm/frontend/src/App.js
@@ -15,6 +15,7 @@ function App() {
   const [tabValue, setTabValue] = useState('query');
   const [queryResult, setQueryResult] = useState(null);
   const [executionResult, setExecutionResult] = useState(null);
+  const [realtimeLogs, setRealtimeLogs] = useState('');
   const [showAboutModal, setShowAboutModal] = useState(false);
   const [latestQueries, setLatestQueries] = useState([]);
   const [selectedQuery, setSelectedQuery] = useState(null);
@@ -64,6 +65,9 @@ function App() {
 
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
+    setQueryResult(null);
+    setExecutionResult(null);
+    setRealtimeLogs('');
   };
 
   const handleCloseModal = () => {
@@ -146,6 +150,7 @@ function App() {
                 <QueryInput
                   setQueryResult={setQueryResult}
                   setExecutionResult={setExecutionResult}
+                  setRealtimeLogs={setRealtimeLogs}
                   addLatestQuery={addLatestQuery}
                   provider={provider}
                   setProvider={setProvider}
@@ -157,6 +162,7 @@ function App() {
                 <ResultsDisplay
                   queryResult={queryResult}
                   executionResult={executionResult}
+                  realtimeLogs={realtimeLogs}
                 />
                 <LatestQueries 
                   queries={latestQueries} 
@@ -191,6 +197,7 @@ function App() {
                 <VectorSearch
                   setQueryResult={setQueryResult}
                   setExecutionResult={setExecutionResult}
+                  setRealtimeLogs={setRealtimeLogs}
                   addLatestQuery={addLatestQuery}
                   provider={provider}
                   setProvider={setProvider}
@@ -202,6 +209,7 @@ function App() {
                 <ResultsDisplay
                   queryResult={queryResult}
                   executionResult={executionResult}
+                  realtimeLogs={realtimeLogs}
                 />
                 <LatestQueries 
                   queries={latestQueries} 

diff --git a/crossbar_llm/frontend/src/components/QueryInput.js b/crossbar_llm/frontend/src/components/QueryInput.js
@@ -540,6 +540,28 @@ function QueryInput({
           <CircularProgress />
         </Box>
       )}
+
+      {/* Generated Query TextArea */}
+      {generatedQuery && !runnedQuery && (
+        <TextField
+          label="Generated Cypher Query"
+          value={generatedQuery}
+          onChange={(e) => setGeneratedQuery(e.target.value)}
+          fullWidth
+          multiline
+          rows={4}
+          margin="normal"
+        />
+      )}
+
+      {/* Error message display */}
+      {error && (
+        <Typography color="error" align="center" sx={{ mt: 2 }}>
+          {error}
+        </Typography>
+      )}
+
+      {/* Log sections moved below outputs */}
       {/* Real-time logs from EventSource */}
       {verbose && (
         <Box
@@ -598,24 +620,6 @@ function QueryInput({
           </pre>
         </Box>
       )}
-
-      {error && (
-        <Typography color="error" align="center" sx={{ mt: 2 }}>
-          {error}
-        </Typography>
-      )}
-      {/* Generated Query TextArea */}
-      {generatedQuery && !runnedQuery && (
-        <TextField
-          label="Generated Cypher Query"
-          value={generatedQuery}
-          onChange={(e) => setGeneratedQuery(e.target.value)}
-          fullWidth
-          multiline
-          rows={4}
-          margin="normal"
-        />
-      )}
     </div>
   );
 }

diff --git a/crossbar_llm/frontend/src/components/ResultsDisplay.js b/crossbar_llm/frontend/src/components/ResultsDisplay.js
@@ -1,72 +1,163 @@
-import React from 'react';
-import { Typography, Card, CardContent, Box, useTheme } from '@mui/material';
+import React, { useState } from 'react';
+import { Typography, Card, CardContent, Box, useTheme, IconButton, Dialog, DialogContent, Snackbar } from '@mui/material';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
 
 function ResultsDisplay({ queryResult, executionResult, realtimeLogs }) {
   const theme = useTheme();
   const syntaxTheme = theme.palette.mode === 'dark' ? dracula : docco;
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [copySnackbar, setCopySnackbar] = useState(false);
 
   if (!queryResult && !executionResult) {
     return null;
   }
 
+  const handleCopy = (text) => {
+    navigator.clipboard.writeText(text);
+    setCopySnackbar(true);
+  };
+
   return (
     <Box sx={{ mt: 4 }}>
-      {queryResult && executionResult && (
+      {executionResult && (
         <Card sx={{ mb: 2 }}>
           <CardContent>
-            <Typography variant="h6">Generated Cypher Query:</Typography>
-            <SyntaxHighlighter 
-              language="cypher" 
-              style={syntaxTheme}
-              customStyle={{
-                backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5'
-              }}
-            >
-              {queryResult}
-            </SyntaxHighlighter>
+            <Typography variant="body1" sx={{ fontWeight: 'bold', mb: 2 }}>
+              Natural Language Response:
+            </Typography>
+            <Typography variant="body1" sx={{ mb: 2 }}>
+              {executionResult.response}
+            </Typography>
           </CardContent>
         </Card>
       )}
-      {executionResult && (
-        <Card>
+
+      {(queryResult || executionResult?.result) && (
+        <Card sx={{ mb: 2 }}>
           <CardContent>
-            <Typography variant="h6">Results:</Typography>
-            {realtimeLogs && (
-              <Card sx={{ mb: 2 }}>
-                <CardContent>
-                  <Typography variant="h6">Real-time Logs:</Typography>
+            {queryResult && (
+              <>
+                <Typography variant="subtitle1" sx={{ mb: 1 }}>Generated Cypher Query:</Typography>
+                <SyntaxHighlighter 
+                  language="cypher" 
+                  style={syntaxTheme}
+                  customStyle={{
+                    backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5'
+                  }}
+                >
+                  {queryResult}
+                </SyntaxHighlighter>
+              </>
+            )}
+
+            {executionResult?.result && (
+              <>
+                <Box sx={{ position: 'relative', mt: 3 }}>
+                  <Typography variant="subtitle1">
+                    Raw Query Output:
+                  </Typography>
+                  <Box sx={{ position: 'absolute', top: 0, right: 0 }}>
+                    <IconButton 
+                      size="small" 
+                      onClick={() => handleCopy(JSON.stringify(executionResult.result, null, 2))}
+                      title="Copy to clipboard"
+                    >
+                      <ContentCopyIcon />
+                    </IconButton>
+                    <IconButton 
+                      size="small" 
+                      onClick={() => setIsFullscreen(true)}
+                      title="View fullscreen"
+                    >
+                      <FullscreenIcon />
+                    </IconButton>
+                  </Box>
+                </Box>
+                <Box sx={{ maxHeight: '400px', overflow: 'auto' }}>
                   <SyntaxHighlighter 
-                    language="plaintext" 
+                    language="json" 
                     style={syntaxTheme}
                     customStyle={{
                       backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5'
                     }}
                   >
-                    {realtimeLogs}
+                    {JSON.stringify(executionResult.result, null, 2)}
                   </SyntaxHighlighter>
-                </CardContent>
-              </Card>
+                </Box>
+              </>
             )}
-            <Typography variant="body1" sx={{ mt: 2, fontWeight: 'bold' }}>
-              Natural Language Response:
-            </Typography>
-            <Typography variant="body1" sx={{ mt: 1, mb: 2 }}>
-              {executionResult.response}
-            </Typography>
-            <Box sx={{ height: 16 }} />
-            <Typography variant="subtitle1" sx={{ mt: 2 }}>
-              Raw Query Output:
-            </Typography>
+          </CardContent>
+        </Card>
+      )}
+
+      <Dialog
+        fullScreen
+        open={isFullscreen}
+        onClose={() => setIsFullscreen(false)}
+      >
+        <DialogContent sx={{ p: 3 }}>
+          <Box sx={{ position: 'relative' }}>
+            <IconButton 
+              size="small" 
+              onClick={() => handleCopy(JSON.stringify(executionResult?.result, null, 2))}
+              sx={{ position: 'absolute', right: 48, top: 0 }}
+              title="Copy to clipboard"
+            >
+              <ContentCopyIcon />
+            </IconButton>
+            <IconButton 
+              size="small" 
+              onClick={() => setIsFullscreen(false)}
+              sx={{ position: 'absolute', right: 0, top: 0 }}
+              title="Exit fullscreen"
+            >
+              <FullscreenIcon />
+            </IconButton>
             <SyntaxHighlighter 
               language="json" 
               style={syntaxTheme}
+              customStyle={{
+                backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5',
+                margin: '32px 0 0 0'
+              }}
+            >
+              {JSON.stringify(executionResult?.result, null, 2)}
+            </SyntaxHighlighter>
+          </Box>
+        </DialogContent>
+      </Dialog>
+
+      <Snackbar
+        open={copySnackbar}
+        autoHideDuration={2000}
+        onClose={() => setCopySnackbar(false)}
+        message="Copied to clipboard"
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        sx={{
+          '& .MuiSnackbarContent-root': {
+            bgcolor: theme.palette.mode === 'dark' ? '#333' : '#fff',
+            color: theme.palette.mode === 'dark' ? '#fff' : '#333',
+            boxShadow: theme.shadows[3]
+          }
+        }}
+      />
+
+      {/* Log sections moved below */}
+      {realtimeLogs && (
+        <Card sx={{ mt: 2 }}>
+          <CardContent>
+            <Typography variant="h6">Verbose Output:</Typography>
+            <SyntaxHighlighter 
+              language="plaintext" 
+              style={syntaxTheme}
               customStyle={{
                 backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5'
               }}
             >
-              {JSON.stringify(executionResult.result, null, 2)}
+              {realtimeLogs}
             </SyntaxHighlighter>
           </CardContent>
         </Card>

diff --git a/crossbar_llm/frontend/src/components/VectorSearch.js b/crossbar_llm/frontend/src/components/VectorSearch.js
@@ -642,6 +642,26 @@ function VectorSearch({
         </Box>
       )}
 
+      {/* Generated Query TextArea */}
+      {generatedQuery && !runnedQuery && (
+        <TextField
+          label="Generated Cypher Query"
+          value={generatedQuery}
+          onChange={(e) => setGeneratedQuery(e.target.value)}
+          fullWidth
+          multiline
+          rows={4}
+          margin="normal"
+        />
+      )}
+
+      {error && (
+        <Typography color="error" align="center" sx={{ mt: 2 }}>
+          {error}
+        </Typography>
+      )}
+
+      {/* Log sections moved to bottom */}
       {/* Real-time logs from EventSource */}
       {verbose && (
         <Box
@@ -700,24 +720,6 @@ function VectorSearch({
           </pre>
         </Box>
       )}
-
-      {error && (
-        <Typography color="error" align="center" sx={{ mt: 2 }}>
-          {error}
-        </Typography>
-      )}
-      {/* Generated Query TextArea */}
-      {generatedQuery && !runnedQuery && (
-        <TextField
-          label="Generated Cypher Query"
-          value={generatedQuery}
-          onChange={(e) => setGeneratedQuery(e.target.value)}
-          fullWidth
-          multiline
-          rows={4}
-          margin="normal"
-        />
-      )}
     </div>
   );
 }