Skip to content

Commit

Permalink
Feature/cldn 1748 (#243)
Browse files Browse the repository at this point in the history 
* [CLDN-1748] adding base component

* [CLDN-1748] changing state to use advanced data type

* [CLDN-1748] add multi select for musiness type

* [CLDN-1748] adding config manager

* [CLDN-1748] fixing build errors

* temp update of base image

* [CLDN-1748] Fixing Url parameter encoding and show name of dashboard drilling to

* temp update of image

* Pulling extra data from dashboard endpoint

* Adding more data to filters object

* [CLDN-1748] passing mroe fitler information

* [CLDN-1748] QA feedback

* [CLDN-1748] Fixing build issues

* [CLDN-1748] Updating dockerfile

* [CLDN-1748] Updating dockerfile

* fixing props name

* update image

* updating docker file

* [CLDN-1748] Name changes

* [CLDN-1748] updating image

* [CLDN-1748] Adding icon

* [CLDN-1748] fixing build errors

* [CLDN-1748] update image

* [CLDN-1748] fixing context menue to renderering

* UPdating docker file
  • Loading branch information
@cccs-RyanS
cccs-RyanS authored and GITHUB_USERNAME committed Feb 7, 2023
1 parent d4b1b0f commit a5a40e2
Show file tree
Hide file tree
Showing 7 changed files with 602 additions and 50 deletions.
1 change: 1 addition & 0 deletions cccs-build/superset/Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ FROM uchimera.azurecr.io/cccs/superset-base:CLDN-1928-filter-incorrectly-display




USER root

COPY *requirements.txt /tmp/
Expand Down
201 changes: 152 additions & 49 deletions superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx
View file
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[] }, disableOveride: boolean): (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: disableOveride || sub_menu.length < 1, icon: '<span class="ag-icon ag-icon-pivot" unselectable="on" role="presentation"></span>' }
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, (params.value === null))
)
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,51 @@ 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) && renderedValue) {
newSelectedbyAdvancedType[advancedDataType].push(renderedValue);
}
}
});
Expand All @@ -263,8 +366,8 @@ export default function CccsGrid({
}
});
});

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

Expand Down
Loading

0 comments on commit a5a40e2

Please sign in to comment.