Skip to content
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.

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

Feature/cldn 1748 #243

Merged
merged 28 commits into from
Feb 6, 2023
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
0b37b75
[CLDN-1748] adding base component
cccs-RyanS Oct 18, 2022
d4e4a70
[CLDN-1748] changing state to use advanced data type
cccs-RyanS Oct 28, 2022
1222a20
[CLDN-1748] add multi select for musiness type
cccs-RyanS Nov 1, 2022
18e26b1
[CLDN-1748] adding config manager
cccs-RyanS Nov 14, 2022
ea52827
[CLDN-1748] fixing build errors
cccs-RyanS Nov 21, 2022
b4a3f3c
temp update of base image
cccs-RyanS Nov 21, 2022
970e896
[CLDN-1748] Fixing Url parameter encoding and show name of dashboard …
cccs-RyanS Nov 22, 2022
c24169e
temp update of image
cccs-RyanS Nov 22, 2022
18b956d
Pulling extra data from dashboard endpoint
cccs-RyanS Nov 24, 2022
1adfb74
Adding more data to filters object
cccs-RyanS Nov 28, 2022
9ac6b33
[CLDN-1748] passing mroe fitler information
cccs-RyanS Dec 1, 2022
ac000a5
[CLDN-1748] QA feedback
cccs-RyanS Jan 6, 2023
9155c0e
[CLDN-1748] Fixing build issues
cccs-RyanS Jan 6, 2023
a672c5c
[CLDN-1748] Updating dockerfile
cccs-RyanS Jan 6, 2023
5029eea
[CLDN-1748] Updating dockerfile
cccs-RyanS Jan 6, 2023
3b36c86
fixing props name
cccs-RyanS Jan 6, 2023
8348ad6
update image
cccs-RyanS Jan 6, 2023
bd77560
updating docker file
cccs-RyanS Jan 9, 2023
a332408
[CLDN-1748] Name changes
cccs-RyanS Jan 16, 2023
1a2139b
Merge branch 'cccs-2.0' into feature/CLDN-1748
cccs-RyanS Jan 16, 2023
7e6abc1
[CLDN-1748] updating image
cccs-RyanS Jan 16, 2023
2b2871a
[CLDN-1748] Adding icon
cccs-RyanS Jan 18, 2023
b4bd42a
Merge branch 'cccs-2.0' into feature/CLDN-1748
cccs-RyanS Jan 20, 2023
58443f9
[CLDN-1748] fixing build errors
cccs-RyanS Jan 20, 2023
d6a9409
[CLDN-1748] update image
cccs-RyanS Jan 20, 2023
72bfb8b
[CLDN-1748] fixing context menue to renderering
cccs-RyanS Feb 2, 2023
c2ada2a
UPdating docker file
cccs-RyanS Feb 2, 2023
4c71172
Merge branch 'cccs-2.0' into feature/CLDN-1748
cccs-RyanS Feb 3, 2023
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
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';

import { PAGE_SIZE_OPTIONS } from './plugin/controlPanel';
import rison from 'rison';

