From af7405120417a8257a2b11dbb18694f511c1bf37 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 11:24:21 +0200 Subject: [PATCH 01/14] fix issue with toggle --- .../data-engine/queryBuilder/QueryBuilder.tsx | 5 ++++- .../queryBuilder/QueryBuilderContext.tsx | 15 ++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx index 48159ac..42b19ed 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx @@ -14,7 +14,8 @@ export function QueryBuilder({ forceCompoundMode = false, onChange, validateValueByType, - showConditionSummary = false + showConditionSummary = false, + onQueryBuilderModeToggle, }: { queryInput: QueryInput; metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias @@ -22,6 +23,7 @@ export function QueryBuilder({ onChange: (query: QueryInput) => void; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; showConditionSummary?: boolean; + onQueryBuilderModeToggle: (isCompoundModeOn: boolean) => void; }) { return ( diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 16eaf78..85491da 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -110,7 +110,7 @@ interface QueryBuilderContextInterface { checkIfOperatorRequiresValueField: (operator: Comparator) => boolean; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; isDisplayableInSimpleMode: boolean; - onToggleQueryMode: () => void; + onToggleQueryMode: (isCompoundModeOn:boolean) => void; } export const QueryBuilderContext = createContext( @@ -131,7 +131,8 @@ export const QueryBuilderProvider = ({ metadataFields, forceCompoundMode = false, validateValueByType, - onChange + onChange, + onQueryBuilderModeToggle }: { children: ReactNode; queryInput: QueryInput; @@ -139,6 +140,7 @@ export const QueryBuilderProvider = ({ forceCompoundMode?: boolean; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; onChange: (query: QueryInput) => void; + onQueryBuilderModeToggle: (isCompoundModeOn: boolean) => void; }) => { const getInitialQuery = useCallback(() => { let condition: AndOrMetadataInput | undefined = undefined; @@ -186,6 +188,11 @@ export const QueryBuilderProvider = ({ const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState( checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); + const [isCompoundModeForced, setIsCompoundModeForced] = useState(forceCompoundMode); + + useEffect(() => { + setIsCompoundModeForced(forceCompoundMode); + },[forceCompoundMode]); useEffect(() => { if ( @@ -206,7 +213,8 @@ export const QueryBuilderProvider = ({ }, [forceCompoundMode, queryInput.query]); function onToggleQueryMode() { - setIsSimpleMode(!isSimpleMode); + setIsCompoundModeForced(!isCompoundModeForced); + onQueryBuilderModeToggle(!isCompoundModeForced); } useEffect(() => { @@ -228,6 +236,7 @@ export const QueryBuilderProvider = ({ }; useEffect(() => { + // const debouncedOnChange = _.debounce(onChange, 200); onChange({ ...queryInput, query: From 42d12c0b0857b29265a5088cbb3d72843ab12378 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 12:18:17 +0200 Subject: [PATCH 02/14] wrap debounced func in a useCallback --- .../queryBuilder/QueryBuilderContext.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 85491da..125f8b3 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'; @@ -235,16 +234,24 @@ export const QueryBuilderProvider = ({ return condition; }; - useEffect(() => { - // const debouncedOnChange = _.debounce(onChange, 200); - onChange({ - ...queryInput, - query: - removeRootAndBlockIfWasAddedAndNotNeeded( + const debouncedOnChange = useCallback( + _.debounce(() => { + onChange({ + ...queryInput, + query: removeRootAndBlockIfWasAddedAndNotNeeded( convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {})) ) ?? undefined - }); - }, [rootCondition]); + }); + }, 200), + [onChange, queryInput, rootCondition] + ); + + useEffect(() => { + debouncedOnChange(); + return () => { + debouncedOnChange.cancel(); + }; + }, [debouncedOnChange]); function generateUniqueId(): string { return _.random(0, 100000).toString(); From 655f2a0f3f5cf89c522d1b1d2946470f4cbef0d6 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 12:19:28 +0200 Subject: [PATCH 03/14] value provided to Autocomplete is invalid --- src/components/elements/dropdownV2/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/elements/dropdownV2/index.tsx b/src/components/elements/dropdownV2/index.tsx index 0dccf23..a1600d9 100644 --- a/src/components/elements/dropdownV2/index.tsx +++ b/src/components/elements/dropdownV2/index.tsx @@ -173,6 +173,7 @@ export function DropdownV2({ {/*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={ Date: Thu, 25 Jan 2024 12:22:13 +0200 Subject: [PATCH 04/14] fmt --- .../data-engine/CSVViewer/CSVViewer.tsx | 23 ++++++++----------- .../data-engine/queryBuilder/QueryBuilder.tsx | 2 +- .../queryBuilder/QueryBuilderContext.tsx | 11 +++++---- src/components/elements/dropdownV2/index.tsx | 4 +++- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx b/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx index 53de3a4..8a9244d 100644 --- a/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx +++ b/src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx @@ -2,15 +2,9 @@ import React, { useCallback } from 'react'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-quartz.css'; -import {SizeColumnsToFitGridStrategy} from "ag-grid-community/dist/lib/interfaces/autoSizeStrategy"; +import { SizeColumnsToFitGridStrategy } from 'ag-grid-community/dist/lib/interfaces/autoSizeStrategy'; -export function CSVViewer({ - headers, - values, -}: { - headers: string[]; - values: string[][]; -}) { +export function CSVViewer({ headers, values }: { headers: string[]; values: string[][] }) { // Convert the data into the format expected by AgGridReact const rowData = values.map((rowValues) => { const rowDataObj: Record = {}; @@ -41,7 +35,7 @@ export function CSVViewer({ const autoSizeStrategy: SizeColumnsToFitGridStrategy = { type: 'fitGridWidth', - defaultMinWidth: 100, + defaultMinWidth: 100 }; return ( @@ -53,11 +47,12 @@ export function CSVViewer({ fontFamily: 'Inter!important' }} > - - + ); } diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx index 42b19ed..4d95238 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx @@ -15,7 +15,7 @@ export function QueryBuilder({ onChange, validateValueByType, showConditionSummary = false, - onQueryBuilderModeToggle, + onQueryBuilderModeToggle }: { queryInput: QueryInput; metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 125f8b3..3e0cecf 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -109,7 +109,7 @@ interface QueryBuilderContextInterface { checkIfOperatorRequiresValueField: (operator: Comparator) => boolean; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; isDisplayableInSimpleMode: boolean; - onToggleQueryMode: (isCompoundModeOn:boolean) => void; + onToggleQueryMode: (isCompoundModeOn: boolean) => void; } export const QueryBuilderContext = createContext( @@ -191,7 +191,7 @@ export const QueryBuilderProvider = ({ useEffect(() => { setIsCompoundModeForced(forceCompoundMode); - },[forceCompoundMode]); + }, [forceCompoundMode]); useEffect(() => { if ( @@ -238,9 +238,10 @@ export const QueryBuilderProvider = ({ _.debounce(() => { onChange({ ...queryInput, - query: removeRootAndBlockIfWasAddedAndNotNeeded( - convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {})) - ) ?? undefined + query: + removeRootAndBlockIfWasAddedAndNotNeeded( + convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {})) + ) ?? undefined }); }, 200), [onChange, queryInput, rootCondition] diff --git a/src/components/elements/dropdownV2/index.tsx b/src/components/elements/dropdownV2/index.tsx index a1600d9..baf036f 100644 --- a/src/components/elements/dropdownV2/index.tsx +++ b/src/components/elements/dropdownV2/index.tsx @@ -173,7 +173,9 @@ export function DropdownV2({ {/*This is a hidden div that is used to calculate the width of the input field*/} option.id === value.id && option.label === value.label} + isOptionEqualToValue={(option: RadioButtonItemProps, value: RadioButtonItemProps) => + option.id === value.id && option.label === value.label + } noOptionsText={ Date: Thu, 25 Jan 2024 12:22:48 +0200 Subject: [PATCH 05/14] bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03fc76d..4b4e5fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dagshub/ui", - "version": "0.1.75", + "version": "0.1.76", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dagshub/ui", - "version": "0.1.75", + "version": "0.1.76", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.1", diff --git a/package.json b/package.json index dab53d2..7758053 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.75", + "version": "0.1.76", "description": "A component library for consuming dagshub user interfaces.", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", From de48d350d821265b64027994e8e25a9d979804b2 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 12:39:24 +0200 Subject: [PATCH 06/14] fix use effect dependencies --- .../dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 3e0cecf..ef46038 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -252,7 +252,7 @@ export const QueryBuilderProvider = ({ return () => { debouncedOnChange.cancel(); }; - }, [debouncedOnChange]); + }, [rootCondition]); function generateUniqueId(): string { return _.random(0, 100000).toString(); From 5e3b379b42ee0a43759467c9766364602ddcc402 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 14:50:56 +0200 Subject: [PATCH 07/14] fix toggle issue in a different way --- .../data-engine/queryBuilder/QueryBuilder.tsx | 6 --- .../queryBuilder/QueryBuilderContext.tsx | 45 ++++++------------- 2 files changed, 13 insertions(+), 38 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx index 4d95238..4f69daf 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx @@ -11,28 +11,22 @@ import { MetadataType } from '../metadataKeyValue/MetadataKeyValueList'; export function QueryBuilder({ queryInput, metadataFields, - forceCompoundMode = false, onChange, validateValueByType, showConditionSummary = false, - onQueryBuilderModeToggle }: { 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; - onQueryBuilderModeToggle: (isCompoundModeOn: boolean) => void; }) { return ( diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index ef46038..969f818 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -109,7 +109,7 @@ interface QueryBuilderContextInterface { checkIfOperatorRequiresValueField: (operator: Comparator) => boolean; validateValueByType: (valueType: MetadataType, value: string, comparator: Comparator) => boolean; isDisplayableInSimpleMode: boolean; - onToggleQueryMode: (isCompoundModeOn: boolean) => void; + onToggleQueryMode: () => void; } export const QueryBuilderContext = createContext( @@ -127,19 +127,15 @@ export const useQueryBuilderContext = () => { export const QueryBuilderProvider = ({ children, queryInput, - metadataFields, - forceCompoundMode = false, + metadataFields, validateValueByType, onChange, - onQueryBuilderModeToggle }: { 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; - onQueryBuilderModeToggle: (isCompoundModeOn: boolean) => void; }) => { const getInitialQuery = useCallback(() => { let condition: AndOrMetadataInput | undefined = undefined; @@ -171,27 +167,14 @@ 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( checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); - const [isCompoundModeForced, setIsCompoundModeForced] = useState(forceCompoundMode); - - useEffect(() => { - setIsCompoundModeForced(forceCompoundMode); - }, [forceCompoundMode]); + const [isCompoundModeForced, setIsCompoundModeForced] = useState(false); + const [isSimpleMode, setIsSimpleMode] = useState(() => + isDisplayableInSimpleMode && !isCompoundModeForced + ); useEffect(() => { if ( @@ -199,26 +182,24 @@ 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() { setIsCompoundModeForced(!isCompoundModeForced); - onQueryBuilderModeToggle(!isCompoundModeForced); } useEffect(() => { - setMetadataFieldsList(metadataFields); - }, [metadataFields]); + console.log("set is simple mode", isDisplayableInSimpleMode && !isCompoundModeForced); + console.log("is compound mode forced", isCompoundModeForced); + console.log("is displayable in simple mode", isDisplayableInSimpleMode); + setIsSimpleMode(isDisplayableInSimpleMode && !isCompoundModeForced); + }, [isCompoundModeForced, 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) => { @@ -439,7 +420,7 @@ export const QueryBuilderProvider = ({ setIsSimpleMode, rootCondition, setRootCondition, - metadataFieldsList, + metadataFieldsList: metadataFields, generateUniqueId, addUniqueIds, getOperatorsByMetadataType, From a88dde30263e29547682162ca765344ab6119c65 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 14:51:26 +0200 Subject: [PATCH 08/14] run fmt --- .../data-engine/queryBuilder/QueryBuilder.tsx | 2 +- .../queryBuilder/QueryBuilderContext.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx index 4f69daf..d49d19c 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilder.tsx @@ -13,7 +13,7 @@ export function QueryBuilder({ metadataFields, onChange, validateValueByType, - showConditionSummary = false, + showConditionSummary = false }: { queryInput: QueryInput; metadataFields: MetadataFieldProps[]; // need to take into consideration the select and the alias diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 969f818..d02012e 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -127,9 +127,9 @@ export const useQueryBuilderContext = () => { export const QueryBuilderProvider = ({ children, queryInput, - metadataFields, + metadataFields, validateValueByType, - onChange, + onChange }: { children: ReactNode; queryInput: QueryInput; @@ -172,8 +172,8 @@ export const QueryBuilderProvider = ({ checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); const [isCompoundModeForced, setIsCompoundModeForced] = useState(false); - const [isSimpleMode, setIsSimpleMode] = useState(() => - isDisplayableInSimpleMode && !isCompoundModeForced + const [isSimpleMode, setIsSimpleMode] = useState( + () => isDisplayableInSimpleMode && !isCompoundModeForced ); useEffect(() => { @@ -195,9 +195,9 @@ export const QueryBuilderProvider = ({ } useEffect(() => { - console.log("set is simple mode", isDisplayableInSimpleMode && !isCompoundModeForced); - console.log("is compound mode forced", isCompoundModeForced); - console.log("is displayable in simple mode", isDisplayableInSimpleMode); + console.log('set is simple mode', isDisplayableInSimpleMode && !isCompoundModeForced); + console.log('is compound mode forced', isCompoundModeForced); + console.log('is displayable in simple mode', isDisplayableInSimpleMode); setIsSimpleMode(isDisplayableInSimpleMode && !isCompoundModeForced); }, [isCompoundModeForced, isDisplayableInSimpleMode]); From 54a0347e2199a98b6bc557d25087c8c7aa90f18a Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 16:55:23 +0200 Subject: [PATCH 09/14] simplify context --- .../queryBuilder/QueryBuilderContext.tsx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index d02012e..0c7c29e 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -167,13 +167,12 @@ export const QueryBuilderProvider = ({ return true; }; - const [rootCondition, setRootCondition] = useState(() => getInitialQuery()); + const [rootCondition, setRootCondition] = useState(getInitialQuery); const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState( - checkIfConditionIsDisplayableInSimpleMode(queryInput.query) + ()=>checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); - const [isCompoundModeForced, setIsCompoundModeForced] = useState(false); const [isSimpleMode, setIsSimpleMode] = useState( - () => isDisplayableInSimpleMode && !isCompoundModeForced + isDisplayableInSimpleMode ); useEffect(() => { @@ -191,15 +190,24 @@ export const QueryBuilderProvider = ({ }, [rootCondition]); function onToggleQueryMode() { - setIsCompoundModeForced(!isCompoundModeForced); + setIsSimpleMode((isSimpleMode)=>{ + if(isSimpleMode){ + return false; + } else{ + return isDisplayableInSimpleMode; + } + }); } useEffect(() => { - console.log('set is simple mode', isDisplayableInSimpleMode && !isCompoundModeForced); - console.log('is compound mode forced', isCompoundModeForced); - console.log('is displayable in simple mode', isDisplayableInSimpleMode); - setIsSimpleMode(isDisplayableInSimpleMode && !isCompoundModeForced); - }, [isCompoundModeForced, isDisplayableInSimpleMode]); + 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) => { From df5300c2767e9bcec25f3ad340e5c00d9f2c429c Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 16:56:22 +0200 Subject: [PATCH 10/14] simplify context --- .../queryBuilder/QueryBuilderContext.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 0c7c29e..9a01a27 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -168,12 +168,10 @@ export const QueryBuilderProvider = ({ }; const [rootCondition, setRootCondition] = useState(getInitialQuery); - const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState( - ()=>checkIfConditionIsDisplayableInSimpleMode(queryInput.query) - ); - const [isSimpleMode, setIsSimpleMode] = useState( - isDisplayableInSimpleMode + const [isDisplayableInSimpleMode, setIsDisplayableInSimpleMode] = useState(() => + checkIfConditionIsDisplayableInSimpleMode(queryInput.query) ); + const [isSimpleMode, setIsSimpleMode] = useState(isDisplayableInSimpleMode); useEffect(() => { if ( @@ -190,20 +188,20 @@ export const QueryBuilderProvider = ({ }, [rootCondition]); function onToggleQueryMode() { - setIsSimpleMode((isSimpleMode)=>{ - if(isSimpleMode){ + setIsSimpleMode((isSimpleMode) => { + if (isSimpleMode) { return false; - } else{ + } else { return isDisplayableInSimpleMode; } }); } useEffect(() => { - setIsSimpleMode((isSimpleMode)=>{ - if(isSimpleMode){ + setIsSimpleMode((isSimpleMode) => { + if (isSimpleMode) { return isDisplayableInSimpleMode; - }else{ + } else { return false; } }); From 923dab6c890eaf4a06c07d198d7d43bef4e61800 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Thu, 25 Jan 2024 17:05:47 +0200 Subject: [PATCH 11/14] update var name --- .../data-engine/queryBuilder/QueryBuilderContext.tsx | 4 ++-- .../data-engine/queryBuilder/SimpleCondition.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 9a01a27..700dc88 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -102,7 +102,7 @@ interface QueryBuilderContextInterface { 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 }[]; @@ -426,7 +426,7 @@ export const QueryBuilderProvider = ({ setIsSimpleMode, rootCondition, setRootCondition, - metadataFieldsList: metadataFields, + metadataFields, generateUniqueId, addUniqueIds, getOperatorsByMetadataType, diff --git a/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx b/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx index 7efafeb..014cd93 100644 --- a/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx @@ -37,7 +37,7 @@ export function SimpleCondition({ const { isSimpleMode, validateValueByType, - metadataFieldsList, + metadataFields, getOperatorsByMetadataType, checkIfOperatorRequiresValueField } = useQueryBuilderContext(); @@ -68,7 +68,7 @@ export function SimpleCondition({ const [isEmpty, setIsEmpty] = useState(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,12 @@ export function SimpleCondition({ filter: { ...condition.filter, key: value?.id, - valueType: metadataFieldsList.find((field) => field.name === value?.label) + 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 }))} /> Date: Thu, 25 Jan 2024 17:06:04 +0200 Subject: [PATCH 12/14] fmt --- .../dagshub/data-engine/queryBuilder/SimpleCondition.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx b/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx index 014cd93..a0f5a43 100644 --- a/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx @@ -208,8 +208,7 @@ export function SimpleCondition({ filter: { ...condition.filter, key: value?.id, - valueType: metadataFields.find((field) => field.name === value?.label) - ?.valueType + valueType: metadataFields.find((field) => field.name === value?.label)?.valueType } }); }} From 6c589f2a528acc00fab10a5531a3516cf62e5a26 Mon Sep 17 00:00:00 2001 From: Tal Malka Date: Mon, 29 Jan 2024 15:44:37 +0200 Subject: [PATCH 13/14] fix pr comments --- .../queryBuilder/ConditionTextField.tsx | 6 ++++- .../queryBuilder/QueryBuilderContext.tsx | 26 +++++-------------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx b/src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx index d528092..6e7b270 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/QueryBuilderContext.tsx b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx index 700dc88..84e6aa4 100644 --- a/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx +++ b/src/components/dagshub/data-engine/queryBuilder/QueryBuilderContext.tsx @@ -99,7 +99,6 @@ export interface QueryInput { interface QueryBuilderContextInterface { isSimpleMode: boolean; - setIsSimpleMode: (isSimpleMode: boolean) => void; rootCondition: AndOrMetadataInput; setRootCondition: (rootCondition: AndOrMetadataInput) => void; metadataFields: MetadataFieldProps[]; @@ -221,24 +220,14 @@ export const QueryBuilderProvider = ({ return condition; }; - const debouncedOnChange = useCallback( - _.debounce(() => { - onChange({ - ...queryInput, - query: - removeRootAndBlockIfWasAddedAndNotNeeded( - convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {})) - ) ?? undefined - }); - }, 200), - [onChange, queryInput, rootCondition] - ); - useEffect(() => { - debouncedOnChange(); - return () => { - debouncedOnChange.cancel(); - }; + onChange({ + ...queryInput, + query: + removeRootAndBlockIfWasAddedAndNotNeeded( + convertUiFormatToBackandFormat(removeIdFields(rootCondition ?? {})) + ) ?? undefined + }); }, [rootCondition]); function generateUniqueId(): string { @@ -423,7 +412,6 @@ export const QueryBuilderProvider = ({ Date: Mon, 29 Jan 2024 16:24:01 +0200 Subject: [PATCH 14/14] bump verision --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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",