-
-
-
- this.handleTitleChange(e.target.value)}
- value={currentQuery.title}
- />
-
- this.props.queries.updateQuery(this.state.currentQuery.id, { catalog: e.target.value })
- }
- value={currentQuery.catalog ?? ''}
- />
-
- this.props.queries.updateQuery(this.state.currentQuery.id, { schema: e.target.value })
- }
- value={currentQuery.schema ?? ''}
- />
-
-
-
-
-
-
-
-
-
+
+
+
+
+ this.Execute()}
+ >
+ {!isQueryRunning ?
+ {this.renderEditableTextField('editingTitle', currentQuery.title, {
+ typographyProps: {
+ variant: 'h6',
+ sx: { ml: 2 },
+ },
+ textFieldProps: {
+ sx: { maxWidth: 200 },
+ onChange: (event) => this.handleTitleChange(event.target.value),
+ },
+ })}
+
+
+
+ Catalog:
+
+ {this.renderEditableTextField('editingCatalog', currentQuery.catalog ?? '', {
+ typographyProps: {
+ sx: { ml: 2, maxWidth: 200, fontFamily: 'monospace' },
+ noWrap: true,
+ },
+ textFieldProps: {
+ sx: {
+ maxWidth: 200,
+ '& .MuiInputBase-input': { fontFamily: 'monospace' },
+ },
+ onChange: (event) => this.handleCatalogChange(event.target.value),
+ },
+ displayContent:
+ currentQuery.catalog && currentQuery.catalog.length > 0 ? (
+ currentQuery.catalog
+ ) : (
+
+ <no-catalog>
+
+ ),
+ })}
+
+
+
+
+ Schema:
+
+ {this.renderEditableTextField('editingSchema', currentQuery.schema ?? '', {
+ typographyProps: {
+ sx: { ml: 2, maxWidth: 200, fontFamily: 'monospace' },
+ noWrap: true,
+ },
+ textFieldProps: {
+ sx: {
+ maxWidth: 200,
+ '& .MuiInputBase-input': { fontFamily: 'monospace' },
+ },
+ onChange: (event) => this.handleSchemaChange(event.target.value),
+ },
+ displayContent:
+ currentQuery.schema && currentQuery.schema.length > 0 ? (
+ currentQuery.schema
+ ) : (
+
+ <no-schema>
+
+ ),
+ })}
+
+
+
+ {this.state.editorCollapsed ?
+
+
{}}
@@ -250,19 +331,21 @@ class QueryCell extends React.Component {
queries={this.props.queries}
catalog={currentQuery.catalog}
schema={currentQuery.schema}
+ theme={this.props.theme}
+ maxHeight={availablePanelHeight}
/>
-
-
- this.ClearResults()}
- />
-
-
+ {this.props.theme != 'dark' &&
-
-
- )
- }
+ return (
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
)
}
diff --git a/precise/src/ResultSet.tsx b/precise/src/ResultSet.tsx
index 46da4ac..fbc4c6a 100644
--- a/precise/src/ResultSet.tsx
+++ b/precise/src/ResultSet.tsx
@@ -1,17 +1,33 @@
import React from 'react'
-import QueryInfo from './schema/QueryInfo'
+import {
+ Alert,
+ Box,
+ CircularProgress,
+ LinearProgress,
+ Link,
+ Paper,
+ Stack,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableFooter,
+ TableHead,
+ TableRow,
+ Typography,
+} from '@mui/material'
+import { DataGrid, GridColDef } from '@mui/x-data-grid'
+import Chip, { ChipProps } from '@mui/material/Chip'
import ReactDOMServer from 'react-dom/server'
-import ErrorBox from './utils/ErrorBoxProvider'
-import ProgressBar from './utils/ProgressBar'
import CopyLink from './utils/CopyLink'
import ClearButton from './utils/ClearButton'
-import './style/results.css'
interface ResultSetProps {
- queryInfo: QueryInfo | undefined
+ queryId: string | undefined
results: any[]
columns: any[]
response: any
+ height: number
errorMessage: string
onClearResults: (queryId: string | undefined) => void
}
@@ -21,6 +37,38 @@ class ResultSet extends React.Component
-
-
-
-
-
+
+
+
+ 30 ? 'scrollable' : 'result-table-container'}>
- {this.renderInnerTable(results, response, columns)}
-
+
- {
- // only return if there are columns
- columns && columns.length ? (
-
{response && response.id ? (
-
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+
+ {this.getRowCount()} rows:
+
+
+ {response.id}
+
+ {columns && columns.length ? (
+ response.stats && this.isFinishedFailedOrCancelled(response.stats.state) ? (
+ <>
+ this.props.onClearResults(queryId)} />
+ this.copy()} />
+
+ ) : null
+ ) : null}
+
+
) : null}
- {errorMessage ?
- {response.stats && this.isFinishedFailedOrCancelled(response.stats.state) && (
- this.props.onClearResults(queryInfo?.id)} />
- )}
- this.copy()} />
- {/* if row count > 30 place in scrollable div */}
- {this.renderTable(results, response, columns)}
-
- ) : null
- }
+
- {this.getRowCount()} rows:{' '}
-
- {response.id}
-
-
+
- = ({ query, onSubsti
}
return (
-
+ Query Parameters
+
+ {fields.map((field) => {
+ const isNumber = field.type !== 'varchar'
+ const val = values[field.name] ?? ''
+
+ return (
+ handleInputChange(field.name, e.target.value)}
+ placeholder={field.defaultValue !== undefined ? String(field.defaultValue) : ''}
+ slotProps={{
+ input: {
+ // helpful for numeric types
+ inputProps: isNumber ? { step: field.type === 'double' ? 'any' : 1 } : undefined,
+ // optional clear button (keeps width stable when empty)
+ endAdornment: (
+
+ handleInputChange(field.name, '')}
+ sx={{
+ visibility: val ? 'visible' : 'hidden',
+ '& .MuiSvgIcon-root': { fontSize: 16 },
+ }}
+ >
+
+
+ ),
+ },
+ }}
+ />
+ )
+ })}
+
+
)
}
diff --git a/precise/src/assets/close.png b/precise/src/assets/close.png
deleted file mode 100644
index cbd90be..0000000
Binary files a/precise/src/assets/close.png and /dev/null differ
diff --git a/precise/src/assets/pin_down.png b/precise/src/assets/pin_down.png
deleted file mode 100644
index 1039779..0000000
Binary files a/precise/src/assets/pin_down.png and /dev/null differ
diff --git a/precise/src/assets/pin_up.png b/precise/src/assets/pin_up.png
deleted file mode 100644
index 1d3ce9b..0000000
Binary files a/precise/src/assets/pin_up.png and /dev/null differ
diff --git a/precise/src/controls/catalog_viewer/CatalogViewer.tsx b/precise/src/controls/catalog_viewer/CatalogViewer.tsx
index fecee1b..32aac0b 100644
--- a/precise/src/controls/catalog_viewer/CatalogViewer.tsx
+++ b/precise/src/controls/catalog_viewer/CatalogViewer.tsx
@@ -1,21 +1,45 @@
import React, { useState, useEffect, useCallback, useRef } from 'react'
+import {
+ Alert,
+ AlertTitle,
+ Box,
+ Checkbox,
+ Chip,
+ CircularProgress,
+ Grid,
+ FormControlLabel,
+ IconButton,
+ LinearProgress,
+ TextField,
+ Typography,
+ Divider,
+} from '@mui/material'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import RefreshIcon from '@mui/icons-material/Refresh'
+import StorageOutlinedIcon from '@mui/icons-material/StorageOutlined'
+import { SimpleTreeView, TreeItem } from '@mui/x-tree-view'
+import CatalogViewerSchema from './CatalogViewerSchema'
import SchemaProvider from './../../sql/SchemaProvider'
import Catalog from './../../schema/Catalog'
import TableReference from '../../schema/TableReference'
-import CatalogViewerSchema from './CatalogViewerSchema'
-import ErrorBox from './../../utils/ErrorBoxProvider'
-import CloseIcon from '../../assets/close.png'
import { ViewerStateManager, buildPath } from './ViewerState'
-import './catalogviewer.css'
-import { Loader2, ChevronRight } from 'lucide-react'
interface CatalogViewerProps {
initialFilterText?: string
onGenerateQuery?: (query: string, catalog?: string, schema?: string) => void
onAppendQuery?: (query: string, catalog?: string, schema?: string) => void
+ onDrawerToggle?: () => void
+ enableSearchColumns?: boolean
}
-const CatalogViewer: React.FC = ({ initialFilterText = '', onGenerateQuery, onAppendQuery }) => {
+const CatalogViewer: React.FC = ({
+ initialFilterText = '',
+ onGenerateQuery,
+ onAppendQuery,
+ onDrawerToggle,
+ enableSearchColumns,
+}) => {
// Basic state
const [catalogs, setCatalogs] = useState>(new Map())
const [errorMessage, setErrorMessage] = useState()
@@ -70,8 +94,8 @@ const CatalogViewer: React.FC = ({ initialFilterText = '', o
try {
await SchemaProvider.populateCatalogsAndRefreshTableList(
- () => {
- setCatalogs(SchemaProvider.catalogs)
+ (nextCatalogs) => {
+ setCatalogs(nextCatalogs)
setIsLoading(false)
},
(error: string) => {
@@ -153,91 +177,184 @@ const CatalogViewer: React.FC = ({ initialFilterText = '', o
}
return (
-
}
-const CatalogViewerColumn: React.FC = ({
- tableRef,
- column,
- isExpanded,
- isVisible,
- onToggle,
-}) => {
- const [sampleValues, setSampleValues] = useState([])
- const [isLoadingSamples, setIsLoadingSamples] = useState(false)
- const [showSamples, setShowSamples] = useState(false)
-
+const CatalogViewerColumn: React.FC = ({ tableRef, column, isVisible }) => {
const columnPath = buildPath.column(tableRef.catalogName, tableRef.schemaName, tableRef.tableName, column.getName())
- // Load sample values when samples are shown
- useEffect(() => {
- if (showSamples && sampleValues.length === 0 && !isLoadingSamples) {
- setIsLoadingSamples(true)
- column.getSampleValues(tableRef, (newSampleValues: string[]) => {
- setSampleValues(newSampleValues)
- setIsLoadingSamples(false)
- })
- }
- }, [showSamples, column, tableRef, sampleValues.length, isLoadingSamples])
-
- const handleRefresh = (e: React.MouseEvent) => {
- e.stopPropagation()
- setIsLoadingSamples(true)
- column.getSampleValues(tableRef, (newSampleValues: string[]) => {
- setSampleValues(newSampleValues)
- setIsLoadingSamples(false)
- })
- }
-
- const handleToggle = async () => {
- // Toggle samples if already expanded
- if (isExpanded) {
- setShowSamples(!showSamples)
- } else {
- // Just expand the column initially
- await onToggle(columnPath)
- setShowSamples(true)
- }
- }
-
- const renderSampleValue = (value: string, index: number) => {
- if (value === null) {
- return (
-
+
+
+
+ {column.getName()}
+
+
+ {column.getType()}
+
+
+
+
+ }
+ slotProps={{
+ label: {
+ style: {
+ overflow: 'visible',
+ },
+ },
+ }}
+ />
)
}
diff --git a/precise/src/controls/catalog_viewer/CatalogViewerSchema.tsx b/precise/src/controls/catalog_viewer/CatalogViewerSchema.tsx
index 90857b4..d348217 100644
--- a/precise/src/controls/catalog_viewer/CatalogViewerSchema.tsx
+++ b/precise/src/controls/catalog_viewer/CatalogViewerSchema.tsx
@@ -1,20 +1,21 @@
import React from 'react'
+import { Box, IconButton, Typography } from '@mui/material'
+import { TreeItem } from '@mui/x-tree-view'
+import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import Schema from '../../schema/Schema'
import Table from '../../schema/Table'
import CatalogViewerTable from './CatalogViewerTable'
import TableReference from '../../schema/TableReference'
import { buildPath } from './ViewerState'
-import './catalogviewer.css'
-import { ChevronRight } from 'lucide-react'
interface SchemaProps {
catalogName: string
schema: Schema
filterText: string
- isExpanded: boolean
isVisible: (path: string) => boolean
+ isLoading: boolean
hasMatchingChildren: (path: string) => boolean
- onToggle: (path: string) => Promise
onGenerateQuery?: (
queryType: string,
tableRef: TableReference | null,
@@ -27,10 +28,9 @@ const CatalogViewerSchema: React.FC = ({
catalogName,
schema,
filterText,
- isExpanded,
isVisible,
+ isLoading,
hasMatchingChildren,
- onToggle,
onGenerateQuery,
}) => {
const schemaPath = buildPath.schema(catalogName, schema.getName())
@@ -48,51 +48,60 @@ const CatalogViewerSchema: React.FC = ({
}
return (
-
)
}
diff --git a/precise/src/controls/catalog_viewer/CatalogViewerTable.tsx b/precise/src/controls/catalog_viewer/CatalogViewerTable.tsx
index 9283651..1b077a6 100644
--- a/precise/src/controls/catalog_viewer/CatalogViewerTable.tsx
+++ b/precise/src/controls/catalog_viewer/CatalogViewerTable.tsx
@@ -1,19 +1,22 @@
import React, { useState, useEffect } from 'react'
+import { Alert, Box, IconButton, Typography } from '@mui/material'
+import { TreeItem } from '@mui/x-tree-view'
+import HourglassEmptyOutlinedIcon from '@mui/icons-material/HourglassEmptyOutlined'
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'
+import TableRowsOutlined from '@mui/icons-material/TableRowsOutlined'
import Table from '../../schema/Table'
import SchemaProvider from '../../sql/SchemaProvider'
import TableReference from '../../schema/TableReference'
import CatalogViewerColumn from './CatalogViewerColumn'
import { buildPath } from './ViewerState'
-import './catalogviewer.css'
-import { ChevronRight } from 'lucide-react'
interface CatalogViewerTableProps {
tableRef: TableReference
filterText: string
isExpanded: boolean
isVisible: (path: string) => boolean
+ isLoading: boolean
hasMatchingChildren: (path: string) => boolean
- onToggle: (path: string) => Promise
onGenerateQuery?: (queryType: string, tableRef: TableReference) => void
}
@@ -22,7 +25,7 @@ const CatalogViewerTable: React.FC = ({
filterText,
isExpanded,
isVisible,
- onToggle,
+ isLoading,
onGenerateQuery,
}) => {
const [table, setTable] = useState(() => new Table(tableRef.tableName))
@@ -63,60 +66,70 @@ const CatalogViewerTable: React.FC
-
-
-
-
-
- {response && response.stats && response.stats.runningPercentage
- ? Math.floor(response.stats.runningPercentage)
- : 0}
- %
-
-
- {response.stats.state}
-
+ <> +
+
+ {response && response.stats && response.stats.progressPercentage
+ ? Math.floor(response.stats.progressPercentage)
+ : 0}
+ %
+
+
+
Workers: {response.stats.nodes}, Running splits: {response.stats.runningSplits},
Total splits: {response.stats.totalSplits}, Run time:{' '}
{Math.floor(response.stats.elapsedTimeMillis / 1000)}s
-
- + <> +
-
- {/* if response.stats.subStages */}
- {response.stats.rootStage && response.stats.rootStage.subStages ? (
-
-
-
- {this.formatMillisAsHHMMSS(response.stats.elapsedTimeMillis)}
-
-
-
-
-
+
+ ) : null}
+
+
+ ) : columns && columns.length ? (
+
+ {this.renderTable(results, columns)}
+
) : null}
-
+
)
}
}
diff --git a/precise/src/SubstitutionEditor.tsx b/precise/src/SubstitutionEditor.tsx
index da81681..c5e1467 100644
--- a/precise/src/SubstitutionEditor.tsx
+++ b/precise/src/SubstitutionEditor.tsx
@@ -1,4 +1,6 @@
import React, { useState, useEffect } from 'react'
+import { Box, Stack, Typography, TextField, InputAdornment, IconButton } from '@mui/material'
+import ClearIcon from '@mui/icons-material/Clear'
interface SubstitutionField {
name: string
@@ -60,21 +62,52 @@ const SubstitutionEditor: React.FC| - | - | - Rows - | -- Bytes - | -- Splits - | -|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Stage | -Nodes | -Processed | -Rate | -Current Rate | -Processed | -Rate | -Current Rate | -Input Processed | -Queued | -Running | -Done | -||||||||||||
| 0 (root) | -{response.stats.rootStage.nodes} | -- {this.rowCountToCorrectScale(response.stats.rootStage.processedRows)} - | -- {this.rowCountToCorrectScale( - response.stats.rootStage.processedRows / - (response.stats.rootStage.wallTimeMillis / 1000) - )} - | -- | - {this.bytesToCorrectScale(response.stats.rootStage.processedBytes)} - | -- {this.bytesToCorrectScale( - response.stats.rootStage.processedBytes / - (response.stats.wallTimeMillis / 1000) - )} - | -- | - {this.bytesToCorrectScale(response.stats.rootStage.physicalInputBytes)} - | -- {response.stats.rootStage.queuedSplits} - | -- {response.stats.rootStage.runningSplits} - | -- {response.stats.rootStage.completedSplits} - | -||||||||||||
| - {subStageInfo.stage.stageId} - | -{subStageInfo.stage.nodes} | -
+ |
-
+
+ |
- - |
+
+ |
-
+
+ |
- - |
+
+ |
-
+
+ |
-
+
+ |
-
+
+ |
-
- )
- })}
-
|---|---|---|---|---|---|---|---|---|---|---|---|
| Total | -{response.stats.nodes} | -- {this.rowCountToCorrectScale(response.stats.processedRows)} - | -- {this.rowCountToCorrectScale( - response.stats.processedRows / - (response.stats.elapsedTimeMillis / 1000) - )} - | -- {this.rowCountToCorrectScale(processedRowsSinceLast)} - | -- {this.bytesToCorrectScale(response.stats.processedBytes)} - | -- {this.bytesToCorrectScale( - response.stats.processedBytes / - (response.stats.elapsedTimeMillis / 1000) - )} - | -- | - {this.bytesToCorrectScale(response.stats.physicalInputBytes)} - | -{response.stats.queuedSplits} | -{response.stats.runningSplits} | -{response.stats.completedSplits} | -
-
+ Query Parameters
- {fields.map((field) => ( -
-
- handleInputChange(field.name, e.target.value)}
- placeholder={field.defaultValue}
- />
-
- ))}
-
-
+
+
+ )
+ })}
+
+
+
)
}
diff --git a/precise/src/controls/catalog_viewer/CatalogViewerColumn.tsx b/precise/src/controls/catalog_viewer/CatalogViewerColumn.tsx
index 201510b..0b8fcad 100644
--- a/precise/src/controls/catalog_viewer/CatalogViewerColumn.tsx
+++ b/precise/src/controls/catalog_viewer/CatalogViewerColumn.tsx
@@ -1,123 +1,63 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import { Box, Stack, Typography } from '@mui/material'
+import { TreeItem } from '@mui/x-tree-view'
import Column from '../../schema/Column'
import TableReference from './../../schema/TableReference'
-import CopyLink from './../../utils/CopyLink'
import { buildPath } from './ViewerState'
-import './catalogviewer.css'
interface CatalogViewerColumnProps {
tableRef: TableReference
column: Column
- isExpanded: boolean
isVisible: (path: string) => boolean
- onToggle: (path: string) => Promise
-
-
- {isLoading &&
-
+ `calc(${theme.mixins.toolbar.minHeight}px + ${theme.spacing(1)})`,
+ px: 0,
+ py: 0,
+ }}
+ >
+
+ setFilterText(e.target.value)}
- className="filter-input"
+ fullWidth
/>
- {filterText && (
-
-
-
-
- setFilterText('')}
- role="button"
- aria-label="Clear search"
- >
- 
-
- )}
- Loading catalogs...
}
-
- {errorMessage &&
- {Array.from(catalogs.values())
- .sort((a, b) => a.getName().localeCompare(b.getName()))
- .map((catalog: Catalog) => {
- const catalogName = catalog.getName()
- const catalogPath = buildPath.catalog(catalogName)
-
- if (filterText && !isVisible(catalogPath)) {
- return null
- }
-
- return (
-
-
-
- )
- })}
- handleToggle(catalogPath)}>
-
+
+
+ {enableSearchColumns && (
+
+ setSearchColumns(e.target.checked)}
+ />
+ }
+ label={
+
+
- {isExpanded(catalogPath) ? 'â–¼' : 'â–¶'}
-
-
-
- {isExpanded(catalogPath) && (
-
- {catalogName}
- {catalog.getType()} catalog
-
-
+ handleGenerateCatalogQuery(e, catalogName)}
- title="Set this catalog as default catalog"
- >
-
-
+ Search columns
+
+ {isLoadingColumns &&
+ Catalog Viewer
+ {errorMessage}
+
+ )}
+
+ {
+ handleToggle(itemId)
+ }}
+ >
+ {Array.from(catalogs.values())
+ .sort((a, b) => a.getName().localeCompare(b.getName()))
+ .map((catalog: Catalog) => {
+ const catalogName = catalog.getName()
+ const catalogPath = buildPath.catalog(catalogName)
+
+ if (filterText && !isVisible(catalogPath)) {
+ return null
+ }
+
+ return (
+
+ {catalogName}
+ {catalog.getType() === 'system' && (
+ handleGenerateCatalogQuery(e, catalogName)}
+ disabled={isLoading}
+ >
+
+
+ }
+ slotProps={{
+ label: {
+ style: {
+ overflow: 'visible',
+ },
+ },
+ }}
+ >
+
{catalog.getError() && (
-
+ Catalog Viewer
+ {catalog.getError()}
+
)}
{Array.from(catalog.getSchemas().values())
.sort((a, b) => a.getName().localeCompare(b.getName()))
.map((schema) => {
- const schemaPath = buildPath.schema(catalogName, schema.getName())
+ const schemaName = schema.getName()
+ const schemaPath = buildPath.schema(catalogName, schemaName)
return (
= ({ initialFilterText = '', o
catalogName={catalogName}
schema={schema}
filterText={filterText}
- isExpanded={isExpanded(schemaPath)}
isVisible={isVisible}
+ isLoading={isLoading}
hasMatchingChildren={hasMatchingChildren}
- onToggle={handleToggle}
onGenerateQuery={handleGenerateQuery}
/>
)
})}
-
- )}
-
- NULL
-
- )
- }
-
- const displayValue = value.length > 50 ? value.substring(0, 50) + '...' : value
-
- return (
-
- {displayValue}
- navigator.clipboard.writeText(value)} />
-
- )
- }
-
// Check visibility using the passed down helper
if (!isVisible(columnPath)) {
return null
}
return (
-
-
+
- {showSamples && (
-
-
- {showSamples && (
-
-
- )}
- ⟳
-
- {column.getName()}
- {column.getType()}
- {showSamples ? 'â–¼' : 'â–¶'}
-
- {column.getExtraOrComment() && (
-
- {column.getExtraOrComment()}
-
- )}
-
-
- )}
-
- Sample values:
-
-
- {isLoadingSamples ? (
-
- Loading samples...
- ) : sampleValues.length === 0 ? (
- No sample values available
- ) : (
- sampleValues.map((value, index) => renderSampleValue(value, index))
- )}
-
-
+ return (
+ onToggle(schemaPath)}>
- {schema.getName()}
- schema
-
- {isExpanded ? 'â–¼' : 'â–¶'}
-
+ {schema.getName()}
- {onGenerateQuery && (
-
-
- {isExpanded && (
-
-
- )}
-
- {Array.from(schema.getTables().values())
- .sort((a: Table, b: Table) => a.getName().localeCompare(b.getName()))
- .map((table: Table) => {
- const tablePath = buildPath.table(catalogName, schema.getName(), table.getName())
+
- )}
-