From b98df365cd7414a8f941f8efa1de48f8bada82b9 Mon Sep 17 00:00:00 2001 From: Kirthikakumar-K Date: Thu, 15 May 2025 20:21:47 +0530 Subject: [PATCH 1/3] feat(renderer): select all for data import flow --- .../components/shared/DataImportFormModal.tsx | 115 ++++++++++++++---- 1 file changed, 89 insertions(+), 26 deletions(-) diff --git a/libs/renderer/src/components/shared/DataImportFormModal.tsx b/libs/renderer/src/components/shared/DataImportFormModal.tsx index ab90e82db..0d533cdc3 100644 --- a/libs/renderer/src/components/shared/DataImportFormModal.tsx +++ b/libs/renderer/src/components/shared/DataImportFormModal.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useRef } from "react"; import { useFieldArray, useForm, Controller } from "react-hook-form"; import { observer } from "mobx-react-lite"; -import { TableContainer } from "@mui/material"; +import { Checkbox, TableContainer } from "@mui/material"; import { ControlPointDuplicateRounded, CalendarViewMonth, @@ -16,7 +16,6 @@ import { import { runPixel, usePixel } from "@semoss/sdk/react"; import { - Checkbox, useNotification, Typography, TextField, @@ -189,9 +188,9 @@ const SingleTableWrapper = styled("div")(() => ({ marginLeft: "12.5px", })); -const CheckAllIconButton = styled(IconButton)(() => ({ - marginLeft: "-10px", -})); +// const CheckAllIconButton = styled(IconButton)(() => ({ +// marginLeft: "-10px", +// })); const AliasWarningIcon = styled(Tooltip)(() => ({ marginLeft: "10px", @@ -520,9 +519,40 @@ export const DataImportFormModal = observer( }; /** Add all the columns from a Table */ - const addAllTableColumnsHandler = (event) => { - console.log(event); - // TODO: check all columns from table + const [isAllSelected, setIsAllSelected] = useState(false); + const addAllTableColumnsHandler = (tableIndex: number) => { + setShownTables(new Set(tableNames)); + setRootTable(watchedTables[tableIndex].name); + const allChecked = !isAllSelected; + + const updatedColumns = watchedTables[tableIndex].columns.map((column) => ({ + ...column, + checked: allChecked, + })); + + const freshAliasCountObj = {}; + updatedColumns.forEach((column) => { + if (allChecked) { + const alias = column.userAlias; + if (alias in freshAliasCountObj) { + freshAliasCountObj[alias] += 1; + } else { + freshAliasCountObj[alias] = 1; + } + } + }); + + setAliasesCountObj(freshAliasCountObj); + aliasesCountObjRef.current = { ...freshAliasCountObj }; + + formSetValue(`tables.${tableIndex}.columns`, updatedColumns, { + shouldDirty: true, + shouldValidate: true, + }); + + setCheckedColumnsCount(allChecked ? updatedColumns.length : 0); + setIsAllSelected(allChecked); + setJoinsStackHandler(); }; const updateSubmitDispatches = () => { @@ -613,7 +643,7 @@ export const DataImportFormModal = observer( /** New Submit for Import Data --- empty */ const onImportDataSubmit = (data: NewFormData) => { - console.log(data); + console.log("submitted data", data); if (editMode) { retrievePreviewData(); updatePixelRef(); @@ -813,7 +843,6 @@ export const DataImportFormModal = observer( setImportModalPixelWidth(IMPORT_MODAL_WIDTHS.large); setTableNames(newTableNames); - // shown tables filtered only on init load of edit mode if (editMode && !isInitLoadComplete) { const newEdges = [ @@ -850,8 +879,7 @@ export const DataImportFormModal = observer( const pixelTables: Set = new Set(); const pixelColumnNames: string[] = []; const pixelColumnAliases: string[] = []; - const pixelJoins: string[] = []; - + const pixelJoins: string[] = []; watchedTables?.forEach((tableObject) => { const currTableColumns = tableObject.columns; currTableColumns?.forEach((columnObject) => { @@ -1077,7 +1105,7 @@ export const DataImportFormModal = observer( oldAlias = null, ) => { const newAliasesCountObj = { ...aliasesCountObj }; - if (isBeingAdded) { + if (isBeingAdded) { if (newAliasesCountObj[newAlias] > 0) { newAliasesCountObj[newAlias] = newAliasesCountObj[newAlias] + 1; @@ -1108,6 +1136,7 @@ export const DataImportFormModal = observer( delete newAliasesCountObj[oldAlias]; } } + setAliasesCountObj(newAliasesCountObj); aliasesCountObjRef.current = { ...newAliasesCountObj }; @@ -1141,6 +1170,16 @@ export const DataImportFormModal = observer( setCheckedColumnsCount(checkedColumnsCount - 1); } setJoinsStackHandler(); + // After unselecting a row, check if all are selected or not + const tables = dataImportwatch("tables"); + const totalColumns = tables[tableIndex].columns.length; + const selectedCount = tables[tableIndex].columns.filter( + (col) => col.checked, + ).length; + + if (selectedCount === totalColumns) { + setIsAllSelected(true); + } }; /** Pre-Populate form For Edit */ @@ -1151,7 +1190,6 @@ export const DataImportFormModal = observer( const newAliasesCountObj = {}; setCheckedColumnsCount(cell.parameters.selectedColumns.length); - cell.parameters.selectedColumns?.forEach( (selectedColumnTableCombinedString, idx) => { const [currTableName, currColumnName] = @@ -1168,11 +1206,17 @@ export const DataImportFormModal = observer( setAliasesCountObj({ ...newAliasesCountObj }); aliasesCountObjRef.current = { ...newAliasesCountObj }; + let totalColumnsToCheck = 0; + let totalCheckedColumns = 0; + if (newTableFields) { newTableFields?.forEach((newTableObj, tableIdx) => { if (tablesWithCheckedBoxes.has(newTableObj.name)) { const watchedTableColumns = watchedTables[tableIdx].columns; + // Count total columns in this table + totalColumnsToCheck += watchedTableColumns.length; + watchedTableColumns?.forEach( (tableColumnObj, columnIdx) => { const columnName = `${tableColumnObj.tableName}__${tableColumnObj.columnName}`; @@ -1183,6 +1227,7 @@ export const DataImportFormModal = observer( `tables.${tableIdx}.columns.${columnIdx}.checked`, true, ); + totalCheckedColumns += 1; formSetValue( `tables.${tableIdx}.columns.${columnIdx}.userAlias`, columnAlias, @@ -1191,6 +1236,14 @@ export const DataImportFormModal = observer( }, ); } + if ( + totalCheckedColumns === totalColumnsToCheck && + totalColumnsToCheck > 0 + ) { + setIsAllSelected(true); + } else { + setIsAllSelected(false); + } }); } @@ -1294,7 +1347,6 @@ export const DataImportFormModal = observer( joinsSetCopy.add(newJoinSet); setJoinsSet(joinsSetCopy); }; - return ( @@ -1443,17 +1495,28 @@ export const DataImportFormModal = observer( - - - + + 0 && + checkedColumnsCount < + dataImportwatch( + "tables", + )[ + tableIndex + ] + .columns + .length + } + onChange={() => + addAllTableColumnsHandler( + tableIndex, + ) + } // Handle the toggle of "select all" + /> From 65aa4ddcb22e41a56064cf8db926903e27c4ba5f Mon Sep 17 00:00:00 2001 From: Kirthikakumar-K Date: Fri, 16 May 2025 14:52:53 +0530 Subject: [PATCH 2/3] feat(renderer/libs): added appropriate comments --- .../components/shared/DataImportFormModal.tsx | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/libs/renderer/src/components/shared/DataImportFormModal.tsx b/libs/renderer/src/components/shared/DataImportFormModal.tsx index 0d533cdc3..88a7d4098 100644 --- a/libs/renderer/src/components/shared/DataImportFormModal.tsx +++ b/libs/renderer/src/components/shared/DataImportFormModal.tsx @@ -377,7 +377,8 @@ export const DataImportFormModal = observer( }); const notification = useNotification(); - + /** Select all the rows from a Table */ + const [isAllSelected, setIsAllSelected] = useState(false); useEffect(() => { if (editMode) retrieveDatabaseTablesAndEdges(cell.parameters.databaseId); @@ -518,13 +519,19 @@ export const DataImportFormModal = observer( } }; - /** Add all the columns from a Table */ - const [isAllSelected, setIsAllSelected] = useState(false); + + /** + * Handles the event when a user clicks the "Select All" button in the Data Import Form Modal. + * If the user clicks the button when all columns are already selected, it unselects all columns. + * If the user clicks the button when no columns are selected, it selects all columns. + * @param {number} tableIndex The index of the table in the watchedTables array. + */ const addAllTableColumnsHandler = (tableIndex: number) => { - setShownTables(new Set(tableNames)); - setRootTable(watchedTables[tableIndex].name); + setShownTables(new Set(tableNames)); + setRootTable(watchedTables[tableIndex].name); + // Check if all columns are currently selected. If they are, set allChecked to false. + // If not, set allChecked to true. const allChecked = !isAllSelected; - const updatedColumns = watchedTables[tableIndex].columns.map((column) => ({ ...column, checked: allChecked, @@ -533,6 +540,7 @@ export const DataImportFormModal = observer( const freshAliasCountObj = {}; updatedColumns.forEach((column) => { if (allChecked) { + // If all columns are being selected, increment the alias count for this column's alias. const alias = column.userAlias; if (alias in freshAliasCountObj) { freshAliasCountObj[alias] += 1; @@ -542,9 +550,11 @@ export const DataImportFormModal = observer( } }); + // Update the aliasesCountObj state variable with the new alias count object. setAliasesCountObj(freshAliasCountObj); aliasesCountObjRef.current = { ...freshAliasCountObj }; + // Update the form value for the columns of the table at the given index with the updated columns array. formSetValue(`tables.${tableIndex}.columns`, updatedColumns, { shouldDirty: true, shouldValidate: true, @@ -1236,10 +1246,13 @@ export const DataImportFormModal = observer( }, ); } - if ( - totalCheckedColumns === totalColumnsToCheck && - totalColumnsToCheck > 0 - ) { + // If all columns in the table are checked, set isAllSelected to true. + // Otherwise, set isAllSelected to false. + // We do this by comparing the total number of columns in the table + // (totalColumnsToCheck) to the total number of columns that are checked + // (totalCheckedColumns). If the two values are equal, then all columns + // are checked. If not, then some columns are not checked. + if (totalCheckedColumns === totalColumnsToCheck && totalColumnsToCheck > 0) { setIsAllSelected(true); } else { setIsAllSelected(false); From 6564bc29e91ea9be75b191dbd0a89058d1432a46 Mon Sep 17 00:00:00 2001 From: Kirthikakumar-K Date: Fri, 16 May 2025 15:05:58 +0530 Subject: [PATCH 3/3] feat(renderer): agent review fix --- libs/renderer/src/components/shared/DataImportFormModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/libs/renderer/src/components/shared/DataImportFormModal.tsx b/libs/renderer/src/components/shared/DataImportFormModal.tsx index 88a7d4098..36c1d1690 100644 --- a/libs/renderer/src/components/shared/DataImportFormModal.tsx +++ b/libs/renderer/src/components/shared/DataImportFormModal.tsx @@ -1516,9 +1516,7 @@ export const DataImportFormModal = observer( checkedColumnsCount > 0 && checkedColumnsCount < - dataImportwatch( - "tables", - )[ + watchedTables[ tableIndex ] .columns