diff --git a/lattice/src/App/Query/QueryContainer.tsx b/lattice/src/App/Query/QueryContainer.tsx index 7c102509c..a26190eb0 100644 --- a/lattice/src/App/Query/QueryContainer.tsx +++ b/lattice/src/App/Query/QueryContainer.tsx @@ -18,6 +18,7 @@ export type ResultType = { roundtrip: number; index?: string; error: string; + totalMessageCount: number; }; let streamingResults: ResultType = { @@ -27,11 +28,15 @@ let streamingResults: ResultType = { headers: [], rows: [], roundtrip: 0, - error: '' + error: '', + totalMessageCount: 0, }; export const QueryContainer: FC<{}> = () => { let startTime: Moment; + + const MAX_MESSAGES = 1000; // same limit as in query builder + const [indexes, setIndexes] = useState(); const [results, setResults] = useState([]); const [errorResult, setErrorResult] = useState(); @@ -44,12 +49,15 @@ export const QueryContainer: FC<{}> = () => { }); const handleQueryMessages = (message: RowResponse) => { - const response = message.toObject(); - if (response.headersList.length > 0) { - streamingResults.headers = response.headersList; - streamingResults.duration = response.duration; + if (streamingResults.totalMessageCount < MAX_MESSAGES) { + const response = message.toObject(); + if (response.headersList.length > 0) { + streamingResults.headers = response.headersList; + streamingResults.duration = response.duration; + } + streamingResults.rows.push(response.columnsList); } - streamingResults.rows.push(response.columnsList); + streamingResults.totalMessageCount += 1; }; const handleQueryEnd = (status: grpc.Code, statusMessage: string) => { @@ -91,7 +99,8 @@ export const QueryContainer: FC<{}> = () => { rows: [], index, roundtrip: 0, - error: '' + error: '', + totalMessageCount: 0, }; startTime = moment(); if (query) { @@ -115,10 +124,10 @@ export const QueryContainer: FC<{}> = () => { if (word.includes('-')) { let wordArr = word.split('.'); wordArr.forEach((section, idx) => { - if(section.includes('-') && !word.includes('`')) { + if (section.includes('-') && !word.includes('`')) { wordArr[idx] = `\`${wordArr[idx]}\``; } - }) + }); queryArr[idx] = wordArr.join('.'); } }); diff --git a/lattice/src/App/Query/QueryResults/QueryResults.module.scss b/lattice/src/App/Query/QueryResults/QueryResults.module.scss index cd83bf011..92762c813 100644 --- a/lattice/src/App/Query/QueryResults/QueryResults.module.scss +++ b/lattice/src/App/Query/QueryResults/QueryResults.module.scss @@ -30,7 +30,6 @@ .queryString { white-space: pre-wrap; - display: block; font-size: 12px; } diff --git a/lattice/src/App/Query/QueryResults/QueryResults.tsx b/lattice/src/App/Query/QueryResults/QueryResults.tsx index abab622e0..33c016f09 100644 --- a/lattice/src/App/Query/QueryResults/QueryResults.tsx +++ b/lattice/src/App/Query/QueryResults/QueryResults.tsx @@ -20,7 +20,7 @@ type QueryResultsProps = { export const QueryResults: FC = ({ collapsibleQuery = true, results, - onRemoveResult + onRemoveResult, }) => { const [showQuery, setShowQuery] = useState(false); const [copyTooltip, setCopyTooltip] = useState('Copy Query'); @@ -142,7 +142,12 @@ export const QueryResults: FC = ({ {results.operation === 'GroupBy' && results.rows.length <= 50 ? ( ) : ( - + )} ); diff --git a/lattice/src/App/QueryBuilder/GroupByChart/GroupByChart.tsx b/lattice/src/App/QueryBuilder/GroupByChart/GroupByChart.tsx index fb323264e..8178bacbb 100644 --- a/lattice/src/App/QueryBuilder/GroupByChart/GroupByChart.tsx +++ b/lattice/src/App/QueryBuilder/GroupByChart/GroupByChart.tsx @@ -23,7 +23,7 @@ export const GroupByChart: FC = ({ results }) => { groupData = { ...groupData, [headers[0].name]: row[0][`${headers[0].datatype}val`], - [secondaryValue]: row[2][`${headers[2].datatype}val`] + [secondaryValue]: row[2][`${headers[2].datatype}val`], }; if (!uniqueKeys.includes(secondaryValue.toString())) { @@ -33,7 +33,7 @@ export const GroupByChart: FC = ({ results }) => { groupData = { ...groupData, [headers[0].name]: row[0][`${headers[0].datatype}val`], - value: secondaryValue + value: secondaryValue, }; } }); @@ -58,15 +58,15 @@ export const GroupByChart: FC = ({ results }) => { ? { textColor: 'var(--text-secondary)', axis: { - domain: { line: { stroke: 'rgba(255, 255, 255, 0.1)' } } + domain: { line: { stroke: 'rgba(255, 255, 255, 0.1)' } }, }, grid: { line: { stroke: 'rgba(255, 255, 255, 0.1)' } }, - tooltip: { container: { background: '#1c2022' } } + tooltip: { container: { background: '#1c2022' } }, } : { axis: { - domain: { line: { stroke: '#dddddd' } } - } + domain: { line: { stroke: '#dddddd' } }, + }, } } groupMode="grouped" @@ -76,7 +76,7 @@ export const GroupByChart: FC = ({ results }) => { tickRotation: -40, legend: headers[0].name, legendPosition: 'middle', - legendOffset: 80 + legendOffset: 80, }} axisLeft={{ tickSize: 5, @@ -84,7 +84,7 @@ export const GroupByChart: FC = ({ results }) => { tickRotation: 0, legend: 'count', legendPosition: 'middle', - legendOffset: -40 + legendOffset: -40, }} tooltip={({ id, value, color }) => ( @@ -113,11 +113,11 @@ export const GroupByChart: FC = ({ results }) => { { on: 'hover', style: { - itemOpacity: 1 - } - } - ] - } + itemOpacity: 1, + }, + }, + ], + }, ]} animate={true} motionStiffness={90} diff --git a/lattice/src/App/QueryBuilder/QueryBuilderContainer.tsx b/lattice/src/App/QueryBuilder/QueryBuilderContainer.tsx index ef9f9062a..da27904de 100644 --- a/lattice/src/App/QueryBuilder/QueryBuilderContainer.tsx +++ b/lattice/src/App/QueryBuilder/QueryBuilderContainer.tsx @@ -32,7 +32,8 @@ let streamingResults: ResultType = { headers: [], rows: [], roundtrip: 0, - error: '' + error: '', + totalMessageCount: 0, }; export const QueryBuilderContainer = () => { @@ -109,7 +110,7 @@ export const QueryBuilderContainer = () => { const dateTime = moment().unix(); const element = document.createElement('a'); const file = new Blob([exportRows.join('\n')], { - type: 'text/plain;charset=utf-8' + type: 'text/plain;charset=utf-8', }); element.href = URL.createObjectURL(file); element.download = `molecula-${results?.index}-${dateTime}.csv`; @@ -133,7 +134,8 @@ export const QueryBuilderContainer = () => { rows: [], index: table, roundtrip: 0, - error: '' + error: '', + totalMessageCount: 0, }; startTime = moment(); setLoading(true); diff --git a/lattice/src/shared/DataTable/DataTable.tsx b/lattice/src/shared/DataTable/DataTable.tsx index 94510f86d..10cf19865 100644 --- a/lattice/src/shared/DataTable/DataTable.tsx +++ b/lattice/src/shared/DataTable/DataTable.tsx @@ -19,13 +19,15 @@ type TableProps = { data: any[]; loading?: boolean; autoWidth?: boolean; + totalResultsCount: number; }; export const DataTable: FC = ({ headers, data, loading = false, - autoWidth = false + autoWidth = false, + totalResultsCount, }) => { const [sortedData, setSortedData] = useState(data); const [sort, setSort] = useState(headers[0]?.name); @@ -55,7 +57,7 @@ export const DataTable: FC = ({ if (resultsRef.current) { resultsRef.current.scrollIntoView({ behavior: 'smooth', - block: 'start' + block: 'start', }); } }, 0); @@ -70,8 +72,6 @@ export const DataTable: FC = ({ } }; - - return (
@@ -86,14 +86,14 @@ export const DataTable: FC = ({ > onSortClick(col.name)} > {col.name} @@ -120,7 +120,7 @@ export const DataTable: FC = ({ className={css.tableCell} > {formatTableCell(row, col)} - + ))} {autoWidth ? : null} @@ -148,7 +148,6 @@ export const DataTable: FC = ({
- = ({ showTotal={true} onChangePage={onChangePage} onChangePerPage={onChangePerPage} + totalResultsCount={totalResultsCount} />
); diff --git a/lattice/src/shared/Pager/Pager.module.scss b/lattice/src/shared/Pager/Pager.module.scss index c161d396c..26d9840da 100644 --- a/lattice/src/shared/Pager/Pager.module.scss +++ b/lattice/src/shared/Pager/Pager.module.scss @@ -40,3 +40,8 @@ font-size: 0.75rem; color: rgba(var(--contrast-rgb), 0.54); } + +.tooMany { + vertical-align: middle; + margin-right: .5em; +} diff --git a/lattice/src/shared/Pager/Pager.tsx b/lattice/src/shared/Pager/Pager.tsx index d9babbcd6..16590129b 100644 --- a/lattice/src/shared/Pager/Pager.tsx +++ b/lattice/src/shared/Pager/Pager.tsx @@ -1,4 +1,6 @@ import React, { FC } from 'react'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; +import Tooltip from '@material-ui/core/Tooltip'; import classNames from 'classnames'; import Pagination from '@material-ui/lab/Pagination'; import Pluralize from 'react-pluralize'; @@ -13,6 +15,7 @@ type PagerProps = { className?: any; onChangePage: (page: number) => void; onChangePerPage?: (rowsPerPage: number) => void; + totalResultsCount?: number; }; export const Pager: FC = ({ @@ -22,7 +25,8 @@ export const Pager: FC = ({ showTotal = true, className, onChangePage, - onChangePerPage + onChangePerPage, + totalResultsCount = 0, }) => { const numPages = Math.ceil(totalItems / rowsPerPage); const startResults = (page - 1) * rowsPerPage + 1; @@ -45,7 +49,7 @@ export const Pager: FC = ({ options={[ { label: '10', value: '10' }, { label: '25', value: '25' }, - { label: '50', value: '50' } + { label: '50', value: '50' }, ]} onChange={(value) => onChangePerPage(Number(value))} fullWidth @@ -55,6 +59,19 @@ export const Pager: FC = ({ {showTotal && (
+ {totalResultsCount > 1000 && ( + + + + + + )} Showing {startResults} - {endResults} of{` `}