From 6aaf471582fb34a626f81078b7fccfeb945125d1 Mon Sep 17 00:00:00 2001 From: tristanliu <37809633+sevenliu1896@users.noreply.github.com> Date: Thu, 30 May 2024 10:40:01 +0800 Subject: [PATCH] [improvement][headless-fe] 1.Added configuration for the large language model in the agent; 2.upgraded React version from 17 to 18; 3.modified some UI effects. (#1049) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [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. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management. * [improvement][headless-fe] Removed field null validation during model editing. * [improvement][headless-fe] Updated the batch operation button component. * [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. * [improvement][headless-fe] Adjusted the length of the input field for model editing names. * [improvement][headless-fe] Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components. * [improvement][headless-fe] Optimized the style of the metrics market and tags market. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly. * [improvement][headless-fe] Default value setting for hiding dimensions. * [improvement][headless-fe] Updated the file imports in the project. * [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain. * [improvement][headless-fe] Added term management functionality. * [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance. * [improvement][headless-fe] Term management interface transformation * [improvement][headless-fe] Migrating scaffold version to @umi/max * [improvement][headless-fe] remove modle column * [improvement][headless-fe] 1.Added configuration for the large language model in the agent; 2.upgraded React version from 17 to 18; 3.modified some UI effects. --- .../supersonic-fe/config/defaultSettings.ts | 14 +- webapp/packages/supersonic-fe/package.json | 21 +- webapp/packages/supersonic-fe/src/app.tsx | 6 +- .../src/components/FormHelper/index.less | 2 +- webapp/packages/supersonic-fe/src/global.less | 150 +- .../src/pages/Agent/AgentModal.tsx | 219 +- .../src/pages/Agent/ToolsSection.tsx | 37 +- .../supersonic-fe/src/pages/Agent/style.less | 14 +- .../supersonic-fe/src/pages/Agent/type.ts | 25 +- .../Datasource/components/ModelBasicForm.tsx | 11 + .../Datasource/components/ModelCreateForm.tsx | 20 +- .../pages/SemanticModel/Insights/Market.tsx | 2 +- .../src/pages/SemanticModel/Metric/Market.tsx | 19 +- .../components/MetricInfoCreateForm.tsx | 3 +- .../pages/SemanticModel/OverviewContainer.tsx | 1 - .../View/components/ViewCreateFormModal.tsx | 13 - .../components/ViewSearchFormModal_tag.tsx | 4 +- .../components/DomainManagerTab.tsx | 4 +- .../components/TableColumnRender.tsx | 2 +- .../pages/SemanticModel/components/style.less | 40 +- .../supersonic-fe/src/pages/index.tsx | 39 + webapp/pnpm-lock.yaml | 3756 +++++++---------- 22 files changed, 1951 insertions(+), 2451 deletions(-) create mode 100644 webapp/packages/supersonic-fe/src/pages/index.tsx diff --git a/webapp/packages/supersonic-fe/config/defaultSettings.ts b/webapp/packages/supersonic-fe/config/defaultSettings.ts index e3312defc..14bc7368d 100644 --- a/webapp/packages/supersonic-fe/config/defaultSettings.ts +++ b/webapp/packages/supersonic-fe/config/defaultSettings.ts @@ -1,6 +1,6 @@ -import { Settings as LayoutSettings } from '@ant-design/pro-layout'; +import { ProLayoutProps } from '@ant-design/pro-components'; -const Settings: LayoutSettings & { +const Settings: ProLayoutProps & { pwa?: boolean; logo?: string; } = { @@ -14,11 +14,11 @@ const Settings: LayoutSettings & { title: '', pwa: false, iconfontUrl: '//at.alicdn.com/t/c/font_4120566_x5c4www9bqm.js', - splitMenus: true, - menu: { - autoClose: false, - ignoreFlatMenu: true, - }, + // splitMenus: true, + // menu: { + // autoClose: false, + // ignoreFlatMenu: true, + // }, }; export const publicPath = '/webapp/'; diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json index 8f64cdae5..f3171d53b 100644 --- a/webapp/packages/supersonic-fe/package.json +++ b/webapp/packages/supersonic-fe/package.json @@ -57,7 +57,6 @@ "dependencies": { "@ant-design/icons": "^5.2.6", "@ant-design/pro-components": "2.7.0", - "@ant-design/pro-layout": "^7.17.15", "@antv/dom-util": "^2.0.4", "@antv/g6": "^4.8.23", "@antv/g6-core": "^0.8.23", @@ -83,22 +82,20 @@ "jsencrypt": "^3.0.1", "lodash": "^4.17.11", "moment": "^2.29.1", + "nprogress": "^0.2.0", "numeral": "^2.0.6", "omit.js": "^2.0.2", "path-to-regexp": "^2.4.0", "qs": "^6.9.0", "query-string": "^9.0.0", - "react": "^17.0.0", + "react": "^18.3.1", "react-ace": "^9.4.1", - "react-dev-inspector": "^1.8.4", - "react-dom": "^17.0.2", - "react-fast-marquee": "^1.6.0", - "react-helmet-async": "^1.0.4", - "react-spinners": "^0.10.6", + "react-dom": "^18.3.1", + "react-spinners": "^0.13.8", "react-split-pane": "^2.0.3", "react-syntax-highlighter": "^15.4.3", "sql-formatter": "^2.3.3", - "supersonic-chat-sdk": "^1.1.6", + "supersonic-chat-sdk": "^1.1.7", "supersonic-insights-flow-components": "^1.4.9", "umi-request": "1.4.0" }, @@ -114,11 +111,11 @@ "@types/lodash": "^4.14.144", "@types/pinyin": "^2.8.3", "@types/qs": "^6.5.3", - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", + "@types/react": "18.3.1", + "@types/react-dom": "^18.3.0", "@types/react-helmet": "^6.1.0", - "@umijs/max": "^4.2.5", "@umijs/fabric": "^4.0.1", + "@umijs/max": "^4.2.5", "@umijs/plugin-model": "^2.6.2", "carlo": "^0.9.46", "cross-port-killer": "^1.1.1", @@ -141,7 +138,7 @@ "node": ">=16.0.0 <20.0.0" }, "resolutions": { - "@types/react": "17.0.0" + "@types/react": "18.3.1" }, "__npminstall_done": false } \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/app.tsx b/webapp/packages/supersonic-fe/src/app.tsx index 03732803c..e10676f8e 100644 --- a/webapp/packages/supersonic-fe/src/app.tsx +++ b/webapp/packages/supersonic-fe/src/app.tsx @@ -1,6 +1,6 @@ import RightContent from '@/components/RightContent'; import S2Icon, { ICON } from '@/components/S2Icon'; -import type { Settings as LayoutSettings } from '@ant-design/pro-layout'; +import type { Settings as LayoutSettings } from '@ant-design/pro-components'; import { Space, Spin, ConfigProvider } from 'antd'; import ScaleLoader from 'react-spinners/ScaleLoader'; import { history, RunTimeLayoutConfig } from '@umijs/max'; @@ -13,6 +13,7 @@ import { Copilot } from 'supersonic-chat-sdk'; import { configProviderTheme } from '../config/themeSettings'; export { request } from './services/request'; import { ROUTE_AUTH_CODES } from '../config/routes'; +import AppPage from './pages/index'; const replaceRoute = '/'; @@ -145,7 +146,8 @@ export const layout: RunTimeLayoutConfig = (params) => { height: location.pathname.includes('chat') ? 'calc(100vh - 56px)' : undefined, }} > - {dom} + + {/* {dom} */} {history.location.pathname !== '/chat' && !isMobile && ( )} diff --git a/webapp/packages/supersonic-fe/src/components/FormHelper/index.less b/webapp/packages/supersonic-fe/src/components/FormHelper/index.less index c600fbeab..d9902a030 100644 --- a/webapp/packages/supersonic-fe/src/components/FormHelper/index.less +++ b/webapp/packages/supersonic-fe/src/components/FormHelper/index.less @@ -1,6 +1,6 @@ .title { font-family: var(--tencent-font-family); - margin-bottom: 5px; + // margin-bottom: 5px; } .subTitleContainer { diff --git a/webapp/packages/supersonic-fe/src/global.less b/webapp/packages/supersonic-fe/src/global.less index f620de8db..3b29cfc82 100644 --- a/webapp/packages/supersonic-fe/src/global.less +++ b/webapp/packages/supersonic-fe/src/global.less @@ -96,42 +96,35 @@ ol { } } -.ant-card-body { - padding: 24px !important; -} +// .ant-card-body { +// padding: 24px !important; +// } .ant-modal-body { padding: 24px; } -.ant-pro-page-container-children-content { - margin: 12px 12px 0 !important; -} +// .ant-pro-page-container-children-content { +// margin: 12px 12px 0 !important; +// } // .ant-page-header { // padding-bottom: 10px !important; // } -.ant-spin-spinning { - display: flex !important; - align-items: center !important; - justify-content: center !important; -} +// .ant-spin-spinning { +// display: flex !important; +// align-items: center !important; +// justify-content: center !important; +// } + +// .ant-table-selection-extra { +// .ant-dropdown-trigger { +// display: none !important; +// } +// } -.ant-table-selection-extra { - .ant-dropdown-trigger { - display: none !important; - } -} -.initialLoading { - .ant-spin-spinning { - max-height: none !important; - } - .loadingPlaceholder { - height: 100vh; - } -} .ant-pro-layout .ant-pro-layout-bg-list { background: #fafafb; } @@ -146,56 +139,39 @@ ol { text-overflow: ellipsis; } - - -// .ant-menu-root>.ant-menu-item, -// .ant-menu-root>.ant-menu-submenu { -// font-weight: bold; -// font-size: 14px; -// &>span>a, -// &>a { -// color: white; -// &:hover { -// color: white; -// } -// } -// &:hover { -// background-color: #296DF3!important; -// } -// } +.ant-table-wrapper { + .ant-spin .ant-spin-dot { + font-size: 30px; + } +} .ant-menu-root>.ant-menu-item.ant-menu-item-selected { - // background-color: #296DF3!important; color: var(--tme-primary-color); - font-size: 15px; font-weight: 500; } -.ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected::after { +.ant-menu-light.ant-menu-horizontal >.ant-menu-item:hover { + background: #f0f5ff; +} +.ant-menu-light .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected):hover { + color: var(--tme-primary-color); +} + +.ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected:hover::after { + border-bottom-color: var(--tme-primary-color); border-bottom-width: 2px; +} +.ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected::after { border-bottom-color: var(--tme-primary-color); + border-bottom-width: 2px; } -// .ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected::hover { -// border-bottom-width: 2px; -// border-bottom-color: var(--tme-primary-color); -// } - -.ant-pro-top-nav-header-logo h1 { - // font-size: 18px; - color: var(--tme-primary-color) +.ant-menu-light.ant-menu-horizontal >.ant-menu-item:hover::after { + border-bottom-color: var(--tme-primary-color); } - - - -// .ant-pro-top-nav-header-main-left { -// min-width: 100px !important; -// } - -// .ant-pro-top-nav-header-logo { -// min-width: 100px !important; -// } - +.ant-pro-table-list-toolbar-container-mobile { + flex-direction: unset; +} .logo { position: relative; @@ -291,4 +267,50 @@ ol { color: rgb(38, 38, 38); } } - +.ant-form-item .ant-form-item-label > label { + font-family: "tencentFont", sans-serif; + margin-right: 10px; +} +.supersonicForm { + padding: 0 20px; + :global { + .ant-input-search .ant-input-search-button { + height: 42px; + } + .ant-switch.ant-switch-checked { + background: var(--tme-primary-color); + } + .ant-form-item .ant-form-item-label > label { + color:#262626; + } + .ant-form-item-label { + font-family: "tencentFont", sans-serif; + margin-right: 10px; + } + .ant-input { + padding: 9px 14px 9px 12px; + } + .ant-select { + &.ant-select-single { + height: auto; + } + &.ant-select-multiple { + .ant-select-selector { + padding: 6px 14px 6px 12px; + } + } + .ant-select-selector { + padding: 5px 14px 5px 12px; + .ant-select-selection-placeholder { + padding: 0px 8px 0px 8px; + } + .ant-select-selection-overflow-item { + .ant-select-selection-item { + color: rgb(22, 119, 255); + background-color: rgb(230, 244, 255); + } + } + } + } + } +} \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx b/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx index 247d3c4dd..f57137fde 100644 --- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx +++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx @@ -1,9 +1,23 @@ -import { Form, Modal, Input, Button, Switch } from 'antd'; +import { + Form, + Modal, + Input, + Button, + Switch, + Tabs, + Slider, + InputNumber, + Select, + Row, + Col, + Space, +} from 'antd'; import { AgentType } from './type'; import { useEffect, useState } from 'react'; import styles from './style.less'; import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; import { uuid } from '@/utils/utils'; +import globalStyles from '@/global.less'; const FormItem = Form.Item; const { TextArea } = Input; @@ -17,6 +31,7 @@ type Props = { const AgentModal: React.FC = ({ editAgent, onSaveAgent, onCancel }) => { const [saveLoading, setSaveLoading] = useState(false); const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]); + const [formData, setFormData] = useState({}); const [form] = Form.useForm(); useEffect(() => { @@ -32,7 +47,8 @@ const AgentModal: React.FC = ({ editAgent, onSaveAgent, onCancel }) => { const layout = { labelCol: { span: 6 }, - wrapperCol: { span: 14 }, + wrapperCol: { span: 16 }, + // layout: 'vertical', }; const onOk = async () => { @@ -48,6 +64,135 @@ const AgentModal: React.FC = ({ editAgent, onSaveAgent, onCancel }) => { setSaveLoading(false); }; + const formTabList = [ + { + label: '基本信息', + children: ( + <> + + + + {/* + { + example.question = e.target.value; + setExamples([...examples]); + }} + allowClear + /> + { + setExamples(examples.filter((item) => item.id !== id)); + }} + /> + + ); + })} + + + + +