[improvement][semantic-fe] Fixing the logic error in the dimension value setting. (#499)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.
This commit is contained in:
tristanliu
2023-12-12 19:40:24 +08:00
committed by GitHub
parent 5c96d75d39
commit caefa501f2
16 changed files with 537 additions and 875 deletions

View File

@@ -1,4 +1,4 @@
export const ROUTE_AUTH_CODES = {};
export const ROUTE_AUTH_CODES = { SYSTEM_ADMIN: 'SYSTEM_ADMIN' };
const ENV_KEY = {
CHAT: 'chat',
@@ -88,8 +88,8 @@ const ROUTES = [
{
path: '/system',
name: 'system',
hideInMenu: true,
component: './System',
access: ROUTE_AUTH_CODES.SYSTEM_ADMIN,
},
{
path: '/',

View File

@@ -11,7 +11,9 @@ import { queryCurrentUser } from './services/user';
import { traverseRoutes, isMobile, getToken } from './utils/utils';
import { publicPath } from '../config/defaultSettings';
import { Copilot } from 'supersonic-chat-sdk';
import { getSystemConfig } from '@/services/user';
export { request } from './services/request';
import { ROUTE_AUTH_CODES } from '../config/routes';
const replaceRoute = '/';
@@ -37,8 +39,13 @@ export const initialStateConfig = {
),
};
const getAuthCodes = () => {
return [];
const getAuthCodes = (params: any) => {
const { currentUser, systemConfigAdmins } = params;
const codes = [];
if (Array.isArray(systemConfigAdmins) && systemConfigAdmins.includes(currentUser?.staffName)) {
codes.push(ROUTE_AUTH_CODES.SYSTEM_ADMIN);
}
return codes;
};
export async function getInitialState(): Promise<{
@@ -58,6 +65,16 @@ export async function getInitialState(): Promise<{
return undefined;
};
const fetchSystemConfigPermission = async () => {
try {
const { code, data } = await getSystemConfig();
if (code === 200) {
const { admins } = data;
return [...admins];
}
} catch (error) {}
return [];
};
let currentUser: any;
if (!window.location.pathname.includes('login')) {
currentUser = await fetchUserInfo();
@@ -70,7 +87,12 @@ export async function getInitialState(): Promise<{
}
}
const authCodes = getAuthCodes();
const systemConfigAdmins = await fetchSystemConfigPermission();
const authCodes = getAuthCodes({
currentUser,
systemConfigAdmins,
});
return {
fetchUserInfo,

View File

@@ -1,51 +1,17 @@
import { Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useModel, history } from 'umi';
import React from 'react';
import Avatar from './AvatarDropdown';
import { SettingOutlined } from '@ant-design/icons';
import { getSystemConfig } from '@/services/user';
import styles from './index.less';
export type SiderTheme = 'light' | 'dark';
const GlobalHeaderRight: React.FC = () => {
const { initialState } = useModel('@@initialState');
const [hasSettingPermisson, setHasSettingPermisson] = useState<boolean>(false);
useEffect(() => {
querySystemConfig();
}, []);
if (!initialState || !initialState.settings) {
return null;
}
const { currentUser = {} } = initialState as any;
const querySystemConfig = async () => {
const { code, data } = await getSystemConfig();
if (code === 200) {
const { admins } = data;
if (Array.isArray(admins) && admins.includes(currentUser?.staffName)) {
setHasSettingPermisson(true);
}
}
};
function handleLogin() {}
return (
<Space className={styles.right}>
<Avatar onClickLogin={handleLogin} />
{hasSettingPermisson && (
<span
className={styles.action}
style={{ padding: 20 }}
onClick={() => {
history.push(`/system`);
}}
>
<SettingOutlined />
</span>
)}
</Space>
);
};

View File

@@ -190,9 +190,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
if (record.hasAdminRes) {
return (
<a
onClick={() => {
history.replace(`/model/${record.domainId}/${record.modelId}/metric`);
}}
target="blank"
href={`/webapp/model/${record.domainId}/${record.modelId}/metric`}
// onClick={() => {
// history.push(`/model/${record.domainId}/${record.modelId}/metric`);
// }}
>
{record.modelName}
</a>

View File

@@ -22,6 +22,7 @@ import MetricTable from './Table';
import { ColumnConfig } from '../data';
import dayjs from 'dayjs';
import { ISemantic } from '../../data';
import { DateFieldMap } from '@/pages/SemanticModel/constant';
const FormItem = Form.Item;
const { Option } = Select;
@@ -32,11 +33,6 @@ type Props = {
};
const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
const dateFieldMap = {
[DateRangeType.DAY]: 'sys_imp_date',
[DateRangeType.WEEK]: 'sys_imp_week',
[DateRangeType.MONTH]: 'sys_imp_month',
};
const indicatorFields = useRef<{ name: string; column: string }[]>([]);
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
@@ -61,7 +57,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
}>({
startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD'),
dateField: dateFieldMap[DateRangeType.DAY],
dateField: DateFieldMap[DateRangeType.DAY],
});
const [rowNumber, setRowNumber] = useState<number>(5);
const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
@@ -227,12 +223,12 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
onDateRangeChange={(value, config) => {
const [startDate, endDate] = value;
const { dateSettingType, dynamicParams, staticParams } = config;
let dateField = dateFieldMap[DateRangeType.DAY];
let dateField = DateFieldMap[DateRangeType.DAY];
if (DateSettingType.DYNAMIC === dateSettingType) {
dateField = dateFieldMap[dynamicParams.dateRangeType];
dateField = DateFieldMap[dynamicParams.dateRangeType];
}
if (DateSettingType.STATIC === dateSettingType) {
dateField = dateFieldMap[staticParams.dateRangeType];
dateField = DateFieldMap[staticParams.dateRangeType];
}
setPeriodDate({ startDate, endDate, dateField });
}}

View File

@@ -1029,6 +1029,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
{createDimensionModalVisible && (
<DimensionInfoModal
modelId={modelId}
domainId={selectDomainId}
bindModalVisible={createDimensionModalVisible}
dimensionItem={dimensionItem}
dataSourceList={nodeDataSource ? [nodeDataSource] : dataSourceInfoList}

View File

@@ -1,817 +0,0 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import type { StateType } from '../model';
// import { IGroup } from '@antv/g-base';
import type { Dispatch } from 'umi';
import {
typeConfigs,
formatterRelationData,
loopNodeFindDataSource,
getNodeConfigByType,
flatGraphDataNode,
} from './utils';
import { message } from 'antd';
import { getDomainSchemaRela } from '../service';
import { Item, TreeGraphData, NodeConfig, IItemBaseConfig } from '@antv/g6-core';
import initToolBar from './components/ToolBar';
import initTooltips from './components/ToolTips';
import initContextMenu from './components/ContextMenu';
// import initLegend from './components/Legend';
import { SemanticNodeType } from '../enum';
import G6 from '@antv/g6';
import { ISemantic, IDataSource } from '../data';
import NodeInfoDrawer from './components/NodeInfoDrawer';
import DimensionInfoModal from '../components/DimensionInfoModal';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import DeleteConfirmModal from './components/DeleteConfirmModal';
import ClassDataSourceTypeModal from '../components/ClassDataSourceTypeModal';
import GraphToolBar from './components/GraphToolBar';
import GraphLegend from './components/GraphLegend';
import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem';
import { flowRectNodeRegister, cardNodeRegister } from './CustomNodeRegister';
// import { cloneDeep } from 'lodash';
type Props = {
// graphShowType?: SemanticNodeType;
domainManger: StateType;
dispatch: Dispatch;
};
flowRectNodeRegister();
const DomainManger: React.FC<Props> = ({
domainManger,
// graphShowType = SemanticNodeType.DIMENSION,
// graphShowType,
dispatch,
}) => {
const ref = useRef(null);
const dataSourceRef = useRef<ISemantic.IDomainSchemaRelaList>([]);
const [graphData, setGraphData] = useState<TreeGraphData>();
const [createDimensionModalVisible, setCreateDimensionModalVisible] = useState<boolean>(false);
const [createMetricModalVisible, setCreateMetricModalVisible] = useState<boolean>(false);
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
const [currentNodeData, setCurrentNodeData] = useState<any>();
const legendDataRef = useRef<any[]>([]);
const graphRef = useRef<any>(null);
// const legendDataFilterFunctions = useRef<any>({});
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [nodeDataSource, setNodeDataSource] = useState<any>();
const [dataSourceInfoList, setDataSourceInfoList] = useState<IDataSource.IDataSourceItem[]>([]);
const { dimensionList, metricList, selectModelId: modelId, selectDomainId } = domainManger;
const dimensionListRef = useRef<ISemantic.IDimensionItem[]>([]);
const metricListRef = useRef<ISemantic.IMetricItem[]>([]);
const [confirmModalOpenState, setConfirmModalOpenState] = useState<boolean>(false);
const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
const visibleModeOpenRef = useRef<boolean>(false);
const [visibleModeOpen, setVisibleModeOpen] = useState<boolean>(false);
const graphShowTypeRef = useRef<SemanticNodeType>();
const [graphShowTypeState, setGraphShowTypeState] = useState<SemanticNodeType>();
const graphLegendDataSourceIds = useRef<string[]>();
useEffect(() => {
dimensionListRef.current = dimensionList;
metricListRef.current = metricList;
}, [dimensionList, metricList]);
const handleSeachNode = (text: string) => {
const filterData = dataSourceRef.current.reduce(
(data: ISemantic.IDomainSchemaRelaList, item: ISemantic.IDomainSchemaRelaItem) => {
const { dimensions, metrics } = item;
const dimensionsList = dimensions.filter((dimension) => {
return dimension.name.includes(text);
});
const metricsList = metrics.filter((metric) => {
return metric.name.includes(text);
});
data.push({
...item,
dimensions: dimensionsList,
metrics: metricsList,
});
return data;
},
[],
);
const rootGraphData = changeGraphData(filterData);
refreshGraphData(rootGraphData);
};
const changeGraphData = (dataSourceList: ISemantic.IDomainSchemaRelaList): TreeGraphData => {
const relationData = formatterRelationData({
dataSourceList,
type: graphShowTypeRef.current,
limit: 20,
showDataSourceId: graphLegendDataSourceIds.current,
});
const graphRootData = {
id: 'root',
name: domainManger.selectDomainName,
children: relationData,
};
return graphRootData;
};
const initLegendData = (graphRootData: TreeGraphData) => {
const legendList = graphRootData?.children?.map((item: any) => {
const { id, name } = item;
return {
id,
label: name,
order: 4,
...typeConfigs.datasource,
};
});
legendDataRef.current = legendList as any;
};
const queryDataSourceList = async (params: {
domainId: number;
graphShowType?: SemanticNodeType;
}) => {
const { code, data } = await getDomainSchemaRela(params.domainId);
if (code === 200) {
if (data) {
setDataSourceInfoList(
data.map((item: ISemantic.IDomainSchemaRelaItem) => {
return item.model;
}),
);
const graphRootData = changeGraphData(data);
dataSourceRef.current = data;
initLegendData(graphRootData);
setGraphData(graphRootData);
return graphRootData;
}
return false;
} else {
return false;
}
};
useEffect(() => {
graphLegendDataSourceIds.current = undefined;
graphRef.current = null;
queryDataSourceList({ domainId: selectDomainId });
}, [selectDomainId]);
// const getLegendDataFilterFunctions = () => {
// legendDataRef.current.map((item: any) => {
// const { id } = item;
// legendDataFilterFunctions.current = {
// ...legendDataFilterFunctions.current,
// [id]: (d: any) => {
// if (d.legendType === id) {
// return true;
// }
// return false;
// },
// };
// });
// };
// const setAllActiveLegend = (legend: any) => {
// const legendCanvas = legend._cfgs.legendCanvas;
// if (!legendCanvas) {
// return;
// }
// // 从图例中找出node-group节点;
// const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
// // 数据源的图例节点在node-group中的children中
// const groups = group.get('children');
// groups.forEach((itemGroup: any) => {
// const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
// // legend中activateLegend事件触发在图例节点的Text上方法中存在向上溯源的逻辑const shapeGroup = shape.get('parent');
// // 因此复用实例方法时在这里不能直接将图例节点传入需要在节点的children中找任意一个元素作为入参
// legend.activateLegend(labelText);
// });
// };
const handleContextMenuClickEdit = (item: IItemBaseConfig) => {
const targetData = item.model;
if (!targetData) {
return;
}
const datasource = loopNodeFindDataSource(item);
if (datasource) {
setNodeDataSource({
...datasource,
id: datasource.uid,
});
}
if (targetData.nodeType === SemanticNodeType.DATASOURCE) {
setCreateDataSourceModalOpen(true);
return;
}
if (targetData.nodeType === SemanticNodeType.DIMENSION) {
const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
if (targetItem) {
setDimensionItem({ ...targetItem });
setCreateDimensionModalVisible(true);
} else {
message.error('获取维度初始化数据失败');
}
return;
}
if (targetData.nodeType === SemanticNodeType.METRIC) {
const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
if (targetItem) {
setMetricItem({ ...targetItem });
setCreateMetricModalVisible(true);
} else {
message.error('获取指标初始化数据失败');
}
return;
}
};
const handleContextMenuClickCreate = (item: IItemBaseConfig, key: string) => {
const datasource = item.model;
if (!datasource) {
return;
}
setNodeDataSource({
...datasource,
id: datasource.uid,
});
if (key === 'createDimension') {
setCreateDimensionModalVisible(true);
}
if (key === 'createMetric') {
setCreateMetricModalVisible(true);
}
setDimensionItem(undefined);
setMetricItem(undefined);
};
const handleContextMenuClickDelete = (item: IItemBaseConfig) => {
const targetData = item.model;
if (!targetData) {
return;
}
if (targetData.nodeType === SemanticNodeType.DATASOURCE) {
setCurrentNodeData({
...targetData,
id: targetData.uid,
});
setConfirmModalOpenState(true);
return;
}
if (targetData.nodeType === SemanticNodeType.DIMENSION) {
const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
if (targetItem) {
setCurrentNodeData({ ...targetData, ...targetItem });
setConfirmModalOpenState(true);
} else {
message.error('获取维度初始化数据失败');
}
}
if (targetData.nodeType === SemanticNodeType.METRIC) {
const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
if (targetItem) {
setCurrentNodeData({ ...targetData, ...targetItem });
setConfirmModalOpenState(true);
} else {
message.error('获取指标初始化数据失败');
}
}
};
const handleContextMenuClick = (key: string, item: Item) => {
if (!item?._cfg) {
return;
}
switch (key) {
case 'edit':
case 'editDatasource':
handleContextMenuClickEdit(item._cfg);
break;
case 'delete':
case 'deleteDatasource':
handleContextMenuClickDelete(item._cfg);
break;
case 'createDimension':
case 'createMetric':
handleContextMenuClickCreate(item._cfg, key);
break;
default:
break;
}
};
const handleNodeTypeClick = (nodeData: any) => {
setCurrentNodeData(nodeData);
setInfoDrawerVisible(true);
};
const graphConfigMap = {
dendrogram: {
defaultEdge: {
type: 'cubic-horizontal',
},
layout: {
type: 'dendrogram',
direction: 'LR',
animate: false,
nodeSep: 200,
rankSep: 300,
radial: true,
},
},
mindmap: {
defaultEdge: {
type: 'polyline',
},
layout: {
type: 'mindmap',
animate: false,
direction: 'H',
getHeight: () => {
return 50;
},
getWidth: () => {
return 50;
},
getVGap: () => {
return 10;
},
getHGap: () => {
return 50;
},
},
},
};
function handleToolBarClick(code: string) {
if (code === 'visibleMode') {
visibleModeOpenRef.current = !visibleModeOpenRef.current;
setVisibleModeOpen(visibleModeOpenRef.current);
return;
}
visibleModeOpenRef.current = false;
setVisibleModeOpen(false);
}
const lessNodeZoomRealAndMoveCenter = () => {
const bbox = graphRef.current.get('group').getBBox();
// 计算图形的中心点
const centerX = (bbox.minX + bbox.maxX) / 2;
const centerY = (bbox.minY + bbox.maxY) / 2;
// 获取画布的中心点
const canvasWidth = graphRef.current.get('width');
const canvasHeight = graphRef.current.get('height');
const canvasCenterX = canvasWidth / 2;
const canvasCenterY = canvasHeight / 2;
// 计算画布需要移动的距离
const dx = canvasCenterX - centerX;
const dy = canvasCenterY - centerY;
// 将画布移动到中心点
graphRef.current.translate(dx, dy);
// 将缩放比例设置为 1以画布中心点为中心进行缩放
graphRef.current.zoomTo(1, { x: canvasCenterX, y: canvasCenterY });
};
useEffect(() => {
if (!Array.isArray(graphData?.children)) {
return;
}
const container = document.getElementById('semanticGraph');
const width = container!.scrollWidth;
const height = container!.scrollHeight || 500;
const graph = graphRef.current;
if (!graph && graphData) {
const graphNodeList = flatGraphDataNode(graphData.children);
const graphConfigKey = graphNodeList.length > 20 ? 'dendrogram' : 'mindmap';
// getLegendDataFilterFunctions();
const toolbar = initToolBar({ onSearch: handleSeachNode, onClick: handleToolBarClick });
const tooltip = initTooltips();
const contextMenu = initContextMenu({
onMenuClick: handleContextMenuClick,
});
// const legend = initLegend({
// nodeData: legendDataRef.current,
// filterFunctions: { ...legendDataFilterFunctions.current },
// });
graphRef.current = new G6.Graph({
container: 'semanticGraph',
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
modes: {
default: [
// {
// type: 'collapse-expand',
// onChange: function onChange(item, collapsed) {
// const data = item!.get('model');
// data.collapsed = collapsed;
// return true;
// },
// },
'drag-node',
'drag-canvas',
// 'activate-relations',
{
type: 'zoom-canvas',
sensitivity: 0.3, // 设置缩放灵敏度,值越小,缩放越不敏感,默认值为 1
},
{
type: 'activate-relations',
trigger: 'mouseenter', // 触发方式,可以是 'mouseenter' 或 'click'
resetSelected: true, // 点击空白处时,是否取消高亮
},
],
},
defaultNode: {
type: 'card-node',
},
});
// graphRef.current = new G6.TreeGraph({
// container: 'semanticGraph',
// width,
// height,
// modes: {
// default: [
// // {
// // type: 'collapse-expand',
// // onChange: function onChange(item, collapsed) {
// // const data = item!.get('model');
// // data.collapsed = collapsed;
// // return true;
// // },
// // },
// 'drag-node',
// 'drag-canvas',
// // 'activate-relations',
// {
// type: 'zoom-canvas',
// sensitivity: 0.3, // 设置缩放灵敏度,值越小,缩放越不敏感,默认值为 1
// },
// {
// type: 'activate-relations',
// trigger: 'mouseenter', // 触发方式,可以是 'mouseenter' 或 'click'
// resetSelected: true, // 点击空白处时,是否取消高亮
// },
// ],
// },
// defaultNode: {
// type: 'card-node',
// },
// defaultEdge: {
// type: 'cubic-horizontal',
// style: {
// stroke: '#CED4D9',
// },
// },
// // defaultNode: {
// // size: 26,
// // anchorPoints: [
// // [0, 0.5],
// // [1, 0.5],
// // ],
// // labelCfg: {
// // position: 'right',
// // offset: 5,
// // style: {
// // stroke: '#fff',
// // lineWidth: 4,
// // },
// // },
// // },
// // defaultEdge: {
// // type: graphConfigMap[graphConfigKey].defaultEdge.type,
// // },
// layout: {
// ...graphConfigMap[graphConfigKey].layout,
// },
// plugins: [tooltip, toolbar, contextMenu],
// // plugins: [legend, tooltip, toolbar, contextMenu],
// });
cardNodeRegister(graphRef.current);
graphRef.current.set('initGraphData', graphData);
graphRef.current.set('initDataSource', dataSourceRef.current);
// const legendCanvas = legend._cfgs.legendCanvas;
// legend模式事件方法bindEvents会有点击图例空白清空选中的逻辑在注册click事件前先将click事件队列清空
// legend._cfgs.legendCanvas._events.click = [];
// legendCanvas.on('click', () => {
// // @ts-ignore findLegendItemsByState为Legend的 private方法忽略ts校验
// const activedNodeList = legend.findLegendItemsByState('active');
// // 获取当前所有激活节点后进行数据遍历筛选;
// const activedNodeIds = activedNodeList.map((item: IGroup) => {
// return item.cfg.id;
// });
// const graphDataClone = cloneDeep(graphData);
// const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
// ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
// if (activedNodeIds.includes(item.id)) {
// children.push(item);
// }
// return children;
// }, [])
// : [];
// graphDataClone.children = filterGraphDataChildren;
// refreshGraphData(graphDataClone);
// });
graphRef.current.node(function (node: NodeConfig) {
return getNodeConfigByType(node, {
label: node.name,
});
});
const data = {
nodes: [
{
name: 'cardNodeApp',
ip: '127.0.0.1',
nodeError: true,
dataType: 'root',
keyInfo: 'this is a card node info',
x: 100,
y: 50,
},
{
name: 'cardNodeApp',
ip: '127.0.0.1',
nodeError: false,
dataType: 'subRoot',
keyInfo: 'this is sub root',
x: 100,
y: 150,
},
{
name: 'cardNodeApp',
ip: '127.0.0.1',
nodeError: false,
dataType: 'subRoot',
keyInfo: 'this is sub root',
x: 100,
y: 250,
children: [
{
name: 'sub',
},
],
},
],
edges: [],
};
graphRef.current.data(data);
// graphRef.current.data(graphData);
graphRef.current.render();
const nodeCount = graphRef.current.getNodes().length;
if (nodeCount < 10) {
lessNodeZoomRealAndMoveCenter();
} else {
graphRef.current.fitView([80, 80]);
}
graphRef.current.on('node:click', (evt: any) => {
const item = evt.item; // 被操作的节点 item
const itemData = item?._cfg?.model;
if (itemData) {
const { nodeType } = itemData;
if (
[
SemanticNodeType.DIMENSION,
SemanticNodeType.METRIC,
SemanticNodeType.DATASOURCE,
].includes(nodeType)
) {
handleNodeTypeClick(itemData);
return;
}
}
});
graphRef.current.on('canvas:click', () => {
setInfoDrawerVisible(false);
});
const rootNode = graphRef.current.findById('root');
graphRef.current.hideItem(rootNode);
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graphRef.current || graphRef.current.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graphRef.current.changeSize(container.scrollWidth, container.scrollHeight);
};
}
}, [graphData]);
const updateGraphData = async (params?: { graphShowType?: SemanticNodeType }) => {
const graphRootData = await queryDataSourceList({
modelId,
graphShowType: params?.graphShowType,
});
if (graphRootData) {
refreshGraphData(graphRootData);
}
};
const refreshGraphData = (graphRootData: TreeGraphData) => {
graphRef.current.changeData(graphRootData);
const rootNode = graphRef.current.findById('root');
graphRef.current.hideItem(rootNode);
graphRef.current.fitView();
};
return (
<>
<GraphLegend
legendOptions={legendDataRef.current}
defaultCheckAll={true}
onChange={(nodeIds: string[]) => {
graphLegendDataSourceIds.current = nodeIds;
const rootGraphData = changeGraphData(dataSourceRef.current);
refreshGraphData(rootGraphData);
}}
/>
{visibleModeOpen && (
<GraphLegendVisibleModeItem
value={graphShowTypeState}
onChange={(showType) => {
graphShowTypeRef.current = showType;
setGraphShowTypeState(showType);
const rootGraphData = changeGraphData(dataSourceRef.current);
refreshGraphData(rootGraphData);
}}
/>
)}
<GraphToolBar
onClick={({ eventName }: { eventName: string }) => {
setNodeDataSource(undefined);
if (eventName === 'createDatabase') {
setCreateDataSourceModalOpen(true);
}
if (eventName === 'createDimension') {
setCreateDimensionModalVisible(true);
setDimensionItem(undefined);
}
if (eventName === 'createMetric') {
setCreateMetricModalVisible(true);
setMetricItem(undefined);
}
}}
/>
<div
ref={ref}
key={`${modelId}`}
id="semanticGraph"
style={{ width: '100%', height: 'calc(100vh - 175px)', position: 'relative' }}
/>
<NodeInfoDrawer
nodeData={currentNodeData}
placement="right"
onClose={() => {
setInfoDrawerVisible(false);
}}
open={infoDrawerVisible}
mask={false}
getContainer={false}
onEditBtnClick={(nodeData: any) => {
handleContextMenuClickEdit({ model: nodeData });
setInfoDrawerVisible(false);
}}
onNodeChange={({ eventName }: { eventName: string }) => {
updateGraphData();
setInfoDrawerVisible(false);
if (eventName === SemanticNodeType.METRIC) {
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
}
if (eventName === SemanticNodeType.DIMENSION) {
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
}
}}
/>
{createDimensionModalVisible && (
<DimensionInfoModal
modelId={modelId}
bindModalVisible={createDimensionModalVisible}
dimensionItem={dimensionItem}
dataSourceList={nodeDataSource ? [nodeDataSource] : dataSourceInfoList}
onSubmit={() => {
setCreateDimensionModalVisible(false);
updateGraphData();
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
}}
onCancel={() => {
setCreateDimensionModalVisible(false);
}}
/>
)}
{createMetricModalVisible && (
<MetricInfoCreateForm
domainId={selectDomainId}
modelId={modelId}
key={metricItem?.id}
datasourceId={nodeDataSource?.id}
createModalVisible={createMetricModalVisible}
metricItem={metricItem}
onSubmit={() => {
setCreateMetricModalVisible(false);
updateGraphData();
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
}}
onCancel={() => {
setCreateMetricModalVisible(false);
}}
/>
)}
{
<ClassDataSourceTypeModal
open={createDataSourceModalOpen}
onCancel={() => {
setNodeDataSource(undefined);
setCreateDataSourceModalOpen(false);
}}
dataSourceItem={nodeDataSource}
onSubmit={() => {
updateGraphData();
}}
/>
}
{
<DeleteConfirmModal
open={confirmModalOpenState}
onOkClick={() => {
setConfirmModalOpenState(false);
updateGraphData();
graphShowTypeState === SemanticNodeType.DIMENSION
? dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
})
: dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
}}
onCancelClick={() => {
setConfirmModalOpenState(false);
}}
nodeData={currentNodeData}
/>
}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(DomainManger);

View File

@@ -423,6 +423,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{createModalVisible && (
<DimensionInfoModal
modelId={modelId}
domainId={domainId}
bindModalVisible={createModalVisible}
dimensionItem={dimensionItem}
dataSourceList={dataSourceList}

View File

@@ -0,0 +1,206 @@
import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Modal, Select } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { ISemantic } from '../../data';
import { saveCommonDimension, getDimensionList } from '../../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { message } from 'antd';
export type CreateFormProps = {
domainId: number;
dimensionItem?: ISemantic.IDimensionItem;
onCancel: () => void;
bindModalVisible: boolean;
dimensionList: ISemantic.IDimensionItem[];
onSubmit: (values?: any) => void;
};
const FormItem = Form.Item;
const { TextArea } = Input;
const CommonDimensionInfoModal: React.FC<CreateFormProps> = ({
domainId,
onCancel,
bindModalVisible,
dimensionItem,
onSubmit: handleUpdate,
}) => {
const isEdit = !!dimensionItem?.id;
const [form] = Form.useForm();
const { setFieldsValue, resetFields } = form;
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [dimensionOptions, setDimensionOptions] = useState([]);
useEffect(() => {
queryDimensionList();
}, []);
const queryDimensionList = async () => {
setSaveLoading(true);
const { code, data, msg } = await getDimensionList({ domainId });
setSaveLoading(false);
const dimensionList = data?.list;
if (code === 200 && Array.isArray(dimensionList)) {
const dimensionMap = dimensionList.reduce(
(
dataMap: Record<
string,
{ label: string; options: { label: string; value: number; disabled?: boolean }[] }
>,
item: ISemantic.IDimensionItem,
) => {
const { modelId, modelName, name, id, commonDimensionId } = item;
const target = dataMap[modelId];
if (target) {
target.options.push({
label: name,
value: id,
disabled: !!commonDimensionId,
});
} else {
dataMap[modelId] = {
label: modelName || `${modelId}`,
options: [
{
label: name,
value: id,
disabled: !!commonDimensionId,
},
],
};
}
return dataMap;
},
{},
);
setDimensionOptions(Object.values(dimensionMap));
} else {
message.error(msg);
}
};
const handleSubmit = async (isSilenceSubmit = false) => {
const fieldsValue = await form.validateFields();
await saveDimension(
{
...fieldsValue,
},
isSilenceSubmit,
);
};
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
const queryParams = {
domainId: isEdit ? dimensionItem.domainId : domainId,
type: 'categorical',
...fieldsValue,
};
const { code, msg } = await saveCommonDimension(queryParams);
if (code === 200) {
if (!isSilenceSubmit) {
message.success('编辑公共维度成功');
handleUpdate(fieldsValue);
}
return;
}
message.error(msg);
};
useEffect(() => {
if (dimensionItem) {
setFieldsValue({ ...dimensionItem });
} else {
resetFields();
}
}, [dimensionItem]);
const renderFooter = () => {
return (
<>
<Button onClick={onCancel}></Button>
<Button
type="primary"
loading={saveLoading}
onClick={() => {
handleSubmit();
}}
>
</Button>
</>
);
};
const renderContent = () => {
return (
<>
<FormItem hidden={true} name="id" label="ID">
<Input placeholder="id" />
</FormItem>
<FormItem
name="name"
label="公共维度名称"
rules={[{ required: true, message: '请输入公共维度名称' }]}
>
<Input placeholder="名称不可重复" />
</FormItem>
<FormItem
name="bizName"
label="字段名称"
rules={[{ required: true, message: '请输入字段名称' }]}
>
<Input placeholder="名称不可重复" disabled={isEdit} />
</FormItem>
<FormItem
// label="关联维度"
label={
<FormItemTitle
title={`关联维度`}
subTitle={`维度不能关联多个公共维度,已关联的维度会被禁用`}
/>
}
name="dimensionIds"
// rules={[{ required: true, message: '请选择所要关联的维度' }]}
>
<Select
showSearch
mode="multiple"
allowClear
placeholder="选择所要关联的维度"
options={dimensionOptions}
filterOption={(input, option: any) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
/>
</FormItem>
<FormItem name="description" label="维度描述">
<TextArea placeholder="请输入维度描述" />
</FormItem>
</>
);
};
return (
<>
<Modal
width={800}
destroyOnClose
title="公共维度信息"
style={{ top: 48 }}
maskClosable={false}
open={bindModalVisible}
footer={renderFooter()}
onCancel={onCancel}
>
<Form {...formLayout} form={form}>
{renderContent()}
</Form>
</Modal>
</>
);
};
export default CommonDimensionInfoModal;

View File

@@ -0,0 +1,196 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input } from 'antd';
import React, { useRef, useState } from 'react';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { StateType } from '../../model';
import { getCommonDimensionList, deleteCommonDimension } from '../../service';
import CommonDimensionInfoModal from './CommonDimensionInfoModal';
import { ISemantic } from '../../data';
import moment from 'moment';
import styles from '../style.less';
type Props = {
dispatch: Dispatch;
domainManger: StateType;
};
const CommonDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectDomainId: domainId, dimensionList } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
const [loading, setLoading] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const queryDimensionList = async () => {
setLoading(true);
const { code, data, msg } = await getCommonDimensionList(domainId);
setLoading(false);
let resData: any = {};
if (code === 200) {
resData = {
data: data || [],
success: true,
};
} else {
message.error(msg);
resData = {
data: [],
total: 0,
success: false,
};
}
return resData;
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
width: 80,
order: 100,
search: false,
},
{
dataIndex: 'key',
title: '维度搜索',
hideInTable: true,
renderFormItem: () => <Input placeholder="请输入ID/维度名称/字段名称" />,
},
{
dataIndex: 'name',
title: '维度名称',
search: false,
},
{
dataIndex: 'bizName',
title: '字段名称',
search: false,
// order: 9,
},
{
dataIndex: 'createdBy',
title: '创建人',
width: 100,
search: false,
},
{
dataIndex: 'description',
title: '描述',
search: false,
},
{
dataIndex: 'updatedAt',
title: '更新时间',
width: 180,
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
},
},
{
title: '操作',
dataIndex: 'x',
valueType: 'option',
width: 200,
render: (_, record) => {
return (
<Space className={styles.ctrlBtnContainer}>
<Button
key="dimensionEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setCreateModalVisible(true);
}}
>
</Button>
<Popconfirm
title="删除会自动解除所关联的维度,是否确认?"
okText="是"
cancelText="否"
placement="left"
onConfirm={async () => {
const { code, msg } = await deleteCommonDimension(record.id);
if (code === 200) {
setDimensionItem(undefined);
actionRef.current?.reload();
} else {
message.error(msg);
}
}}
>
<Button
type="link"
key="dimensionDeleteEditBtn"
onClick={() => {
setDimensionItem(record);
}}
>
</Button>
</Popconfirm>
</Space>
);
},
},
];
return (
<>
<ProTable
style={{ marginTop: 15 }}
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
actionRef={actionRef}
rowKey="id"
columns={columns}
request={queryDimensionList}
loading={loading}
search={false}
tableAlertRender={() => {
return false;
}}
size="small"
options={{ reload: false, density: false, fullScreen: false }}
toolBarRender={() => [
<Button
key="create"
type="primary"
onClick={() => {
setDimensionItem(undefined);
setCreateModalVisible(true);
}}
>
</Button>,
]}
/>
{createModalVisible && (
<CommonDimensionInfoModal
domainId={domainId}
bindModalVisible={createModalVisible}
dimensionItem={dimensionItem}
dimensionList={dimensionList}
onSubmit={() => {
setCreateModalVisible(false);
actionRef?.current?.reload();
return;
}}
onCancel={() => {
setCreateModalVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(CommonDimensionTable);

View File

@@ -6,13 +6,19 @@ import SqlEditor from '@/components/SqlEditor';
import InfoTagList from './InfoTagList';
import { ISemantic } from '../data';
import { InfoCircleOutlined } from '@ant-design/icons';
import { createDimension, updateDimension, mockDimensionAlias } from '../service';
import {
createDimension,
updateDimension,
mockDimensionAlias,
getCommonDimensionList,
} from '../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { message } from 'antd';
export type CreateFormProps = {
modelId: number;
domainId: number;
dimensionItem?: ISemantic.IDimensionItem;
onCancel: () => void;
bindModalVisible: boolean;
@@ -26,6 +32,7 @@ const { Option } = Select;
const { TextArea } = Input;
const DimensionInfoModal: React.FC<CreateFormProps> = ({
domainId,
modelId,
onCancel,
bindModalVisible,
@@ -40,6 +47,7 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
const [form] = Form.useForm();
const { setFieldsValue, resetFields } = form;
const [llmLoading, setLlmLoading] = useState<boolean>(false);
const [commonDimensionOptions, setCommonDimensionOptions] = useState([]);
const handleSubmit = async (
isSilenceSubmit = false,
@@ -56,6 +64,26 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
);
};
useEffect(() => {
queryCommonDimensionList();
}, [domainId]);
const queryCommonDimensionList = async () => {
const { code, data, msg } = await getCommonDimensionList(domainId);
// const { list, pageSize, pageNum, total } = data || {};
if (code === 200) {
const options = data.map((item) => {
return {
value: item.id,
label: item.name,
};
});
setCommonDimensionOptions(options);
} else {
message.error(msg);
}
};
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
const queryParams = {
modelId: isEdit ? dimensionItem.modelId : modelId,
@@ -215,6 +243,9 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
))}
</Select>
</FormItem>
<FormItem name="commonDimensionId" label="公共维度">
<Select placeholder="请绑定公共维度" allowClear options={commonDimensionOptions} />
</FormItem>
<FormItem name="defaultValues" label="默认值">
<InfoTagList />
</FormItem>

View File

@@ -13,6 +13,7 @@ import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import { ISemantic } from '../data';
import SemanticGraphCanvas from '../SemanticGraphCanvas';
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
import DatabaseTable from '../components/Database/DatabaseTable';
import type { Dispatch } from 'umi';
@@ -72,6 +73,11 @@ const DomainManagerTab: React.FC<Props> = ({
key: 'database',
children: <DatabaseTable />,
},
// {
// label: '公共维度',
// key: 'commonDimension',
// children: <CommonDimensionTable />,
// },
].filter((item) => {
const target = domainList.find((domain) => domain.id === selectDomainId);
if (target?.hasEditPermission) {

View File

@@ -146,10 +146,14 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
const saveEntity = async (searchEnable = dimensionVisible) => {
setSaveLoading(true);
const globalKnowledgeConfigFormFields: any = await getFormValidateFields();
const tempData = { ...modelRichConfigData };
const targetKnowledgeInfos = modelRichConfigData?.chatAggRichConfig?.knowledgeInfos;
let knowledgeInfos: IChatConfig.IKnowledgeInfosItem[] = [];
if (Array.isArray(targetKnowledgeInfos)) {
const targetKnowledgeInfos = modelRichConfigData?.chatAggRichConfig?.knowledgeInfos || [];
const hasHistoryConfig = targetKnowledgeInfos.find((item) => item.itemId === dimensionItem.id);
let knowledgeInfos: IChatConfig.IKnowledgeInfosItem[] = targetKnowledgeInfos;
if (hasHistoryConfig) {
knowledgeInfos = targetKnowledgeInfos.reduce(
(
knowledgeInfosList: IChatConfig.IKnowledgeInfosItem[],
@@ -173,6 +177,15 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
},
[],
);
} else {
knowledgeInfos.push({
itemId: dimensionItem.id,
bizName: dimensionItem.bizName,
knowledgeAdvancedConfig: {
...globalKnowledgeConfigFormFields,
},
searchEnable,
});
}
const { id, modelId, chatAggRichConfig } = tempData;

View File

@@ -1,4 +1,5 @@
import { SemanticNodeType } from './enum';
import { DateRangeType } from '@/components/MDatePicker/type';
export enum SENSITIVE_LEVEL {
LOW = 0,
@@ -58,3 +59,15 @@ export const SEMANTIC_NODE_TYPE_CONFIG = {
color: 'orange',
},
};
export const DateFieldMap = {
[DateRangeType.DAY]: 'sys_imp_date',
[DateRangeType.WEEK]: 'sys_imp_week',
[DateRangeType.MONTH]: 'sys_imp_month',
};
export const DatePeridMap = {
sys_imp_date: DateRangeType.DAY,
sys_imp_week: DateRangeType.WEEK,
sys_imp_month: DateRangeType.MONTH,
};

View File

@@ -140,8 +140,10 @@ export declare namespace ISemantic {
fullPath: string;
datasourceId: number;
modelId: number;
modelName: string;
datasourceName: string;
datasourceBizName: string;
commonDimensionId: number;
semanticType: string;
alias: string;
useCnt: number;

View File

@@ -1,5 +1,6 @@
import request from 'umi-request';
import moment from 'moment';
import { DatePeridMap } from '@/pages/SemanticModel/constant';
const getRunningEnv = () => {
return window.location.pathname.includes('/chatSetting/') ? 'chat' : 'semantic';
@@ -57,6 +58,28 @@ export function getDimensionList(data: any): Promise<any> {
return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
}
export function getCommonDimensionList(domainId: number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}commonDimension/getList?domainId=${domainId}`);
}
export function saveCommonDimension(data: any): Promise<any> {
if (data.id) {
return request(`${process.env.API_BASE_URL}commonDimension`, {
method: 'PUT',
data,
});
}
return request.post(`${process.env.API_BASE_URL}commonDimension`, {
data,
});
}
export function deleteCommonDimension(id: any): Promise<any> {
return request(`${process.env.API_BASE_URL}commonDimension/${id}`, {
method: 'DELETE',
});
}
export function getDimensionInModelCluster(modelId: number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}dimension/getDimensionInModelCluster/${modelId}`);
}
@@ -494,7 +517,8 @@ export async function queryStruct({
endDate,
dateList: [],
unit: 7,
period: 'DAY',
// period: 'DAY',
period: DatePeridMap[dateField],
text: 'null',
},
limit: 2000,