-
)
@@ -28,7 +28,7 @@ export default function BusyPlaceholder({ type }: IBusyPlaceholderProps) {
children = (
<>
-
)
diff --git a/console/src/components/Header/index.tsx b/console/src/components/Header/index.tsx
index 62e07c1419..2d64f665c9 100644
--- a/console/src/components/Header/index.tsx
+++ b/console/src/components/Header/index.tsx
@@ -7,17 +7,19 @@ import useTranslation from '@/hooks/useTranslation'
import { createUseStyles } from 'react-jss'
import { IThemedStyleProps } from '@/theme'
import { useCurrentThemeType } from '@/hooks/useCurrentThemeType'
-import { BsChevronDown } from 'react-icons/bs'
-import { Link, useHistory } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
import PasswordForm from '@user/components/PasswordForm'
import { IChangePasswordSchema } from '@user/schemas/user'
import { changePassword } from '@user/services/user'
import { SidebarContext } from '@/contexts/SidebarContext'
import { toaster } from 'baseui/toast'
import { useCurrentUserRoles } from '@/hooks/useCurrentUserRoles'
+import { TextLink } from '@/components/Link'
+import classNames from 'classnames'
import { useAuth } from '@/api/Auth'
import IconFont from '../IconFont'
import Logo from './Logo'
+import Avatar from '../Avatar'
const useHeaderStyles = createUseStyles({
headerWrapper: {
@@ -114,11 +116,11 @@ const useStyles = createUseStyles({
'cursor': 'pointer',
'display': 'flex',
'align-items': 'center',
- 'min-width': '140px',
'height': '100%',
'margin-left': '12px',
'padding': '10px 0 10px 0',
'justifyContent': 'flex-end',
+ 'width': '220px',
'&:hover': {
'& $userMenu': {
@@ -138,11 +140,11 @@ const useStyles = createUseStyles({
'backgroundColor': '#264480',
},
userMenu: (props: IThemedStyleProps) => ({
+ 'padding': '16px 0px 0px',
'position': 'absolute',
'top': '100%',
'display': 'none',
'margin': 0,
- 'padding': '8px 0',
'line-height': 1.6,
'flex-direction': 'column',
'alignItems': 'center',
@@ -164,18 +166,69 @@ const useStyles = createUseStyles({
'text-decoration': 'none',
},
},
+ 'backgroundColor': '#FFF',
}),
+ userMenuItems: {
+ width: '100%',
+ display: 'flex',
+ flexShrink: 0,
+ flexDirection: 'column',
+ overflow: 'hidden',
+ overflowY: 'auto',
+ background: '#FFFFFF',
+ transition: 'all 200ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms',
+ color: 'rgba(2,16,43,0.60)',
+ borderRight: '1px solid #E2E7F0',
+ padding: '8px 12px 8px',
+ },
userMenuItem: (props: IThemedStyleProps) => ({
+ 'display': 'flex',
+ 'alignItems': 'center',
+ 'justifyContent': 'left',
+ 'alignSelf': 'normal',
+ 'gap': '10px',
+ 'height': '32px',
+ 'paddingLeft': '10px',
+ 'color': props.theme.colors.contentPrimary,
+ 'borderRadius': '4px',
+ '&:hover': {
+ backgroundColor: 'var(--color-brandMenuItemBackground)',
+ },
+ }),
+ userSignedIn: {
+ flex: 1,
+ color: 'rgba(2,16,43,0.40)',
+ textAlign: 'left',
+ width: '100%',
+ marginBottom: '13px',
+ padding: '0 12px',
+ },
+ userAvatar: {
+ flex: 1,
+ width: '100%',
+ paddingBottom: '17px',
+ gap: '13px',
+ display: 'grid',
+ gridTemplateColumns: '34px 1fr',
+ overflow: 'hidden',
+ padding: '0 12px',
+ },
+ userAvatarInfo: {
+ flex: 1,
display: 'flex',
+ flexDirection: 'row',
alignItems: 'center',
- justifyContent: 'left',
- alignSelf: 'normal',
- gap: '10px',
- height: '32px',
- paddingLeft: '10px',
- color: props.theme.colors.contentPrimary,
- backgroundColor: 'var(--color-brandMenuItemBackground)',
- }),
+ },
+ userAvatarName: {
+ fontSize: '14px',
+ lineHeight: '14px',
+ color: '#02102B',
+ },
+ userAvatarEmail: {
+ fontSize: '12px',
+ lineHeight: '12px',
+ color: 'rgba(2,16,43,0.60)',
+ },
roundWrapper: {
borderRadius: '50%',
backgroundColor: 'var(--color-brandWhite)',
@@ -185,6 +238,11 @@ const useStyles = createUseStyles({
alignItems: 'center',
justifyContent: 'center',
},
+ divider: {
+ height: '1px',
+ width: '100%',
+ backgroundColor: '#EEF1F6',
+ },
})
export default function Header() {
@@ -231,7 +289,9 @@ export default function Header() {
{currentUser && (
- {t('Project')}
+
+ {t('Project')}
+
)}
@@ -239,40 +299,51 @@ export default function Header() {
{currentUser && (
-
-
-
-
- {sysRole === 'OWNER' && (
+ 
+
) : (
)}
diff --git a/console/src/components/Indicator/utils.ts b/console/src/components/Indicator/utils.ts
index 4ff7c17873..6dd4f7b15b 100644
--- a/console/src/components/Indicator/utils.ts
+++ b/console/src/components/Indicator/utils.ts
@@ -1,8 +1,8 @@
// @ts-nocheck
+/* eslint-disable */
+import struct from '@aksel/structjs'
-import _ from 'lodash'
-
-interface IRocAuc {
+export interface IRocAuc {
fpr: number[]
tpr: number[]
thresholds: number[]
@@ -70,7 +70,18 @@ const Layout = {
},
}
-export function getRocAucConfig(title = '', labels: string[], data: Record) {
+var unhexlify = function (str) {
+ const f = new Uint8Array(8)
+ let j = 0
+ for (var i = 0, l = str.length; i < l; i += 2) {
+ f[j] = parseInt(str.substr(i, 2), 16)
+ j++
+ }
+ let s = struct('>d')
+ return s.unpack(f.buffer)[0]
+}
+
+export function getRocAucConfig(title = '', labels: string[], data: IRocAuc[]) {
const layout = {
...Layout.init,
title,
@@ -86,20 +97,29 @@ export function getRocAucConfig(title = '', labels: string[], data: Record {
+ return parseInt(a.id) - parseInt(b.id)
+ })
+ data?.forEach((item, i) => {
+ if (i % 6 != 0) return
+ fpr.push(Number(unhexlify(item.fpr).toFixed('4')))
+ tpr.push(Number(unhexlify(item.tpr).toFixed('4')))
+ })
+
const rocAucData = {
data: [
- ..._.map(data, (roc_auc, label) => {
- return {
- x: roc_auc.fpr,
- y: roc_auc.tpr,
- mode: 'lines+markers',
- name: `label ${label}`,
- type: 'scatter',
- }
- }),
{
- x: [0, 1],
- y: [0, 1],
+ x: fpr,
+ y: tpr,
+ mode: 'lines+markers',
+ name: `label ${0}`,
+ type: 'scatter',
+ },
+ {
+ x: [0.0, 1],
+ y: [0.0, 1],
mode: 'lines',
name: 'baseline',
line: {
@@ -112,6 +132,7 @@ export function getRocAucConfig(title = '', labels: string[], data: Record void
+}
+
+export default function ButtonLink({ children, className, onClick, ...rest }: IButtonLinkProps) {
+ const styles = useLinkStyles()
+
+ return (
+
+ {children}
+
+ )
+}
+// 'row-center--inline', 'gap4',
diff --git a/console/src/components/Link/IconLink.tsx b/console/src/components/Link/IconLink.tsx
new file mode 100644
index 0000000000..865331d2b5
--- /dev/null
+++ b/console/src/components/Link/IconLink.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { createUseStyles } from 'react-jss'
+import cn from 'classnames'
+import BaseLink, { ILinkProps } from './Link'
+
+const useLinkStyles = createUseStyles({
+ link: {
+ 'display': 'flex',
+ 'fontSize': '12px',
+ 'backgroundColor': '#F4F5F7',
+ 'borderRadius': '2px',
+ 'width': '20px',
+ 'height': '20px',
+ 'textDecoration': 'none',
+ 'color': 'gray',
+ '&:hover span': {
+ color: ' #5181E0',
+ },
+ '&:hover': {
+ color: ' #5181E0',
+ backgroundColor: '#F0F4FF',
+ },
+ },
+})
+
+export default function IconLink({ children, className, ...rest }: ILinkProps) {
+ const styles = useLinkStyles()
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/console/src/components/Link/Link.tsx b/console/src/components/Link/Link.tsx
new file mode 100644
index 0000000000..01748beb62
--- /dev/null
+++ b/console/src/components/Link/Link.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { StatefulTooltip, StatefulTooltipProps } from 'baseui/tooltip'
+import { createUseStyles } from 'react-jss'
+import cn from 'classnames'
+import { Link as BaseLink, LinkProps } from 'react-router-dom'
+
+const useLinkStyles = createUseStyles({
+ link: {
+ 'display': 'flex',
+ 'fontSize': '12px',
+ 'textDecoration': 'none',
+ 'color': 'gray',
+ '&:hover': {
+ color: ' #5181E0',
+ },
+ },
+})
+
+export type ILinkProps = {
+ to: string
+ tooltip?: StatefulTooltipProps
+ children: React.ReactNode
+ style?: React.CSSProperties
+ className?: string
+} & LinkProps
+
+export default function Link({ to, tooltip, className, style = {}, children, ...rest }: ILinkProps) {
+ const styles = useLinkStyles()
+
+ const { content, placement = 'top', ...tooltipRest } = tooltip || {}
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/console/src/components/Link/TextLink.tsx b/console/src/components/Link/TextLink.tsx
new file mode 100644
index 0000000000..c41c1b6324
--- /dev/null
+++ b/console/src/components/Link/TextLink.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { createUseStyles } from 'react-jss'
+import cn from 'classnames'
+import BaseLink, { ILinkProps } from './Link'
+
+const useLinkStyles = createUseStyles({
+ link: {
+ // display: 'inline-block',
+ textDecoration: 'none',
+ flex: 1,
+ width: '100%',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ },
+ text: {
+ 'display': 'initial',
+ 'fontSize': '14px',
+ 'color': 'rgb(2, 16, 43)',
+ '&:hover': {
+ textDecoration: 'underline',
+ color: ' #5181E0 ',
+ },
+ },
+})
+
+export default function TextLink({ children, className, style, ...rest }: ILinkProps) {
+ const styles = useLinkStyles()
+
+ return (
+
+
+ )
+}
diff --git a/console/src/components/Link/index.ts b/console/src/components/Link/index.ts
new file mode 100644
index 0000000000..38b8017c7c
--- /dev/null
+++ b/console/src/components/Link/index.ts
@@ -0,0 +1,4 @@
+export * from './Link'
+export { default as IconLink } from './IconLink'
+export { default as TextLink } from './TextLink'
+export { default as ButtonLink } from './ButtonLink'
diff --git a/console/src/components/Table/TableNormal.tsx b/console/src/components/Table/TableNormal.tsx
index f1689db878..773516559d 100644
--- a/console/src/components/Table/TableNormal.tsx
+++ b/console/src/components/Table/TableNormal.tsx
@@ -1,14 +1,11 @@
/* eslint-disable */
-import React, { useRef, useState, useMemo } from 'react'
-import { Table as TableSemantic, TableProps as BaseTableProps } from 'baseui/table-semantic'
+import React, { useRef, useMemo } from 'react'
+import { TableProps as BaseTableProps } from 'baseui/table-semantic'
import { Pagination, SIZE as PaginationSize } from 'baseui/pagination'
import { Skeleton } from 'baseui/skeleton'
-import { FiInbox } from 'react-icons/fi'
import useTranslation from '@/hooks/useTranslation'
-import Text from '@/components/Text'
import { usePage } from '@/hooks/usePage'
import { IPaginationProps } from '@/components/Table/IPaginationProps'
-import { StatefulTooltip } from 'baseui/tooltip'
import {
StatefulDataTable,
CategoricalColumn,
@@ -27,6 +24,7 @@ import type { ColumnT, ConfigT, RowT } from '../data-table/types'
import { useUID, useUIDSeed } from 'react-uid'
import useStore from '../data-table/store'
import { useEffect } from 'react'
+import BusyPlaceholder from '../BusyLoaderWrapper/BusyPlaceholder'
export interface ITableProps extends BaseTableProps {
batchActions?: Types.BatchActionT[]
@@ -254,7 +252,7 @@ export function TableTyped({
gap: 8,
}}
>
-
)}
/>
diff --git a/console/src/components/Table/TableTyped.tsx b/console/src/components/Table/TableTyped.tsx
index b7c164adae..1f7d2a26b6 100644
--- a/console/src/components/Table/TableTyped.tsx
+++ b/console/src/components/Table/TableTyped.tsx
@@ -1,14 +1,11 @@
/* eslint-disable */
-import React, { useRef, useState, useMemo } from 'react'
-import { Table as TableSemantic, TableProps as BaseTableProps } from 'baseui/table-semantic'
+import React, { useRef, useMemo } from 'react'
+import { TableProps as BaseTableProps } from 'baseui/table-semantic'
import { Pagination, SIZE as PaginationSize } from 'baseui/pagination'
import { Skeleton } from 'baseui/skeleton'
-import { FiInbox } from 'react-icons/fi'
import useTranslation from '@/hooks/useTranslation'
-import Text from '@/components/Text'
import { usePage } from '@/hooks/usePage'
import { IPaginationProps } from '@/components/Table/IPaginationProps'
-import { StatefulTooltip } from 'baseui/tooltip'
import {
StatefulDataTable,
CategoricalColumn,
@@ -29,6 +26,7 @@ import { useEffect } from 'react'
import { useStyletron } from 'baseui'
import { createUseStyles } from 'react-jss'
import cn from 'classnames'
+import BusyPlaceholder from '../BusyLoaderWrapper/BusyPlaceholder'
const useStyles = createUseStyles({
table: {
@@ -286,23 +284,7 @@ export function TableTyped({
/>
)}
// @ts-ignore
- emptyMessage={() => (
- {t('Signed in as')}
+
+
+ {currentUser.name}
+
+
+
+ {currentUser.email ?? ''}
+
+ {sysRole === 'OWNER' && (
+
diff --git a/console/src/components/IconFont/index.tsx b/console/src/components/IconFont/index.tsx
index 8a0ec1646f..7a210cb42f 100644
--- a/console/src/components/IconFont/index.tsx
+++ b/console/src/components/IconFont/index.tsx
@@ -97,7 +97,7 @@ export default function IconFont({ size = 14, type = 'user', kind = 'inherit', s
}}
>
{type in hijacked ? (
- {
+ history.push('/admin')
+ }}
+ >
+
+ )}
{
- history.push('/admin')
+ setIsChangePasswordOpen(true)
}}
>
-
- )}
- {
- setIsChangePasswordOpen(true)
- }}
- >
-
-
-
+
+
+ {children} +
+
-
- )}
+ emptyMessage={() =>
+ children: React.ReactNode
+}
+
+// const StoreProvider = ({ key, initState, children }: IStoreProviderProps) => (
+// const storeRef = useRef>();
+// if (!storeRef.current) {
+// storeRef.current = createMyStore();
+// }
+
+// createCustomStore(key ?? 'store', initState)}>{children}
+// )
+
+// export { StoreProvider, useStore }
+
+const MyContext = createContext(null)
+
+export function StoreProvider({ key = 'store', initState, children }: IStoreProviderProps) {
+ const storeRef = React.useRef()
+ if (!storeRef.current) {
+ storeRef.current = createCustomStore(key, initState)
+ }
+ console.log(storeRef.current)
+ return {children}
+}
+
+export function useContextStore(selector: (state: ITableState) => T) {
+ const store = useContext(MyContext)
+ if (store === null) {
+ throw new Error('Missing Wrapper in the tree')
+ }
+ const value = useStore(store, selector)
+ return value
+}
diff --git a/console/src/domain/datastore/hooks/useParseDatastore.ts b/console/src/domain/datastore/hooks/useParseDatastore.ts
new file mode 100644
index 0000000000..60bdd10fb6
--- /dev/null
+++ b/console/src/domain/datastore/hooks/useParseDatastore.ts
@@ -0,0 +1,41 @@
+// @ts-nocheck
+/* eslint-disable */
+import omit from 'lodash/omit'
+import keyBy from 'lodash/keyBy'
+import React from 'react'
+import { RecordListVO } from '../schemas/datastore'
+import struct from '@aksel/structjs'
+
+const unhexlify = function (str) {
+ const f = new Uint8Array(8)
+ let j = 0
+ for (var i = 0, l = str.length; i < l; i += 2) {
+ f[j] = parseInt(str.substr(i, 2), 16)
+ j++
+ }
+ let s = struct('>d')
+
+ return s.unpack(f.buffer)[0]
+}
+export function useParseConfusionMatrix(data: RecordListVO = {}) {
+ const labels = React.useMemo(() => {
+ const { columnTypes } = data
+ return Object.keys(omit(columnTypes, 'id')).sort()
+ }, [data])
+
+ const binarylabel = React.useMemo(() => {
+ const { records = [] } = data
+ const recordMap = keyBy(records, 'id')
+ const rtn: any[][] = []
+ labels.forEach((labeli, i) => {
+ labels.forEach((labelj, j) => {
+ if (!rtn[i]) rtn[i] = []
+ rtn[i][j] = unhexlify(recordMap?.[labeli.split('_')[1]]?.[labelj]) ?? ''
+ })
+ })
+ return rtn
+ }, [data, labels])
+
+ // console.log(labels, binarylabel)
+ return { labels, binarylabel }
+}
diff --git a/console/src/domain/datastore/utils.ts b/console/src/domain/datastore/utils.ts
index 9d6730be1c..9a06c40054 100644
--- a/console/src/domain/datastore/utils.ts
+++ b/console/src/domain/datastore/utils.ts
@@ -4,8 +4,8 @@ const VERSION_PREFIX_CNT = 2
export function tableDataLink(
projectId: string,
- datasetId: string,
- datasetVersion: string,
+ datasetName: string,
+ datasetVersionName: string,
query: {
uri: string
authName: string
@@ -14,20 +14,33 @@ export function tableDataLink(
Authorization?: string
}
) {
- return `/api/v1/project/${projectId}/dataset/${datasetId}/version/${datasetVersion}/link?${qs.stringify(query)}`
+ return `/api/v1/project/${projectId}/dataset/${datasetName}/version/${datasetVersionName}/link?${qs.stringify(
+ query
+ )}`
}
-export function tableNameOfDataset(projectId: string, datasetId: string, datasetVersion: string) {
- return `project/${projectId}/dataset/${datasetId}/${datasetVersion.substring(
+export function tableNameOfDataset(projectName: string, datasetName: string, datasetVersionName: string) {
+ return `project/${projectName}/dataset/${datasetName}/${datasetVersionName.substring(
0,
VERSION_PREFIX_CNT
- )}/${datasetVersion}/meta`
+ )}/${datasetVersionName}/meta`
}
-export function tableNameOfResult(projectId: string, evaluationId: string) {
- return `project/${projectId}/eval/${evaluationId}/results`
+export function tableNameOfResult(projectName: string, evaluationUuid: string) {
+ return `project/${projectName}/eval/${evaluationUuid.substring(0, VERSION_PREFIX_CNT)}/${evaluationUuid}/results`
}
-export function tableNameOfSummary(projectId: string) {
- return `/project/${projectId}/eval/summary`
+export function tableNameOfConfusionMatrix(projectName: string, evaluationUuid: string) {
+ return `project/${projectName}/eval/${evaluationUuid.substring(
+ 0,
+ VERSION_PREFIX_CNT
+ )}/${evaluationUuid}/confusion_matrix/binarylabel`
+}
+
+export function tableNameOfRocAuc(projectName: string, evaluationUuid: string) {
+ return `project/${projectName}/eval/${evaluationUuid.substring(0, VERSION_PREFIX_CNT)}/${evaluationUuid}/roc_auc/0`
+}
+
+export function tableNameOfSummary(projectName: string) {
+ return `project/${projectName}/eval/summary`
}
diff --git a/console/src/domain/project/hooks/useFetchProject.ts b/console/src/domain/project/hooks/useFetchProject.ts
index 29ffef4aa2..66aa1f26aa 100644
--- a/console/src/domain/project/hooks/useFetchProject.ts
+++ b/console/src/domain/project/hooks/useFetchProject.ts
@@ -3,8 +3,7 @@ import { fetchProject } from '../services/project'
export function useFetchProject(projectId?: string) {
const projectInfo = useQuery(`fetchProject:${projectId}`, () => {
- // eslint-disable-next-line prefer-promise-reject-errors
- if (!projectId) return Promise.reject('fetchProject: no projectId stop fetching')
+ if (!projectId) return Promise.reject(new Error('fetchProject: no projectId stop fetching'))
return fetchProject(projectId)
})
diff --git a/console/src/domain/project/schemas/project.tsx b/console/src/domain/project/schemas/project.tsx
index 3e123572f5..f4767e8d38 100644
--- a/console/src/domain/project/schemas/project.tsx
+++ b/console/src/domain/project/schemas/project.tsx
@@ -6,6 +6,12 @@ export interface IProjectSchema extends IResourceSchema {
owner?: IUserSchema
privacy?: string
description?: string
+ statistics: {
+ modelCounts: number
+ datasetCounts: number
+ evaluationCounts: number
+ memberCounts: number
+ }
}
export interface IUpdateProjectSchema {
diff --git a/console/src/domain/user/schemas/user.tsx b/console/src/domain/user/schemas/user.tsx
index d743690b89..486487d31b 100644
--- a/console/src/domain/user/schemas/user.tsx
+++ b/console/src/domain/user/schemas/user.tsx
@@ -10,6 +10,7 @@ export interface IUserRoleSchema {
export interface IUserSchema extends IResourceSchema {
id: string
name: string
+ email: string
isEnabled: string
role: IUserRoleSchema
}
diff --git a/console/src/i18n/locales.ts b/console/src/i18n/locales.ts
index 6c5cf5936e..cf89139112 100644
--- a/console/src/i18n/locales.ts
+++ b/console/src/i18n/locales.ts
@@ -348,9 +348,6 @@ const locales0 = {
'Password Not Equal': {
en: 'The passwords you entered do not match',
},
- 'no data': {
- en: 'no data',
- },
'submit': {
en: 'submit',
},
@@ -616,6 +613,12 @@ const locales0 = {
'or': {
en: 'or',
},
+ 'Members': {
+ en: 'Members',
+ },
+ 'Signed in as': {
+ en: 'Signed in as',
+ },
}
export const locales: { [key in keyof typeof locales0]: ILocaleItem } = locales0
diff --git a/console/src/main.tsx b/console/src/main.tsx
index 57db783996..435de725e0 100644
--- a/console/src/main.tsx
+++ b/console/src/main.tsx
@@ -4,7 +4,12 @@ import '@/styles/_global.scss'
import '@/i18n'
import reportWebVitals from '@/reportWebVitals'
import App from './App'
-
+// eslint-disable-next-line
+// @ts-ignore
+window.g = null
+// eslint-disable-next-line
+// @ts-ignore
+window.i = null
ReactDOM.render(
{
return [
-
+
-
- {children}
+
)
}
diff --git a/console/src/pages/Evaluation/EvaluationResults.tsx b/console/src/pages/Evaluation/EvaluationResults.tsx
index bb14e25983..33bca2c0c9 100644
--- a/console/src/pages/Evaluation/EvaluationResults.tsx
+++ b/console/src/pages/Evaluation/EvaluationResults.tsx
@@ -1,26 +1,79 @@
import LabelsIndicator from '@/components/Indicator/LabelsIndicator'
-import React, { useMemo } from 'react'
+import React, { useMemo, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useQuery } from 'react-query'
import { fetchJobResult } from '@/domain/job/services/job'
import { ILabels, INDICATORTYPE } from '@/components/Indicator/types.d'
import _ from 'lodash'
-import { getHeatmapConfig, getRocAucConfig } from '@/components/Indicator/utils'
+import { getHeatmapConfig, getRocAucConfig, IRocAuc } from '@/components/Indicator/utils'
import { LabelSmall } from 'baseui/typography'
import Card from '@/components/Card'
import useTranslation from '@/hooks/useTranslation'
import SummaryIndicator from '@/components/Indicator/SummaryIndicator'
import BusyPlaceholder from '@/components/BusyLoaderWrapper/BusyPlaceholder'
+import { tableNameOfConfusionMatrix, tableNameOfRocAuc } from '@/domain/datastore/utils'
+import { useJob } from '@/domain/job/hooks/useJob'
+import { useQueryDatasetList, useScanDatastore } from '@/domain/datastore/hooks/useFetchDatastore'
+import { useProject } from '@/domain/project/hooks/useProject'
+import { useParseConfusionMatrix } from '@/domain/datastore/hooks/useParseDatastore'
const PlotlyVisualizer = React.lazy(
() => import(/* webpackChunkName: "PlotlyVisualizer" */ '../../components/Indicator/PlotlyVisualizer')
)
+function Heatmap({ labels, binarylabel }: any) {
+ const [t] = useTranslation()
+ const heatmapData = getHeatmapConfig(t('Confusion Matrix'), labels, binarylabel)
+ return (
+
+
+ )
+}
+
+function RocAuc({ labels, data }: { labels: any[]; data: IRocAuc[] }) {
+ const [t] = useTranslation()
+ const title = t('Roc Auc')
+ const rocaucData = getRocAucConfig(title, labels, data)
+
+ return (
+
+
+ )
+}
+
function EvaluationResults() {
const { jobId, projectId } = useParams<{ jobId: string; projectId: string }>()
const jobResult = useQuery(`fetchJobResult:${projectId}:${jobId}`, () => fetchJobResult(projectId, jobId), {
refetchOnWindowFocus: false,
})
+ const { project } = useProject()
+ const { job } = useJob()
+ const resultTableName = React.useMemo(() => {
+ if (!project?.name || !job?.uuid) return ''
+ return tableNameOfConfusionMatrix(project?.name as string, job?.uuid)
+ }, [project, job])
+
+ const resultTable = useQueryDatasetList(resultTableName, { pageNum: 0, pageSize: 1000 })
+ // console.log(project?.name, resultTableName, resultTable)
+ const { labels, binarylabel } = useParseConfusionMatrix(resultTable.data)
+
+ const rocAucTable = useScanDatastore({
+ tables: [{ tableName: tableNameOfRocAuc(project?.name as string, job?.uuid ?? '') }],
+ start: 0,
+ limit: 1000,
+ })
+
+ useEffect(() => {
+ if (job?.uuid && project?.name) {
+ rocAucTable.refetch()
+ }
+ }, [project?.name, job?.uuid])
const [t] = useTranslation()
@@ -40,7 +93,7 @@ function EvaluationResults() {
break
}
case INDICATORTYPE.CONFUSION_MATRIX: {
- const heatmapData = getHeatmapConfig(k, _.keys(v?.binarylabel), v?.binarylabel)
+ const heatmapData = getHeatmapConfig(k, labels, v?.binarylabel)
outTitle = t('Confusion Matrix')
children = (
- {v?.label}:
+ return (
+
+ )
+ }, [job, t])
+
+ const header = useMemo(
+ () => (
+
+ {items.map((v) => (
+
- ))}
-
+ ))}
+
+
-
+ {v?.label}:
+
+ {v?.value}
{v?.value}
-
+
+ {info}
+
+
+ ),
+ [job, info, t]
)
+
return (
{children}
+ {items.map((v) => (
+
+ )
+
+ const header = React.useMemo(
+ () => (
+
+
+ ))}
+
+ {v?.label}:
+
+ {v?.value}
+
+
+ {info}
+
+
+ ),
+ [model, info, t]
+ )
- return
-
- ))}
-
- {v?.label}:
-
- {v?.value}
-
- {members.data?.map((member) => (
-
-
+ {members.data?.map((member, i) => (
+
{member.user.name?.substr(0, 2)}
-
-
-
-
+
+
+
-
+
{[project.owner?.name, project.name].join('/')}
-
-
+
+
{
display: 'flex',
fontSize: '12px',
color: project?.privacy === 'PRIVATE' ? '#4848B3' : '#00B368',
- backgroundColor: '#E6FFF4',
+ backgroundColor: project?.privacy === 'PRIVATE' ? '#EDEDFF' : '#E6FFF4',
borderRadius: '9px',
padding: '3px 10px',
})
)}
>
- {project.privacy?.toLowerCase()}
+ {project.privacy === 'PRIVATE' ? t('Private') : t('Public')}
-
- {project.description ?? ''}
+
+
{project.description ?? ''}
} + placement='bottom' + > +{project.description ?? ''}
{
justifyContent: 'space-between',
})}
>
-
+ {children}
}
diff --git a/console/src/pages/Runtime/RuntimeListCard.tsx b/console/src/pages/Runtime/RuntimeListCard.tsx
index 579b426466..2d7e417070 100644
--- a/console/src/pages/Runtime/RuntimeListCard.tsx
+++ b/console/src/pages/Runtime/RuntimeListCard.tsx
@@ -4,9 +4,10 @@ import { usePage } from '@/hooks/usePage'
import { formatTimestampDateTime } from '@/utils/datetime'
import useTranslation from '@/hooks/useTranslation'
import Table from '@/components/Table'
-import { Link, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
import { useFetchRuntimes } from '@/domain/runtime/hooks/useFetchRuntimes'
import User from '@/domain/user/components/User'
+import { TextLink } from '@/components/Link'
export default function RuntimeListCard() {
const [page] = usePage()
@@ -24,15 +25,15 @@ export default function RuntimeListCard() {
data={
runtimesInfo.data?.list.map((runtime) => {
return [
-
+
{runtime.name}
- ,
+ ,
runtime.version?.meta ?? '-',
runtime.owner &&
{t('Version History')}
- ,
+ ,
]
}) ?? []
}
diff --git a/console/src/pages/Runtime/RuntimeVersionLayout.tsx b/console/src/pages/Runtime/RuntimeVersionLayout.tsx
index a6a9fb3438..4880dfa633 100644
--- a/console/src/pages/Runtime/RuntimeVersionLayout.tsx
+++ b/console/src/pages/Runtime/RuntimeVersionLayout.tsx
@@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom'
import { INavItem } from '@/components/BaseSidebar'
import { fetchRuntime } from '@/domain/runtime/services/runtime'
import BaseSubLayout from '@/pages/BaseSubLayout'
-import { useFetchProject } from '@/domain/project/hooks/useFetchProject'
export interface IRuntimeLayoutProps {
children: React.ReactNode
@@ -16,7 +15,6 @@ export default function RuntimeVersionLayout({ children }: IRuntimeLayoutProps)
const { projectId, runtimeId } = useParams<{ runtimeId: string; projectId: string }>()
const runtimeInfo = useQuery(`fetchRuntime:${projectId}:${runtimeId}`, () => fetchRuntime(projectId, runtimeId))
const { runtime, setRuntime } = useRuntime()
- const projectInfo = useFetchProject(projectId)
const { setRuntimeLoading } = useRuntimeLoading()
useEffect(() => {
setRuntimeLoading(runtimeInfo.isLoading)
@@ -38,25 +36,24 @@ export default function RuntimeVersionLayout({ children }: IRuntimeLayoutProps)
const [t] = useTranslation()
const runtimeName = runtime?.versionMeta ?? '-'
- const project = projectInfo.data ?? {}
const breadcrumbItems: INavItem[] = useMemo(() => {
const items = [
{
title: t('Runtimes'),
- path: `/projects/${project?.id}/runtimes`,
+ path: `/projects/${projectId}/runtimes`,
},
{
title: runtimeName,
- path: `/projects/${project?.id}/runtimes/${runtimeId}`,
+ path: `/projects/${projectId}/runtimes/${runtimeId}`,
},
{
title: t('runtime versions'),
- path: `/projects/${project?.id}/runtimes/${runtimeId}/versions`,
+ path: `/projects/${projectId}/runtimes/${runtimeId}/versions`,
},
]
return items
- }, [runtimeName, t, project?.id, runtimeId])
+ }, [runtimeName, t, projectId, runtimeId])
return {children}
}
diff --git a/console/src/routes.tsx b/console/src/routes.tsx
index c172680f18..b99a56563b 100644
--- a/console/src/routes.tsx
+++ b/console/src/routes.tsx
@@ -75,8 +75,8 @@ const Routes = () => {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
diff --git a/console/src/pages/Runtime/RuntimeLayout.tsx b/console/src/pages/Runtime/RuntimeLayout.tsx
index 83bf5b1bc2..e5994eb9a8 100644
--- a/console/src/pages/Runtime/RuntimeLayout.tsx
+++ b/console/src/pages/Runtime/RuntimeLayout.tsx
@@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom'
import { INavItem } from '@/components/BaseSidebar'
import { fetchRuntime } from '@/domain/runtime/services/runtime'
import BaseSubLayout from '@/pages/BaseSubLayout'
-import { useFetchProject } from '@/domain/project/hooks/useFetchProject'
export interface IRuntimeLayoutProps {
children: React.ReactNode
@@ -16,7 +15,6 @@ export default function RuntimeLayout({ children }: IRuntimeLayoutProps) {
const { projectId, runtimeId } = useParams<{ runtimeId: string; projectId: string }>()
const runtimeInfo = useQuery(`fetchRuntime:${projectId}:${runtimeId}`, () => fetchRuntime(projectId, runtimeId))
const { runtime, setRuntime } = useRuntime()
- const projectInfo = useFetchProject(projectId)
const { setRuntimeLoading } = useRuntimeLoading()
useEffect(() => {
setRuntimeLoading(runtimeInfo.isLoading)
@@ -38,21 +36,19 @@ export default function RuntimeLayout({ children }: IRuntimeLayoutProps) {
const [t] = useTranslation()
const runtimeName = runtime?.versionMeta ?? '-'
- const project = projectInfo.data ?? {}
-
const breadcrumbItems: INavItem[] = useMemo(() => {
const items = [
{
title: t('Runtimes'),
- path: `/projects/${project?.id}/runtimes`,
+ path: `/projects/${projectId}/runtimes`,
},
{
title: runtimeName,
- path: `/projects/${project?.id}/runtimes/${runtimeId}`,
+ path: `/projects/${projectId}/runtimes/${runtimeId}`,
},
]
return items
- }, [project?.id, runtimeName, runtimeId, t])
+ }, [projectId, runtimeName, runtimeId, t])
return
-
+
diff --git a/console/vite.config.ts b/console/vite.config.ts
index cca7e3c05a..0706509afc 100644
--- a/console/vite.config.ts
+++ b/console/vite.config.ts
@@ -40,7 +40,7 @@ export default defineConfig({
},
},
plugins: [
- // eslint(),
+ eslint(),
react({
exclude: /\.stories\.(t|j)sx?$/,
}),
-
- {/* setting */}
-
-
-
-
-
-
- {/* project */}
-
-
-
-
-
-
-
-
+
+ {/* setting */}
+
+
+
+
+
+
+ {/* project */}
+
+
-
-
- {/* evaluation */}
-
-
-
-
-
-
- {/* job & task */}
-
-
-
-
-
-
- {/* datasets */}
-
-
-
-
+
+
+
+
+
+
+ {/* evaluation */}
+
+
+
+
+
+
+ {/* job & task */}
+
+
+
+
+
+
+ {/* datasets */}
+
+
+
+
-
-
- {/* runtime */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* model */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* admin */}
-
-
-
-
-
-
- {/* default */}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* model */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* admin */}
+
+
+
+
+
+
+ {/* default */}
+
+
+
+
+
+
+
+