[feature](webapp) add copilot and modify domain to model

This commit is contained in:
williamhliu
2023-08-15 20:04:04 +08:00
parent 2732d8fee1
commit 86b93876c7
43 changed files with 738 additions and 431 deletions

View File

@@ -1,11 +1,11 @@
import { PREFIX_CLS } from '../../../common/constants';
type Props = {
domain: string;
onApplyAuth?: (domain: string) => void;
model: string;
onApplyAuth?: (model: string) => void;
};
const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
const ApplyAuth: React.FC<Props> = ({ model, onApplyAuth }) => {
const prefixCls = `${PREFIX_CLS}-apply-auth`;
return (
@@ -15,7 +15,7 @@ const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
<span
className={`${prefixCls}-apply`}
onClick={() => {
onApplyAuth(domain);
onApplyAuth(model);
}}
>

View File

@@ -15,7 +15,7 @@ type Props = {
drillDownDimension?: DrillDownDimensionType;
loading: boolean;
onSelectDimension: (dimension?: DrillDownDimensionType) => void;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const BarChart: React.FC<Props> = ({
@@ -152,7 +152,7 @@ const BarChart: React.FC<Props> = ({
if (metricColumn && !metricColumn?.authorized) {
return (
<NoPermissionChart
domain={entityInfo?.domainInfo.name || ''}
model={entityInfo?.modelInfo.name || ''}
chartType="barChart"
onApplyAuth={onApplyAuth}
/>
@@ -193,11 +193,9 @@ const BarChart: React.FC<Props> = ({
<Spin spinning={loading}>
<div className={`${prefixCls}-chart`} ref={chartRef} />
</Spin>
{(queryMode === 'METRIC_DOMAIN' ||
queryMode === 'METRIC_FILTER' ||
queryMode === 'METRIC_GROUPBY') && (
{queryMode.includes('METRIC') && (
<DrillDownDimensions
domainId={chatContext.domainId}
modelId={chatContext.modelId}
drillDownDimension={drillDownDimension}
dimensionFilters={chatContext.dimensionFilters}
onSelectDimension={onSelectDimension}

View File

@@ -26,7 +26,7 @@ const Message: React.FC<Props> = ({
}) => {
const prefixCls = `${PREFIX_CLS}-message`;
const { domainName, dateInfo, dimensionFilters } = chatContext || {};
const { modelName, dateInfo, dimensionFilters } = chatContext || {};
const { startDate, endDate } = dateInfo || {};
const entityInfoList =
@@ -67,7 +67,7 @@ const Message: React.FC<Props> = ({
<div className={`${prefixCls}-main-entity-info`}>
<div className={`${prefixCls}-info-item`}>
<div className={`${prefixCls}-info-name`}></div>
<div className={`${prefixCls}-info-value`}>{domainName}</div>
<div className={`${prefixCls}-info-value`}>{modelName}</div>
</div>
<div className={`${prefixCls}-info-item`}>
<div className={`${prefixCls}-info-name`}></div>

View File

@@ -10,7 +10,7 @@
margin-bottom: 6px;
}
&-domain-name {
&-model-name {
color: var(--text-color);
margin-left: 4px;
font-weight: 500;

View File

@@ -13,7 +13,7 @@ type Props = {
drillDownDimension?: DrillDownDimensionType;
loading: boolean;
onSelectDimension: (dimension?: DrillDownDimensionType) => void;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const MetricCard: React.FC<Props> = ({
@@ -64,7 +64,7 @@ const MetricCard: React.FC<Props> = ({
<div className={indicatorClass}>
<div className={`${prefixCls}-date-range`}>{startDate}</div>
{indicatorColumn && !indicatorColumn?.authorized ? (
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
<ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />
) : (
<div className={`${prefixCls}-indicator-value`}>
{formatMetric(queryResults?.[0]?.[indicatorColumnName]) || '-'}
@@ -79,10 +79,10 @@ const MetricCard: React.FC<Props> = ({
)}
</div>
</Spin>
{(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') && (
{queryMode.includes('METRIC') && (
<div className={`${prefixCls}-drill-down-dimensions`}>
<DrillDownDimensions
domainId={chatContext.domainId}
modelId={chatContext.modelId}
dimensionFilters={chatContext.dimensionFilters}
drillDownDimension={drillDownDimension}
onSelectDimension={onSelectDimension}

View File

@@ -109,7 +109,7 @@
&-drill-down-dimensions {
position: absolute;
bottom: -44px;
left: -16;
bottom: -38px;
left: 0;
}
}

View File

@@ -14,17 +14,17 @@ import { ColumnType } from '../../../common/type';
import NoPermissionChart from '../NoPermissionChart';
type Props = {
domain?: string;
model?: string;
dateColumnName: string;
categoryColumnName: string;
metricField: ColumnType;
resultList: any[];
triggerResize?: boolean;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const MetricTrendChart: React.FC<Props> = ({
domain,
model,
dateColumnName,
categoryColumnName,
metricField,
@@ -204,7 +204,7 @@ const MetricTrendChart: React.FC<Props> = ({
return (
<div>
{!metricField.authorized ? (
<NoPermissionChart domain={domain || ''} onApplyAuth={onApplyAuth} />
<NoPermissionChart model={model || ''} onApplyAuth={onApplyAuth} />
) : (
<div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />
)}

View File

@@ -15,7 +15,7 @@ type Props = {
data: MsgDataType;
chartIndex: number;
triggerResize?: boolean;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApplyAuth }) => {
@@ -36,6 +36,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
const [currentDateOption, setCurrentDateOption] = useState<number>(initialDateOption);
const [dimensions, setDimensions] = useState<FieldType[]>(chatContext?.dimensions);
const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
const [aggregateInfoValue, setAggregateInfoValue] = useState<any>(aggregateInfo);
const [dateModeValue, setDateModeValue] = useState(dateMode);
const [loading, setLoading] = useState(false);
@@ -72,6 +73,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
if (data.code === 200) {
setColumns(data.data?.queryColumns || []);
setDataSource(data.data?.queryResults || []);
setAggregateInfoValue(data.data?.aggregateInfo);
}
};
@@ -172,7 +174,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
</div>
)}
</div>
{aggregateInfo?.metricInfos?.length > 0 && <MetricInfo aggregateInfo={aggregateInfo} />}
{aggregateInfoValue?.metricInfos?.length > 0 && (
<MetricInfo aggregateInfo={aggregateInfoValue} />
)}
<div className={`${prefixCls}-date-options`}>
{dateOptions.map((dateOption: { label: string; value: number }, index: number) => {
const dateOptionClass = classNames(`${prefixCls}-date-option`, {
@@ -205,7 +209,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
<Table data={{ ...data, queryResults: dataSource }} onApplyAuth={onApplyAuth} />
) : (
<MetricTrendChart
domain={entityInfo?.domainInfo.name}
model={entityInfo?.modelInfo.name}
dateColumnName={dateColumnName}
categoryColumnName={categoryColumnName}
metricField={currentMetricField}
@@ -215,11 +219,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
/>
)}
</Spin>
{(queryMode === 'METRIC_DOMAIN' ||
queryMode === 'METRIC_FILTER' ||
queryMode === 'METRIC_GROUPBY') && (
{queryMode.includes('METRIC') && (
<DrillDownDimensions
domainId={chatContext.domainId}
modelId={chatContext.modelId}
drillDownDimension={drillDownDimension}
dimensionFilters={chatContext.dimensionFilters}
onSelectDimension={onSelectDimension}

View File

@@ -3,12 +3,12 @@ import { CLS_PREFIX } from '../../../common/constants';
import ApplyAuth from '../ApplyAuth';
type Props = {
domain: string;
model: string;
chartType?: string;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth }) => {
const NoPermissionChart: React.FC<Props> = ({ model, chartType, onApplyAuth }) => {
const prefixCls = `${CLS_PREFIX}-no-permission-chart`;
const chartHolderClass = classNames(`${prefixCls}-holder`, {
@@ -19,7 +19,7 @@ const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth })
<div className={prefixCls}>
<div className={chartHolderClass} />
<div className={`${prefixCls}-no-permission`}>
<ApplyAuth domain={domain} onApplyAuth={onApplyAuth} />
<ApplyAuth model={model} onApplyAuth={onApplyAuth} />
</div>
</div>
);

View File

@@ -8,7 +8,7 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
type Props = {
data: MsgDataType;
size?: SizeType;
onApplyAuth?: (domain: string) => void;
onApplyAuth?: (model: string) => void;
};
const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
@@ -24,9 +24,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
title: name || nameEn,
render: (value: string | number) => {
if (!authorized) {
return (
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
);
return <ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />;
}
if (dataFormatType === 'percent') {
return (
@@ -71,7 +69,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
columns={tableColumns}
dataSource={queryResults}
style={{ width: '100%' }}
scroll={{ x: 'max-content' }}
// scroll={{ x: 'max-content' }}
rowClassName={getRowClassName}
size={size}
/>

View File

@@ -3,7 +3,7 @@
@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';
.@{table-prefix-cls} {
margin-top: 20px;
margin-top: 16px;
margin-bottom: 20px;
&-photo {

View File

@@ -35,10 +35,15 @@ const ChatMsg: React.FC<Props> = ({ question, data, chartIndex, isMobileMode, tr
const metricFields = columns.filter(item => item.showType === 'NUMBER');
const isMetricCard =
(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') &&
queryMode.includes('METRIC') &&
(singleData || chatContext?.dateInfo?.startDate === chatContext?.dateInfo?.endDate);
const isText = columns.length === 1 && columns[0].showType === 'CATEGORY' && singleData;
const isText =
columns.length === 1 &&
columns[0].showType === 'CATEGORY' &&
!queryMode.includes('METRIC') &&
!queryMode.includes('ENTITY') &&
singleData;
const onLoadData = async (value: any) => {
setLoading(true);