From 28a4741e6d6c4aa487b298567772458b1291c049 Mon Sep 17 00:00:00 2001 From: waynelwz <100347187+waynelwz@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:33:24 +0800 Subject: [PATCH] update(console): use projectId for table query (#1845) * update: use projectId for table query * update: remove test code --- .../datastore/hooks/useDatastoreTables.tsx | 8 +- console/src/components/Editor/index.tsx | 4 +- .../pages/Evaluation/EvaluationListCard.tsx | 7 +- .../pages/Evaluation/EvaluationResults.tsx | 18 ++--- .../Evaluation/EvaluationWidgetResults.tsx | 81 +++++++++---------- .../src/pages/Model/ModelOverviewLayout.tsx | 15 ++-- 6 files changed, 59 insertions(+), 74 deletions(-) diff --git a/console/packages/starwhale-core/src/datastore/hooks/useDatastoreTables.tsx b/console/packages/starwhale-core/src/datastore/hooks/useDatastoreTables.tsx index 23b8f28c8b..4ce711c2d5 100644 --- a/console/packages/starwhale-core/src/datastore/hooks/useDatastoreTables.tsx +++ b/console/packages/starwhale-core/src/datastore/hooks/useDatastoreTables.tsx @@ -29,13 +29,13 @@ export function useDatastoreTablesByPrefix(prefix: string) { } } -export default function useDatastoreTables(projectName: string, jobUuid: string) { +export default function useDatastoreTables(projectId: string, jobUuid: string) { const queryAllTables = useMemo(() => { - if (!projectName || !jobUuid) return undefined + if (!projectId || !jobUuid) return undefined return { - prefix: tablesOfEvaluation(projectName, jobUuid), + prefix: tablesOfEvaluation(projectId, jobUuid), } - }, [projectName, jobUuid]) + }, [projectId, jobUuid]) return useDatastoreTablesByPrefix(queryAllTables?.prefix as string) } diff --git a/console/src/components/Editor/index.tsx b/console/src/components/Editor/index.tsx index 8342a8b1df..daa9fac52b 100644 --- a/console/src/components/Editor/index.tsx +++ b/console/src/components/Editor/index.tsx @@ -4,7 +4,6 @@ import { registerWidgets } from '@starwhale/core/widget/WidgetFactoryRegister' import { createCustomStore } from '@starwhale/core/store' import WidgetRenderTree from '@starwhale/core/widget/WidgetRenderTree' import { EventBusSrv } from '@starwhale/core/events' -import { useProject } from '@/domain/project/hooks/useProject' import { useJob } from '@/domain/job/hooks/useJob' import { tablesOfEvaluation } from '@starwhale/core' import { useParams } from 'react-router-dom' @@ -26,10 +25,9 @@ export function withEditorRegister(EditorApp: React.FC) { // log.debug('WidgetFactory', WidgetFactory.widgetMap) // @FIXME const { projectId } = useParams<{ projectId: string }>() - const { project } = useProject() const { job } = useJob() // eslint-disable-next-line prefer-template - const prefix = project?.name && job?.uuid ? tablesOfEvaluation(project?.name, job?.uuid) + '/' : undefined + const prefix = projectId && job?.uuid ? tablesOfEvaluation(projectId, job?.uuid) + '/' : undefined const storeKey = job?.modelName ? ['evaluation-model', job?.modelName].join('-') : undefined if (!prefix || !storeKey || !projectId) { return diff --git a/console/src/pages/Evaluation/EvaluationListCard.tsx b/console/src/pages/Evaluation/EvaluationListCard.tsx index eff1e144ab..709329839b 100644 --- a/console/src/pages/Evaluation/EvaluationListCard.tsx +++ b/console/src/pages/Evaluation/EvaluationListCard.tsx @@ -15,7 +15,6 @@ import { useFetchViewConfig } from '@/domain/evaluation/hooks/useFetchViewConfig import { setEvaluationViewConfig } from '@/domain/evaluation/services/evaluation' import { useQueryDatasetList } from '@starwhale/core/datastore/hooks/useFetchDatastore' import { tableNameOfSummary } from '@starwhale/core/datastore/utils' -import { useProject } from '@/domain/project/hooks/useProject' import { TextLink } from '@/components/Link' import { WithCurrentAuth } from '@/api/WithAuth' import { GridTable, useDatastoreColumns } from '@starwhale/ui/GridTable' @@ -28,11 +27,9 @@ export default function EvaluationListCard() { const [t] = useTranslation() const history = useHistory() const { projectId } = useParams<{ projectId: string }>() - const { project } = useProject() const summaryTableName = React.useMemo(() => { - if (!project?.name) return '' - return tableNameOfSummary(project?.name as string) - }, [project]) + return tableNameOfSummary(projectId) + }, [projectId]) const store = useEvaluationStore() const options = React.useMemo(() => { diff --git a/console/src/pages/Evaluation/EvaluationResults.tsx b/console/src/pages/Evaluation/EvaluationResults.tsx index f8c49766cc..b54f15e5d8 100644 --- a/console/src/pages/Evaluation/EvaluationResults.tsx +++ b/console/src/pages/Evaluation/EvaluationResults.tsx @@ -6,10 +6,10 @@ import BusyPlaceholder from '@starwhale/ui/BusyLoaderWrapper/BusyPlaceholder' import { showTableName, tableNameOfSummary, tablesOfEvaluation } from '@starwhale/core/datastore/utils' import { useJob } from '@/domain/job/hooks/useJob' import { useListDatastoreTables, useQueryDatastore } from '@starwhale/core/datastore/hooks/useFetchDatastore' -import { useProject } from '@/domain/project/hooks/useProject' import { useParseConfusionMatrix, useParseRocAuc } from '@starwhale/core/datastore/hooks/useParseDatastore' import Table from '@/components/Table' import { QueryTableRequest } from '@starwhale/core/datastore/schemas/datastore' +import { useParams } from 'react-router-dom' const PlotlyVisualizer = React.lazy( () => import(/* webpackChunkName: "PlotlyVisualizer" */ '../../components/Indicator/PlotlyVisualizer') @@ -157,34 +157,34 @@ function EvaluationViewer({ table, filter }: { table: string; filter?: Record() const queryAllTables = React.useMemo(() => { - if (!project?.name || !job?.uuid) return '' + if (!projectId || !job?.uuid) return '' return { - prefix: tablesOfEvaluation(project?.name as string, job?.uuid), + prefix: tablesOfEvaluation(projectId, job?.uuid), } - }, [project, job]) + }, [projectId, job]) const allTables = useListDatastoreTables(queryAllTables) useEffect(() => { - if (job?.uuid && project?.name) { + if (job?.uuid && projectId) { allTables.refetch() } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [project?.name, job?.uuid]) + }, [projectId, job?.uuid]) const tables = React.useMemo(() => { const names = [] - if (project?.name) names.push(tableNameOfSummary(project?.name as string)) + if (projectId) names.push(tableNameOfSummary(projectId)) return [ ...names, // TODO hard code remove results ...(allTables.data?.tables?.sort((a, b) => (a > b ? 1 : -1)).filter((v) => !v.includes('results')) ?? []), ] - }, [allTables, project]) + }, [allTables, projectId]) return (
diff --git a/console/src/pages/Evaluation/EvaluationWidgetResults.tsx b/console/src/pages/Evaluation/EvaluationWidgetResults.tsx index 1d7b2d9394..fc4b76a956 100644 --- a/console/src/pages/Evaluation/EvaluationWidgetResults.tsx +++ b/console/src/pages/Evaluation/EvaluationWidgetResults.tsx @@ -3,7 +3,6 @@ import Card from '@/components/Card' import BusyPlaceholder from '@starwhale/ui/BusyLoaderWrapper/BusyPlaceholder' import { showTableName, tableNameOfSummary } from '@starwhale/core/datastore/utils' import { useQueryDatastore } from '@starwhale/core/datastore/hooks/useFetchDatastore' -import { useProject } from '@/domain/project/hooks/useProject' import Table from '@/components/Table' import { Panel, StatelessAccordion } from 'baseui/accordion' import { QueryTableRequest } from '@starwhale/core/datastore' @@ -14,7 +13,7 @@ import { Button, IconFont } from '@starwhale/ui' const PAGE_TABLE_SIZE = 100 function Summary({ fetch }: any) { - const record: Record = fetch?.data?.records?.[0] ?? {} + const record: Record = fetch?.data?.records?.[0] const [expanded, setExpanded] = React.useState(false) return ( @@ -96,9 +95,7 @@ function Summary({ fetch }: any) { } key='summary' > - {fetch?.data?.records.length === 0 && ( - - )} + {!record && }
- {Object.keys(record) - .sort((a, b) => { - if (a === 'id') return -1 - return a > b ? 1 : -1 - }) - .filter((label) => typeof record[label] !== 'object') - .map((label) => { - return ( - -
- {label} -
-
- {record[label]} -
- - ) - })} + {record && + Object.keys(record) + .sort((a, b) => { + if (a === 'id') return -1 + return a > b ? 1 : -1 + }) + .filter((label) => typeof record[label] !== 'object') + .map((label) => { + return ( + +
+ {label} +
+
+ {record[label]} +
+ + ) + })}
@@ -172,13 +170,9 @@ function EvaluationViewer({ table, filter }: { table: string; filter?: Record - } - - if (info.isError) { - return - } + // if (info.isFetching) { + // return + // } if (table.includes('/summary')) return @@ -192,15 +186,14 @@ function EvaluationViewer({ table, filter }: { table: string; filter?: Record() - const { project } = useProject() + const { jobId, projectId } = useParams<{ jobId: string; projectId: string }>() const tables = React.useMemo(() => { const names = [] - if (project?.name) names.push(tableNameOfSummary(project?.name)) + if (projectId) names.push(tableNameOfSummary(projectId)) return [...names] - }, [project?.name]) + }, [projectId]) return (
diff --git a/console/src/pages/Model/ModelOverviewLayout.tsx b/console/src/pages/Model/ModelOverviewLayout.tsx index a5a2a279af..3c9b80bd42 100644 --- a/console/src/pages/Model/ModelOverviewLayout.tsx +++ b/console/src/pages/Model/ModelOverviewLayout.tsx @@ -8,11 +8,9 @@ import { fetchModel, removeModel } from '@model/services/model' import BaseSubLayout from '@/pages/BaseSubLayout' import IconFont from '@starwhale/ui/IconFont' import { BaseNavTabs } from '@/components/BaseNavTabs' -import { Button } from '@starwhale/ui' +import { Button, Toggle } from '@starwhale/ui' import { usePage } from '@/hooks/usePage' import qs from 'qs' -import Checkbox from '@starwhale/ui/Checkbox' -import { STYLE_TYPE } from 'baseui/checkbox' import { createUseStyles } from 'react-jss' import { useQueryArgs } from '@starwhale/core' import { ConfirmButton } from '@starwhale/ui/Modal' @@ -165,18 +163,17 @@ export default function ModelOverviewLayout({ children }: IModelLayoutProps) {
- { - setIsCompare(e.currentTarget.checked) - if (!e.currentTarget.checked) + { + setIsCompare(checked) + if (!checked) history.push( `/projects/${projectId}/models/${modelId}/versions/${modelVersionId}/${activeItemId}?${qs.stringify( { ...page, compare: undefined } )}` ) }} - checkmarkType={STYLE_TYPE.toggle_round} /> {t('model.viewer.compare')}