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.

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

[ENHANCEMENT]: Movement of temporary visualization panel data into userconfig #929

Merged
merged 6 commits into from
Aug 11, 2022
Merged

[ENHANCEMENT]: Movement of temporary visualization panel data into userconfig #929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e96d9a
Worked on movement of data to userConfigs
ruchika-narang Aug 8, 2022
840e8b2
Updated snapshots
ruchika-narang Aug 8, 2022
f77b5cc
Updated snapshots
ruchika-narang Aug 10, 2022
aa71643
Updated snapshots for failing checks
ruchika-narang Aug 10, 2022
e60906a
resolved PR comments
shankha-das Aug 11, 2022
f5f0650
visType added
shankha-das Aug 11, 2022
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
15 changes: 0 additions & 15 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5426,11 +5426,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
/>,
"id": "data-panel",
"name": "Data",
Expand Down Expand Up @@ -6106,11 +6101,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
/>,
"id": "data-panel",
"name": "Data",
Expand Down Expand Up @@ -7364,11 +7354,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
>
<div
className="visEditorSidebar__config"
Expand Down
18 changes: 0 additions & 18 deletions ...y/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,21 +77,6 @@ export const ConfigPanel = ({
const { data, vis } = visualizations;
const { userConfigs } = data;

const getDefaultAxisSelected = () => {
let chartBasedAxes: ValueOptionsAxes = {};
const [valueField] = data.defaultAxes?.yaxis ?? [];
if (curVisId === visChartTypes.TreeMap) {
chartBasedAxes['childField'] = data.defaultAxes.xaxis ?? [];
chartBasedAxes['valueField'] = valueField && [valueField];
} else if (curVisId === visChartTypes.HeatMap) {
chartBasedAxes['zaxis'] = valueField && [valueField];
} else {
chartBasedAxes = { ...data.defaultAxes };
}
return {
valueOptions: { ...(chartBasedAxes && chartBasedAxes) },
};
};
const [vizConfigs, setVizConfigs] = useState({
dataConfig: {},
layoutConfig: userConfigs?.layoutConfig
Expand All @@ -103,9 +88,6 @@ export const ConfigPanel = ({
useEffect(() => {
setVizConfigs({
...userConfigs,
dataConfig: {
...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()),
},
layoutConfig: userConfigs?.layoutConfig
? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS)
: getDefaultSpec(),
Expand Down
7 changes: 4 additions & 3 deletions ...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export const ConfigChartOptions = ({
handleConfigChange,
}: any) => {
const { data } = visualizations;
const { metadata: { fields = [] } = {}, tree_map } = data?.rawVizData;
const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;

const handleConfigurationChange = useCallback(
(stateFiledName) => {
Expand Down Expand Up @@ -75,8 +76,8 @@ export const ConfigChartOptions = ({
selectedColor: vizState[schema.mapTo] || schema?.defaultState,
colorPalettes: schema.options || [],
numberOfParents:
(tree_map?.dataConfig?.dimensions !== undefined &&
tree_map?.dataConfig.dimensions[0].parentFields.length) | 0,
(dataConfig?.valueOptions?.dimensions !== undefined &&
dataConfig.valueOptions.dimensions[0].parentFields.length) | 0,
onSelectChange: handleConfigurationChange(schema.mapTo),
};
} else if (schema.eleType === 'input') {
Expand Down
6 changes: 3 additions & 3 deletions ...er/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export const ConfigPanelOptionGauge = ({
panelOptionsValues,
handleConfigChange,
}: any) => {
const { Gauge = {} } = visualizations?.data?.rawVizData;
const dimensions = Gauge?.dataConfig?.dimensions
? Gauge.dataConfig.dimensions.filter((i) => i.name !== '')
const { dataConfig = {} } = visualizations?.data?.userConfigs;
const dimensions = dataConfig?.valueOptions?.dimensions
? dataConfig.valueOptions.dimensions.filter((i) => i.name !== '')
: [];
const [numberOfGauges, setNumberOfGauges] = useState<number>(
DefaultGaugeChartParameters.DisplayDefaultGauges
Expand Down
47 changes: 20 additions & 27 deletions ...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ import {
EuiFieldNumber,
htmlIdGenerator,
} from '@elastic/eui';
import { useDispatch, useSelector } from 'react-redux';
import {
render as renderExplorerVis,
selectExplorerVisualization,
} from '../../../../../../event_analytics/redux/slices/visualization_slice';
import { useDispatch } from 'react-redux';
import {
AGGREGATION_OPTIONS,
numericalTypes,
Expand All @@ -34,9 +30,9 @@ import { TabContext } from '../../../../../hooks';

export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => {
const dispatch = useDispatch();
const { tabId } = useContext<any>(TabContext);
const explorerVisualizations = useSelector(selectExplorerVisualization)[tabId];
const { tabId, curVisId, changeVisualizationConfig } = useContext<any>(TabContext);
const { data } = visualizations;
const { userConfigs } = data;

const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;

Expand All @@ -52,20 +48,18 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
const [configList, setConfigList] = useState<ConfigList>({});

useEffect(() => {
if (
configList.dimensions &&
configList.metrics &&
visualizations.data?.rawVizData?.[visualizations.vis.name] === undefined
) {
if (configList.dimensions && configList.metrics && !userConfigs.dataConfig) {
dispatch(
renderExplorerVis({
changeVisualizationConfig({
tabId,
vizId: curVisId,
data: {
...explorerVisualizations,
[visualizations.vis.name]: {
dataConfig: {
metrics: configList.metrics,
...userConfigs,
dataConfig: {
...userConfigs.dataConfig,
valueOptions: {
dimensions: configList.dimensions,
metrics: configList.metrics,
},
},
},
Expand All @@ -75,12 +69,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
}, [configList]);

useEffect(() => {
if (
data.rawVizData?.[visualizations.vis.name] &&
data.rawVizData?.[visualizations.vis.name].dataConfig
) {
if (userConfigs && userConfigs.dataConfig && userConfigs.dataConfig.valueOptions) {
setConfigList({
...data.rawVizData[visualizations.vis.name].dataConfig,
...userConfigs.dataConfig.valueOptions,
});
} else if (
visualizations.vis.name !== visChartTypes.HeatMap &&
Expand Down Expand Up @@ -158,14 +149,16 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>

const updateChart = () => {
dispatch(
renderExplorerVis({
changeVisualizationConfig({
tabId,
vizId: curVisId,
data: {
...explorerVisualizations,
[visualizations.vis.name]: {
dataConfig: {
metrics: configList.metrics,
...userConfigs,
dataConfig: {
...userConfigs.dataConfig,
valueOptions: {
dimensions: configList.dimensions,
metrics: configList.metrics,
},
},
},
Expand Down
72 changes: 45 additions & 27 deletions ...er/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useContext } from 'react';
import {
EuiTitle,
EuiComboBox,
Expand All @@ -13,19 +13,17 @@ import {
EuiFormRow,
EuiPanel,
} from '@elastic/eui';
import { useDispatch, useSelector } from 'react-redux';
import {
render as renderExplorerVis,
selectExplorerVisualization,
} from '../../../../../../event_analytics/redux/slices/visualization_slice';
import { useDispatch } from 'react-redux';
import { ConfigTreemapParentFields } from './config_treemap_parents';
import { numericalTypes } from '../../../../../../../../common/constants/explorer';
import { TabContext } from '../../../../../hooks';

export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => {
const dispatch = useDispatch();
const explorerVisualizations = useSelector(selectExplorerVisualization)[tabID];
const { tabId, curVisId, changeVisualizationConfig } = useContext<any>(TabContext);

const { data } = visualizations;
const { userConfigs } = data;
const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;

const newEntry = { label: '', name: '' };
Expand All @@ -36,19 +34,32 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
});

useEffect(() => {
if (
data.rawVizData?.[visualizations.vis.name] &&
data.rawVizData?.[visualizations.vis.name].dataConfig
) {
if (userConfigs && userConfigs.dataConfig && userConfigs.dataConfig.valueOptions) {
setConfigList({
...data.rawVizData[visualizations.vis.name].dataConfig,
...userConfigs.dataConfig.valueOptions,
});
} else if (data.defaultAxes.xaxis || data.defaultAxes.yaxis) {
const { xaxis, yaxis } = data.defaultAxes;
setConfigList({
dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }],
metrics: [{ valueField: { ...yaxis[0] } }],
});
dispatch(
changeVisualizationConfig({
tabId,
vizId: curVisId,
data: {
...userConfigs,
dataConfig: {
...userConfigs.dataConfig,
valueOptions: {
dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }],
metrics: [{ valueField: { ...yaxis[0] } }],
},
},
},
})
);
}
}, [
data.defaultAxes,
Expand All @@ -75,22 +86,24 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID

const updateChart = () => {
dispatch(
renderExplorerVis({
tabId: tabID,
changeVisualizationConfig({
tabId,
vizId: curVisId,
data: {
...explorerVisualizations,
[visualizations.vis.name]: {
dataConfig: {
metrics: configList.metrics,
...userConfigs,
dataConfig: {
...userConfigs.dataConfig,
valueOptions: {
dimensions: configList.dimensions,
metrics: configList.metrics,
},
},
},
})
);
};

const getOptionsAvailable = ((sectionName: string) => {
const getOptionsAvailable = (sectionName: string) => {
const { dimensions, metrics } = configList;
let selectedFields = {};
let allSelectedFields = [];
Expand All @@ -100,18 +113,20 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
const [dimElements] = dimensions;
const { childField, parentFields } = dimElements;
allSelectedFields = [childField, ...parentFields];

} else if (key === 'metrics') {
const [metricsElement] = metrics;
allSelectedFields = [metricsElement.valueField];
}
const allValidSelectedFields = allSelectedFields.filter(item => item?.label);
allValidSelectedFields.length > 0 && allValidSelectedFields.forEach((field) => selectedFields[field.label] = true)
const allValidSelectedFields = allSelectedFields.filter((item) => item?.label);
allValidSelectedFields.length > 0 &&
allValidSelectedFields.forEach((field) => (selectedFields[field.label] = true));
}

const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]);
return sectionName === 'metrics' ? unselectedFields.filter((field) => numericalTypes.includes(field.type)) : unselectedFields;
});
return sectionName === 'metrics'
? unselectedFields.filter((field) => numericalTypes.includes(field.type))
: unselectedFields;
};

return (
<div style={{ height: 'auto' }}>
Expand All @@ -127,7 +142,7 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
<EuiFormRow label="Child Field">
<EuiComboBox
placeholder="Select a field"
options={getOptionsAvailable("dimensions")}
options={getOptionsAvailable('dimensions')}
selectedOptions={
configList.dimensions[0].childField?.label !== ''
? [{ label: configList.dimensions[0].childField?.label }]
Expand All @@ -142,7 +157,10 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID

<EuiSpacer size="s" />
<ConfigTreemapParentFields
dropdownList={getOptionsAvailable("dimensions").map((opt) => ({ label: opt.label, name: opt.label }))}
dropdownList={getOptionsAvailable('dimensions').map((opt) => ({
label: opt.label,
name: opt.label,
}))}
selectedAxis={configList.dimensions[0]?.parentFields}
onSelectChange={(val) => updateList('dimensions', 'parentFields', val)}
/>
Expand All @@ -157,7 +175,7 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
<EuiFormRow label="Value Field">
<EuiComboBox
placeholder="Select a field"
options={getOptionsAvailable("metrics")}
options={getOptionsAvailable('metrics')}
selectedOptions={
configList.metrics[0].valueField?.label !== ''
? [{ label: configList.metrics[0].valueField?.label }]
Expand Down
Loading