diff --git a/package-lock.json b/package-lock.json index c83765f..0242c69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dagshub/ui", - "version": "0.1.77", + "version": "0.1.78", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dagshub/ui", - "version": "0.1.77", + "version": "0.1.78", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.1", diff --git a/package.json b/package.json index e4705ce..8b5b978 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "type": "git", "url": "git+https://github.com/dagshub/design-system.git" }, - "version": "0.1.77", + "version": "0.1.78", "description": "A component library for consuming dagshub user interfaces.", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx b/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx index 30a843e..c4e55e4 100644 --- a/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx +++ b/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx @@ -35,7 +35,7 @@ export function CSVViewer({ headers, values }: { headers: string[]; values: stri const autoSizeStrategy: SizeColumnsToFitGridStrategy = { type: 'fitGridWidth', - defaultMinWidth: 100, + defaultMinWidth: 100 }; return ( diff --git a/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx b/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx index 55b236e..b34ffa8 100644 --- a/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx @@ -4,6 +4,7 @@ import StyledTextField from '../metadataKeyValue/StyledTextField'; import '../metadataKeyValue/style.scss'; import { ThemeProvider, Typography } from '@mui/material'; import theme from '../../../../theme'; +import {useDebounce} from "react-use"; export function ConditionTextField({ disabled, @@ -67,6 +68,10 @@ export function ConditionTextField({ } }; + useDebounce(() => { + onChange(currentValue); + },200, [currentValue]); + return ( { setCurrentValue(e.target.value); - onChange(e.target.value); }} onKeyDown={handleKeyDown} value={currentValue} diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx index ed822d6..73728e6 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx @@ -11,14 +11,12 @@ import { MetadataType } from '../metadataKeyValue/MetadataKeyValueList'; export function QueryBuilder({ queryInput, metadataFields, - forceCompoundMode = false, onChange, validateValueByType, showConditionSummary = false, }: { queryInput: QueryInput; metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias - forceCompoundMode?: boolean; onChange: (query: QueryInput) => void; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; showConditionSummary?: boolean; @@ -27,7 +25,6 @@ export function QueryBuilder({ diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 8aeb6de..05accb4 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -7,7 +7,6 @@ import React, { useState, } from 'react'; import _ from 'lodash'; -import { root } from 'postcss'; type MetadataType = 'BOOLEAN' | 'INTEGER' | 'FLOAT' | 'STRING' | 'BLOB'; @@ -100,10 +99,9 @@ export interface QueryInput { interface QueryBuilderContextInterface { isSimpleMode: boolean; - setIsSimpleMode: (isSimpleMode: boolean) => void; rootCondition: AndOrMetadataInput; setRootCondition: (rootCondition: AndOrMetadataInput) => void; - metadataFieldsList: MetadataFieldProps[]; + metadataFields: MetadataFieldProps[]; generateUniqueId: () => string; addUniqueIds: (input: AndOrMetadataInput) => AndOrMetadataInput; getOperatorsByMetadataType: (type: MetadataType) => { label: string; id: Comparator }[]; @@ -129,14 +127,12 @@ export const QueryBuilderProvider = ({ children, queryInput, metadataFields, - forceCompoundMode = false, validateValueByType, onChange, }: { children: ReactNode; queryInput: QueryInput; metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias - forceCompoundMode?: boolean; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; onChange: (query: QueryInput) => void; }) => { @@ -170,22 +166,11 @@ export const QueryBuilderProvider = ({ return true; }; - const checkIfSimpleMode = useCallback( - (query: AndOrMetadataInput | undefined) => { - return !forceCompoundMode && checkIfConditionIsDisplayableInSimpleMode(query); - }, - [forceCompoundMode] - ); - - const [rootCondition, setRootCondition] = useState(() => getInitialQuery()); - const [isSimpleMode, setIsSimpleMode] = useState(() => - checkIfSimpleMode(queryInput.query) - ); - const [metadataFieldsList, setMetadataFieldsList] = - useState(metadataFields); - const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState( + const [rootCondition, setRootCondition] = useState(getInitialQuery); + const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState(() => checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); + const [isSimpleMode, setIsSimpleMode] = useState(isDisplayableInSimpleMode); useEffect(() => { if ( @@ -193,25 +178,33 @@ export const QueryBuilderProvider = ({ JSON.stringify(removeIdFields(rootCondition)) ) { setRootCondition(getInitialQuery); + setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(queryInput.query)); } - setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(queryInput.query)); }, [queryInput.query]); useEffect(() => { setIsDisplayableInSimpleMode(checkIfConditionIsDisplayableInSimpleMode(rootCondition)); }, [rootCondition]); - useEffect(() => { - setIsSimpleMode(checkIfSimpleMode(queryInput.query)); - }, [forceCompoundMode, queryInput.query]); - function onToggleQueryMode() { - setIsSimpleMode(!isSimpleMode); + setIsSimpleMode((isSimpleMode) => { + if (isSimpleMode) { + return false; + } else { + return isDisplayableInSimpleMode; + } + }); } useEffect(() => { - setMetadataFieldsList(metadataFields); - }, [metadataFields]); + setIsSimpleMode((isSimpleMode) => { + if (isSimpleMode) { + return isDisplayableInSimpleMode; + } else { + return false; + } + }); + }, [isDisplayableInSimpleMode]); //This function is used to remove the root and wrapper, if it was added for ui purposes and not needed anymore const removeRootAndBlockIfWasAddedAndNotNeeded = (condition: AndOrMetadataInput | null) => { @@ -419,10 +412,9 @@ export const QueryBuilderProvider = ({ (checkIfConditionIsUncompleted()); function getSelectedMetadataKey() { - return metadataFieldsList?.find((field) => field.name === condition.filter?.key); + return metadataFields?.find((field) => field.name === condition.filter?.key); } const [selectedMetadataKey, setSelectedMetadataKey] = useState( @@ -89,7 +89,7 @@ export function SimpleCondition({ useEffect(() => { setSelectedMetadataKey(getSelectedMetadataKey()); - }, [metadataFieldsList, condition.filter?.key]); + }, [metadataFields, condition.filter?.key]); useEffect(() => { setSelectedOperator(getSelectedComparator()); @@ -208,12 +208,11 @@ export function SimpleCondition({ filter: { ...condition.filter, key: value?.id, - valueType: metadataFieldsList.find((field) => field.name === value?.label) - ?.valueType, - }, + valueType: metadataFields.find((field) => field.name === value?.label)?.valueType, + } }); }} - options={metadataFieldsList?.map((field) => ({ id: field.name, label: field.name }))} + options={metadataFields?.map((field) => ({ id: field.name, label: field.name }))} /> {/*This is a hidden div that is used to calculate the width of the input field*/} + option.id === value.id && option.label === value.label + } noOptionsText={