Skip to content

Added Select all to the Data Import Flow #1161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 27, 2025
Merged

Added Select all to the Data Import Flow #1161

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b98df36
feat(renderer): select all for data import flow
KirthikaKumar-K May 15, 2025
feaaa90
Merge remote-tracking branch 'origin/dev' into 240_dataimportflow_sel…
KirthikaKumar-K May 16, 2025
65aa4dd
feat(renderer/libs): added appropriate comments
KirthikaKumar-K May 16, 2025
6564bc2
feat(renderer): agent review fix
KirthikaKumar-K May 16, 2025
efb6cf6
Merge remote-tracking branch 'origin/dev' into 240_dataimportflow_sel…
KirthikaKumar-K May 20, 2025
deb4a81
Merge remote-tracking branch 'origin/dev' into 240_dataimportflow_sel…
KirthikaKumar-K May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 102 additions & 28 deletions libs/renderer/src/components/shared/DataImportFormModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -16,7 +16,6 @@ import {

import { runPixel, usePixel } from "@semoss/sdk/react";
import {
Checkbox,
useNotification,
Typography,
TextField,
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -378,7 +377,8 @@ export const DataImportFormModal = observer(
});

const notification = useNotification();

/** Select all the rows from a Table */
const [isAllSelected, setIsAllSelected] = useState<boolean>(false);
useEffect(() => {
if (editMode)
retrieveDatabaseTablesAndEdges(cell.parameters.databaseId);
Expand Down Expand Up @@ -519,10 +519,50 @@ export const DataImportFormModal = observer(
}
};

/** Add all the columns from a Table */
const addAllTableColumnsHandler = (event) => {
console.log(event);
// TODO: check all columns from table

/**
* 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);
// 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,
}));

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;
} else {
freshAliasCountObj[alias] = 1;
}
}
});

// 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,
});

setCheckedColumnsCount(allChecked ? updatedColumns.length : 0);
setIsAllSelected(allChecked);
setJoinsStackHandler();
};

const updateSubmitDispatches = () => {
Expand Down Expand Up @@ -613,7 +653,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();
Expand Down Expand Up @@ -813,7 +853,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 = [
Expand Down Expand Up @@ -850,8 +889,7 @@ export const DataImportFormModal = observer(
const pixelTables: Set<string> = new Set();
const pixelColumnNames: string[] = [];
const pixelColumnAliases: string[] = [];
const pixelJoins: string[] = [];

const pixelJoins: string[] = [];
watchedTables?.forEach((tableObject) => {
const currTableColumns = tableObject.columns;
currTableColumns?.forEach((columnObject) => {
Expand Down Expand Up @@ -1077,7 +1115,7 @@ export const DataImportFormModal = observer(
oldAlias = null,
) => {
const newAliasesCountObj = { ...aliasesCountObj };
if (isBeingAdded) {
if (isBeingAdded) {
if (newAliasesCountObj[newAlias] > 0) {
newAliasesCountObj[newAlias] =
newAliasesCountObj[newAlias] + 1;
Expand Down Expand Up @@ -1108,6 +1146,7 @@ export const DataImportFormModal = observer(
delete newAliasesCountObj[oldAlias];
}
}

setAliasesCountObj(newAliasesCountObj);
aliasesCountObjRef.current = { ...newAliasesCountObj };

Expand Down Expand Up @@ -1141,6 +1180,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 */
Expand All @@ -1151,7 +1200,6 @@ export const DataImportFormModal = observer(
const newAliasesCountObj = {};

setCheckedColumnsCount(cell.parameters.selectedColumns.length);

cell.parameters.selectedColumns?.forEach(
(selectedColumnTableCombinedString, idx) => {
const [currTableName, currColumnName] =
Expand All @@ -1168,11 +1216,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}`;
Expand All @@ -1183,6 +1237,7 @@ export const DataImportFormModal = observer(
`tables.${tableIdx}.columns.${columnIdx}.checked`,
true,
);
totalCheckedColumns += 1;
formSetValue(
`tables.${tableIdx}.columns.${columnIdx}.userAlias`,
columnAlias,
Expand All @@ -1191,6 +1246,17 @@ export const DataImportFormModal = observer(
},
);
}
// 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);
}
});
}

Expand Down Expand Up @@ -1294,7 +1360,6 @@ export const DataImportFormModal = observer(
joinsSetCopy.add(newJoinSet);
setJoinsSet(joinsSetCopy);
};

return (
<Modal open={true} maxWidth="lg">
<Modal.Content sx={{ width: importModalPixelWidth }}>
Expand Down Expand Up @@ -1443,17 +1508,26 @@ export const DataImportFormModal = observer(
<Table.Body>
<Table.Row>
<Table.Cell>
<CheckAllIconButton
onClick={
addAllTableColumnsHandler
}
color="primary"
disabled={
true
}
>
<AddBox />
</CheckAllIconButton>
<Checkbox
checked={
isAllSelected
} // Checked if all rows are selected
indeterminate={
checkedColumnsCount >
0 &&
checkedColumnsCount <
watchedTables[
tableIndex
]
.columns
.length
}
onChange={() =>
addAllTableColumnsHandler(
tableIndex,
)
} // Handle the toggle of "select all"
/>
</Table.Cell>
<Table.Cell>
<ColumnNameText variant="body1">
Expand Down