feat(widget-options-architecture): apply advanced architecture

apps/web/src/api-clients/_common/composables/use-scoped-query.ts

@@ -68,10 +68,7 @@ export const useScopedQuery = <TQueryFnData = unknown, TError = unknown, TData =
 
     const queryEnabled = computed<boolean>(() => {
         const _inheritedEnabled = options?.enabled as MaybeRef<boolean> | undefined;
-
-        if (_inheritedEnabled !== undefined && !toValue(_inheritedEnabled)) {
-            return false;
-        }
+        if (_inheritedEnabled !== undefined && !toValue(_inheritedEnabled)) return false;
         return _state.isValidScope && !_state.isLoading;
     });
 

apps/web/src/api-clients/dashboard/public-widget/schema/model.ts

@@ -16,7 +16,7 @@ export interface PublicWidgetModel {
     size: WidgetSize;
     data_table_id: string;
     widget_type: WidgetType;
-    options: Record<WidgetFieldName, WidgetFieldValue<WidgetFieldValues>>;
+    options: Record<Partial<WidgetFieldName>, WidgetFieldValue<WidgetFieldValues>>;
     tags: Tags;
     workspace_id?: string;
     domain_id?: string;

apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue

@@ -4,7 +4,9 @@ import {
 } from 'vue';
 
 import { useMutation } from '@tanstack/vue-query';
-import { isArray, isEqual, uniq } from 'lodash';
+import {
+    cloneDeep, isArray, isEqual, uniq,
+} from 'lodash';
 
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
@@ -51,12 +53,6 @@ import type {
 } from '@/common/modules/widgets/types/widget-model';
 
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
-
-import {
-    useDashboardDataTableCascadeUpdate,
-} from '@/services/dashboards/composables/use-dashboard-data-table-cascade-update';
-import { useDashboardWidgetFormQuery } from '@/services/dashboards/composables/use-dashboard-widget-form-query';
-
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
@@ -358,11 +354,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
 
     const result = await updateDataTableAndCascadeUpdate(updateParams);
     if (widget.value?.state === 'ACTIVE') {
-        const sanitizedOptions = sanitizeWidgetOptions({
-            widgetHeader: {
-                ...widget.value?.options?.widgetHeader,
-            },
-        });
+        const _widgetOptions = cloneDeep(widget.value.options);
+        const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widget.value.widget_type, result);
         await updateWidget({
             widget_id: widgetGenerateState.widgetId,
             state: 'INACTIVE',

apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue

@@ -370,11 +370,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     };
     const result = await updateDataTableAndCascadeUpdate(updateParams);
     if (widget.value?.state === 'ACTIVE') {
-        const sanitizedOptions = sanitizeWidgetOptions({
-            widgetHeader: {
-                ...widget.value?.options?.widgetHeader,
-            },
-        });
+        const _widgetOptions = cloneDeep(widget.value.options);
+        const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widget.value.widget_type, result);
         await updateWidget({
             widget_id: widgetGenerateState.widgetId,
             state: 'INACTIVE',

apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue

@@ -5,6 +5,7 @@ import {
 import type { TranslateResult } from 'vue-i18n';
 
 import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
 
 import {
     PButton, PButtonModal, POverlayLayout, PTextButton,
@@ -21,8 +22,10 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormOverlayStep1 from '@/common/modules/widgets/_components/WidgetFormOverlayStep1.vue';
 import WidgetFormOverlayStep2 from '@/common/modules/widgets/_components/WidgetFormOverlayStep2.vue';
 import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { UNSUPPORTED_CHARTS_IN_PIVOT } from '@/common/modules/widgets/_constants/widget-constant';
 import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -36,6 +39,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     widget,
+    dataTableList,
     api,
     keys,
     fetcher,
@@ -45,6 +49,7 @@ const {
 });
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value?.find((item) => item.data_table_id === widgetGenerateState.selectedDataTableId)),
     sidebarTitle: computed(() => {
         if (widgetGenerateState.overlayType === 'EXPAND') return undefined;
         let _title = i18n.t('COMMON.WIDGETS.ADD_WIDGET');
@@ -127,12 +132,13 @@ const handleClickContinue = async () => {
             if (widget.value?.state === 'ACTIVE') {
                 _updateParams.state = 'INACTIVE';
             }
-            if (widget.value?.options?.widgetHeader) {
-                _updateParams.options = {
-                    widgetHeader: widget.value?.options?.widgetHeader,
-                };
+            let widgetType = widget.value?.widget_type ?? 'table';
+            if (UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetType)) {
+                widgetType = 'table';
+                _updateParams.widget_type = widgetType;
             }
-            const sanitizedOptions = sanitizeWidgetOptions(_updateParams.options ?? {}, _updateParams.widget_type ?? 'table');
+            const _widgetOptions = cloneDeep(widget.value?.options ?? {});
+            const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widgetType, state.selectedDataTable);
             await updateWidget({
                 ..._updateParams,
                 options: sanitizedOptions,

apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue

@@ -156,7 +156,7 @@ const { mutateAsync: updateWidgetMutate } = useMutation({
 const updateWidget = async () => {
     if (!widgetGenerateState.widgetId) return;
     const _isCreating = widget.value?.state === 'CREATING';
-    const sanitizedOptions = sanitizeWidgetOptions(state.fieldManager.data, widgetGenerateState.selectedWidgetName);
+    const sanitizedOptions = sanitizeWidgetOptions(state.fieldManager.data, widgetGenerateState.selectedWidgetName, state.selectedDataTable);
     const result = await updateWidgetMutate({
         widget_id: widgetGenerateState.widgetId,
         size: widgetGenerateState.size,

apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue

@@ -32,6 +32,7 @@ import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
 import WidgetHeaderField from '@/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue';
+import tableConfig from '@/common/modules/widgets/_widgets/table/widget-config';
 
 import { gray, red } from '@/styles/colors';
 
@@ -126,26 +127,32 @@ const { mutateAsync: updateWidget } = useMutation({
 const handleSelectDataTable = async (dataTableId: string) => {
     const selectedDataTable = dataTableList.value.find((d) => d.data_table_id === dataTableId);
     if (!selectedDataTable) return;
+
+    const isPivotDataTable = selectedDataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
+    let widgetType = widgetGenerateState.selectedWidgetName;
+
+    if (isPivotDataTable && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetType)) {
+        widgetType = 'table';
+        widgetGenerateStore.setSelectedWidgetName('table');
+        widgetGenerateStore.setSize(tableConfig.meta.sizes[0]);
+    }
+
     widgetGenerateStore.setSelectedDataTableId(dataTableId);
-    const sanitizedOptions = sanitizeWidgetOptions();
+    const sanitizedOptions = sanitizeWidgetOptions(props.fieldManager.data, widgetType, selectedDataTable);
     await updateWidget({
         widget_id: widgetGenerateState.widgetId,
         data_table_id: dataTableId,
         state: 'INACTIVE',
         options: sanitizedOptions,
     });
 
-    props.fieldManager.updateDataTableAndOriginData(selectedDataTable, {});
-
-    // check if selected chart type is supported in pivot
-    if (selectedDataTable.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
-        changeWidgetType('table');
-    }
+    props.fieldManager.updateDataTableAndOriginData(selectedDataTable, sanitizedOptions);
 };
 
 const handleSelectWidgetName = (widgetName: string) => {
     changeWidgetType(widgetName);
 };
+
 const handleClickEditDataTable = () => {
     widgetGenerateStore.setOverlayStep(1);
     state.widgetDefaultValidationModalVisible = false;
@@ -185,7 +192,8 @@ const changeWidgetType = (widgetName: string) => {
     widgetGenerateStore.setSelectedWidgetName(widgetName);
     widgetGenerateStore.setSize(_config.meta.sizes[0]);
 
-    props.fieldManager.updateWidgetType(_config);
+    const sanitizedOptions = sanitizeWidgetOptions(props.fieldManager.data, widgetName, state.selectedDataTable);
+    props.fieldManager.updateModifiedData(sanitizedOptions);
     checkDefaultValidation();
 };
 

apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts

@@ -157,7 +157,7 @@ export const useWidgetFrame = (
         unitMap: computed<Record<string, string>>(() => {
             const _result: Record<string, string> = {};
             dataTableList.value.forEach((d) => {
-                Object.entries(d.data_info).forEach(([k, v]) => {
+                Object.entries(d?.data_info ?? {}).forEach(([k, v]) => {
                     if (v?.unit) _result[k] = v.unit;
                 });
             });

apps/web/src/common/modules/widgets/_helpers/widget-helper.ts

@@ -1,11 +1,18 @@
 import bytes from 'bytes';
+import { cloneDeep } from 'lodash';
 
 import { byteFormatter, customNumberFormatter, numberFormatter } from '@cloudforet/utils';
 
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+
+import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
+import { integrateFieldsSchema } from '@/common/modules/widgets/_helpers/widget-field-helper';
+import { WIDGET_OPTIONS_AFFECTED_BY_DATA_TABLE, widgetValidatorRegistry } from '@/common/modules/widgets/_widget-field-value-manager/constant/validator-registry';
 import type { NumberFormatInfo } from '@/common/modules/widgets/_widget-fields/number-format/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
 
 import { SIZE_UNITS } from '@/services/asset-inventory-v1/constants/asset-analysis-constant';
@@ -47,21 +54,107 @@ export const getFormattedNumber = (val: number, numberFormatInfo?: NumberFormatI
     }
 };
 
-export const sanitizeWidgetOptions = (options: Record<string, any> = {}, widgetType: WidgetType = 'table') => {
+export const sanitizeWidgetOptions = (options: WidgetModel['options'] = {}, widgetType: WidgetType = 'table', dataTable?: DataTableModel): WidgetModel['options'] => {
     const currentOptionKeys = Object.keys(options ?? {});
     const widgetConfig = getWidgetConfig(widgetType);
+    const _fieldsSchema = integrateFieldsSchema(widgetConfig?.requiredFieldsSchema ?? {}, widgetConfig?.optionalFieldsSchema ?? {});
     const validOptionKeys = [
-        ...Object.keys(widgetConfig?.requiredFieldsSchema ?? {}),
-        ...Object.keys(widgetConfig?.optionalFieldsSchema ?? {}),
+        ...Object.keys(_fieldsSchema),
         'widgetHeader',
     ];
 
+    if (!widgetConfig) return options;
+
     // Remove keys that are not in the validOptionKeys list
     currentOptionKeys.forEach((key) => {
         if (!validOptionKeys.includes(key)) {
             delete options[key];
         }
+
+        const fieldValue = cloneDeep(options[key]).value;
+        const validator = widgetValidatorRegistry[key];
+        const isFieldAffectedByDataTable = WIDGET_OPTIONS_AFFECTED_BY_DATA_TABLE.includes(key);
+
+        if (!dataTable || !fieldValue || !validator || !isFieldAffectedByDataTable) return;
+
+        const fieldOptions = _fieldsSchema[key]?.options ?? {};
+        if (!validator(fieldValue, widgetConfig, dataTable, options)) {
+            const availableFieldKeys = Object.keys(dataTable?.[fieldOptions?.dataTarget || 'data_info'] ?? {});
+            console.debug('key', key, dataTable, fieldValue, availableFieldKeys, fieldOptions, validator(fieldValue, widgetConfig, dataTable, options));
+            console.debug('availableFieldKeys', key, fieldOptions, availableFieldKeys, fieldValue.data);
+            if (key === 'dataField') {
+                const isMultiSelectable = fieldOptions?.multiSelectable;
+
+                const isPivotDataTable = dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
+                if (isPivotDataTable) {
+                    const pivotColumnsField = dataTable?.options.PIVOT?.fields?.column;
+                    options[key] = { value: { ...fieldValue, data: isMultiSelectable ? [pivotColumnsField] : pivotColumnsField } };
+                } else if (isMultiSelectable) {
+                    options[key] = {
+                        value: {
+                            ...fieldValue,
+                            data: fieldValue.data?.filter((val) => availableFieldKeys.includes(val)) || [],
+                        },
+                    };
+                } else if (!availableFieldKeys.includes(fieldValue.data)) {
+                    options[key] = { value: { ...fieldValue, data: availableFieldKeys[0] } };
+                }
+            }
+            if (key === 'groupBy') {
+                const isMultiSelectable = fieldOptions?.multiSelectable;
+                if (isMultiSelectable) {
+                    options[key] = {
+                        value: {
+                            ...fieldValue,
+                            data: fieldValue.data?.filter((val) => availableFieldKeys.includes(val)) || [],
+                        },
+                    };
+                } else if (!availableFieldKeys.includes(fieldValue.data)) {
+                    options[key] = { value: { ...fieldValue, data: availableFieldKeys[0] } };
+                }
+            }
+            if (key === 'categoryBy' || key === 'stackBy' || key === 'xAxis' || key === 'yAxis') {
+                if (!availableFieldKeys.includes(fieldValue.data)) {
+                    options[key] = { value: { ...fieldValue, data: availableFieldKeys[0] } };
+                }
+            }
+            if (key === 'sankeyDimensions') {
+                options[key] = {
+                    value: {
+                        ...fieldValue,
+                        data: fieldValue.data?.filter((val) => availableFieldKeys.includes(val)) || [],
+                    },
+                };
+            }
+            if (key === 'formatRules' && fieldOptions.useField) {
+                if (!availableFieldKeys.includes(fieldValue.field)) {
+                    options[key] = {
+                        value: {
+                            ...fieldValue,
+                            field: availableFieldKeys[0],
+                        },
+                    };
+                }
+            }
+            if (key === 'customTableColumnWidth') {
+                const _availableFieldKeys = [...Object.keys(dataTable?.labels_info ?? {}), ...Object.keys(dataTable?.data_info ?? {})];
+                options[key] = {
+                    value: {
+                        widthInfos: fieldValue.widthInfos?.filter((widthInfo) => _availableFieldKeys.includes(widthInfo.fieldKey)) || [],
+                    },
+                };
+            }
+            if (key === 'tableColumnComparison') {
+                options[key] = {
+                    value: {
+                        ...fieldValue,
+                        fields: fieldValue.fields?.filter((field) => availableFieldKeys.includes(field)) || [],
+                    },
+                };
+            }
+        }
     });
 
+    console.debug('options', options);
     return options;
 };

apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts

@@ -149,19 +149,19 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
     dataField: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dataFieldOptions = (_fieldsSchema.dataField?.options ?? {}) as DataFieldOptions;
-
+        const multiSelectable = dataFieldOptions.multiSelectable;
         const result = cloneDeep(widgetFieldDefaultValueMap.dataField);
 
         const isPivotDataTable = dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
         if (isPivotDataTable) { // if pivot dataTable, always multiSelectable
             return {
-                data: [dataTable?.options.PIVOT?.fields?.column],
+                data: multiSelectable ? [dataTable?.options.PIVOT?.fields?.column] : dataTable?.options.PIVOT?.fields?.column,
             };
         }
 
         const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.data_info ?? {}));
 
-        if (dataFieldOptions.multiSelectable) {
+        if (multiSelectable) {
             result.data = dataFieldOptions.allSelected ? fieldKeys : [fieldKeys?.[0]];
         } else {
             result.data = fieldKeys?.[0];