const DEFAULT_COLUMN_DEF = {
editable: false,
Expand Down Expand Up @@ -81,14 +82,18 @@ export default function CccsGrid({
enable_grouping = false,
column_state,
filters: initialFilters = {},
datasetColumns,
jumpActionConfigs,
}: CccsGridTransformedProps) {
LicenseManager.setLicenseKey(agGridLicenseKey);
const dispatch = useDispatch();
const crossFilterValue = useSelector<RootState, any>(
state => state.dataMask[formData.slice_id]?.filterState?.value,
);

const [selectedDataByColumnName, setSelectedDataColumnName] = useState<{[key: string]: string[] }>(initialFilters);
const [selectedDataByAdvancedType, setselectedDataByAdvancedType] = useState<{[key: string]: string[]}>(initialFilters);

const [filters, setFilters] = useState(initialFilters);
const [principalColumnFilters, setPrincipalColumnFilters] = useState({});
const [searchValue, setSearchValue] = useState('');
const [pageSize, setPageSize] = useState<number>(page_length);
Expand All @@ -100,7 +105,6 @@ export default function CccsGrid({
if (!emitFilter) {
return;
}

const groupBy = Object.keys(filters);
const groupByValues = Object.values(filters);
setDataMask({
Expand All @@ -127,57 +131,131 @@ export default function CccsGrid({
},
});
},
[emitFilter, setDataMask, filters, principalColumnFilters],
[emitFilter, setDataMask, selectedDataByColumnName, principalColumnFilters],
); // only take relevant page size options

const generateNativeFilterUrlString = (nativefilterID: string, urlSelectedData: any[], column: string = "" ) =>{
const stringSelectedData = urlSelectedData.map( e => {
return `${e.toString()}`
})
const navtiveFilter = {
extraFormData: {
filters: [
{col: column,
op: "IN",
val: stringSelectedData}
]
},
filterState: {
label: stringSelectedData,
validateStatus: false,
value: stringSelectedData
},
id: nativefilterID,
ownState: {}
}
return navtiveFilter
}
const getJumpToDashboardContextMenuItems = (selectedData: {[key: string]: string[] }): (string | MenuItemDef)[] => {

let sub_menu: any = []
for (let key in jumpActionConfigs) {

let advancedDataTypeNativeFilters = jumpActionConfigs[key];
let nativeFilterUrls: any = {};
let jumpActionName: string = ""
advancedDataTypeNativeFilters.forEach((element: any) => {
jumpActionName = element.name
let advancedDataType = element['advancedDataType'];
let nativefilters: any[] = element["nativefilters"];
let selectedDataForUrl = selectedData[advancedDataType];

if (selectedDataForUrl && nativefilters) {
nativefilters.forEach( filter => {
nativeFilterUrls[filter["value"]] = generateNativeFilterUrlString(filter["value"], selectedDataForUrl, filter["column"])
});
}

});

if (Object.keys(nativeFilterUrls).length !== 0){

let action = () => {
let baseUrl = location.protocol + '//' + location.host;
let url = `${baseUrl}/superset/dashboard/${key}/?native_filters=${rison.encode(nativeFilterUrls)}`
window.open(url, '_blank');
}

let DashboardMenuItem = {
name: jumpActionName,
action
}

sub_menu.push(DashboardMenuItem)
}

}

const menu = {name: "Jump to dashboard", subMenu: sub_menu, disabled: sub_menu.length < 1}
return [ menu ]
}

const getContextMenuItems = useCallback(
(params: GetContextMenuItemsParams): (string | MenuItemDef)[] => {

let result: (string | MenuItemDef)[] = [];
if (!emitFilter) {
result = ['copy', 'copyWithHeaders', 'paste', 'separator', 'export'];
} else {
result = [
'copy',
'copyWithHeaders',
'paste',
'separator',
{
name: 'Emit Filter(s)',
disabled: params.value === null,
action: () => handleChange(filters),
// eslint-disable-next-line theme-colors/no-literal-colors
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
},
{
name: 'Emit Principal Column Filter(s)',
disabled:
ensureIsArray(principalColumns).length === 0 ||
Object.keys(principalColumnFilters).some(column =>
principalColumnFilters[column].some((val: any) => val === null),
) ||
params.node === null,
action: () => handleChange(principalColumnFilters),
// eslint-disable-next-line theme-colors/no-literal-colors
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
},
{
name: 'Clear Emitted Filter(s)',
disabled: crossFilterValue === undefined,
action: () => dispatch(clearDataMask(formData.slice_id)),
icon: '<span class="ag-icon ag-icon-cross" unselectable="on" role="presentation"></span>',
},
result = ['copy', 'copyWithHeaders', 'paste',];

if(emitFilter) {
result = result.concat(
[
'separator',
{
name: 'Emit Filter(s)',
disabled: params.value === null,
action: () => handleChange(selectedDataByColumnName),
// eslint-disable-next-line theme-colors/no-literal-colors
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
},
{
name: 'Emit Principal Column Filter(s)',
disabled:
ensureIsArray(principalColumns).length === 0 ||
Object.keys(principalColumnFilters).some(column =>
principalColumnFilters[column].some((val: any) => val === null),
) ||
params.node === null,
action: () => handleChange(principalColumnFilters),
// eslint-disable-next-line theme-colors/no-literal-colors
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
},
{
name: 'Clear Emitted Filter(s)',
disabled: crossFilterValue === undefined,
action: () => dispatch(clearDataMask(formData.slice_id)),
icon: '<span class="ag-icon ag-icon-cross" unselectable="on" role="presentation"></span>',
},
]
)
}
result = result.concat(
getJumpToDashboardContextMenuItems(selectedDataByAdvancedType)
)
result = result.concat(
[
'separator',
'export',
];
}
'export'
]
)

return result;
},
[
emitFilter,
selectedDataByColumnName,
principalColumns,
crossFilterValue,
handleChange,
filters,
principalColumnFilters,
dispatch,
formData.slice_id,
Expand Down Expand Up @@ -220,26 +298,50 @@ export default function CccsGrid({

const gridApi = params.api;
const cellRanges = gridApi.getCellRanges();

const updatedFilters = {};

const updatedSelectedData: {[key: string]: string[] } = {};
const newSelectedbyAdvancedType: {[key: string]: string[] } = {};
const updatedPrincipalColumnFilters = {};


cellRanges.forEach((range: any) => {
range.columns.forEach((column: any) => {
const col = getEmitTarget(column.colDef?.field);
updatedFilters[col] = updatedFilters[col] || [];
let advancedDataType = datasetColumns.find( (column) => { return column.column_name == col })?.advanced_data_type || ""


updatedSelectedData[col] = updatedSelectedData[col] || [];

newSelectedbyAdvancedType[advancedDataType] = newSelectedbyAdvancedType[advancedDataType] || []

const startRow = Math.min(
range.startRow.rowIndex,
range.endRow.rowIndex,
);

const endRow = Math.max(range.startRow.rowIndex, range.endRow.rowIndex);
for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
for (let rowIndex = startRow; rowIndex <= endRow; rowIndex++) {

const rowNode = gridApi.getModel().getRow(rowIndex)
const value = gridApi.getValue(
column,
gridApi.getModel().getRow(rowIndex),
rowNode,
);
if (!updatedFilters[col].includes(value)) {
updatedFilters[col].push(value);

const valueRendererName = column.colDef.cellRenderer
let valueRendererObjt = null
let renderedValue = null
if (valueRendererName) {
const valueRenderer = valueRendererName ? frameworkComponents[valueRendererName] : undefined
valueRendererObjt = new valueRenderer({value, valueFormatted: null})
}
renderedValue = valueRendererObjt ? valueRendererObjt.render() : value

if (!updatedSelectedData[col].includes(value)) {
updatedSelectedData[col].push(value);
}
if (!newSelectedbyAdvancedType[advancedDataType].includes(renderedValue)) {
newSelectedbyAdvancedType[advancedDataType].push(renderedValue);
}
}
});
Expand All @@ -263,8 +365,8 @@ export default function CccsGrid({
}
});
});

setFilters(updatedFilters);
setselectedDataByAdvancedType(newSelectedbyAdvancedType);
setSelectedDataColumnName(updatedSelectedData);
setPrincipalColumnFilters(updatedPrincipalColumnFilters);
};

Expand Down
Loading