From 4f7e73127482aa661fe571813e2c1a5cc183e2cd Mon Sep 17 00:00:00 2001 From: alex fields Date: Fri, 24 May 2024 12:21:51 -0500 Subject: [PATCH 1/7] create ModelDetails --- .../MlHub/Models/ModelDetails.module.scss | 0 src/tapis-app/MlHub/Models/ModelDetails.tsx | 22 +++++++++++++++++++ src/tapis-hooks/ml-hub/models/basePath.ts | 2 +- 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 src/tapis-app/MlHub/Models/ModelDetails.module.scss create mode 100644 src/tapis-app/MlHub/Models/ModelDetails.tsx diff --git a/src/tapis-app/MlHub/Models/ModelDetails.module.scss b/src/tapis-app/MlHub/Models/ModelDetails.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx new file mode 100644 index 000000000..bb33b8e32 --- /dev/null +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Models } from '@tapis/tapis-typescript'; +import { useDetails } from 'tapis-hooks/ml-hub/models'; +import { QueryWrapper } from 'tapis-ui/_wrappers'; +import styles from './ModelsDetails.module.scss'; + +type ModelsProps = { + modelId: string +} + +const ModelDetails: React.FC = ({modelId}) => { + const { data, isLoading, error } = useDetails({modelId}); + const model: Models.ModelShortInfo = data?.result ?? {}; + return ( + +
+ {modelId} +
+ + ) +} + diff --git a/src/tapis-hooks/ml-hub/models/basePath.ts b/src/tapis-hooks/ml-hub/models/basePath.ts index 78c52f51a..4dc81d9df 100644 --- a/src/tapis-hooks/ml-hub/models/basePath.ts +++ b/src/tapis-hooks/ml-hub/models/basePath.ts @@ -1,3 +1,3 @@ -const basePath = 'https://hub.pods.tacc.tapis.io'; +const basePath = 'http://127.0.0.1:5000/'; export default basePath; From 0e6f0f75fcbcb93c2570e931907ac0241d689a22 Mon Sep 17 00:00:00 2001 From: alex fields Date: Fri, 24 May 2024 15:04:12 -0500 Subject: [PATCH 2/7] add author, downloads, created_at, last_modified, library_name to ModelDetails. --- src/tapis-app/MlHub/Models/ModelDetails.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx index bb33b8e32..28c3d9836 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.tsx +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Models } from '@tapis/tapis-typescript'; import { useDetails } from 'tapis-hooks/ml-hub/models'; import { QueryWrapper } from 'tapis-ui/_wrappers'; -import styles from './ModelsDetails.module.scss'; +import { Table } from 'reactstrap'; type ModelsProps = { modelId: string @@ -13,10 +13,21 @@ const ModelDetails: React.FC = ({modelId}) => { const model: Models.ModelShortInfo = data?.result ?? {}; return ( +
{modelId} + +
+
+ author: {model.author} + downloads: {model.downloads} + created_at: {model.created_at} + last_modified: {model.last_modified} + library_name: {model.library_name}
+
) } +export default ModelDetails; \ No newline at end of file From 4085442e1d31e126bbab765dbb40b8e49d7b4e04 Mon Sep 17 00:00:00 2001 From: alex fields Date: Wed, 29 May 2024 15:02:50 -0500 Subject: [PATCH 3/7] fix routers in Models, fix routers and layouts in ML Hub. --- src/tapis-app/MlHub/Models/ModelDetails.tsx | 16 ++++++++++++++++ src/tapis-app/MlHub/Models/Models.tsx | 5 +++-- src/tapis-app/MlHub/Models/_Router/Router.tsx | 19 ++++++++++++++++--- src/tapis-app/MlHub/Models/index.ts | 1 + src/tapis-app/MlHub/_Router/Router.tsx | 4 ++-- 5 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx index 28c3d9836..88d868774 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.tsx +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -8,6 +8,12 @@ type ModelsProps = { modelId: string } +// type ButtonNames = { +// InferenceServerDetails: String; +// ModelCard: String; +// DownloadModel: String; +// } + const ModelDetails: React.FC = ({modelId}) => { const { data, isLoading, error } = useDetails({modelId}); const model: Models.ModelShortInfo = data?.result ?? {}; @@ -30,4 +36,14 @@ const ModelDetails: React.FC = ({modelId}) => { ) } +// const Buttons: React.FC = ({InferenceServerDetails, ModelCard, DownloadModel}) => { +// return ( +//
+// +// +// +//
+// ); +// } + export default ModelDetails; \ No newline at end of file diff --git a/src/tapis-app/MlHub/Models/Models.tsx b/src/tapis-app/MlHub/Models/Models.tsx index f8184e818..91d1cad33 100644 --- a/src/tapis-app/MlHub/Models/Models.tsx +++ b/src/tapis-app/MlHub/Models/Models.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useRouteMatch } from 'react-router-dom'; import { Models as ModelsModule } from '@tapis/tapis-typescript'; import { useList } from 'tapis-hooks/ml-hub/models'; import { Icon } from 'tapis-ui/_common'; @@ -10,6 +10,7 @@ import styles from './Models.module.scss'; const Models: React.FC = () => { const { data, isLoading, error } = useList(); const models: ModelsModule.ModelShortInfo = data?.result ?? {}; + const { path } = useRouteMatch(); return ( @@ -28,7 +29,7 @@ const Models: React.FC = () => { - {model[0]} + {model[0]} diff --git a/src/tapis-app/MlHub/Models/_Router/Router.tsx b/src/tapis-app/MlHub/Models/_Router/Router.tsx index 685f0c785..fd5c51045 100644 --- a/src/tapis-app/MlHub/Models/_Router/Router.tsx +++ b/src/tapis-app/MlHub/Models/_Router/Router.tsx @@ -1,15 +1,28 @@ import React from 'react'; -import { Route, useRouteMatch, Switch } from 'react-router-dom'; +import { Route, useRouteMatch, Switch, RouteComponentProps } from 'react-router-dom'; +import { Models } from "../../Models" +import ModelDetails from '../ModelDetails'; -import { default as Models } from '../Models'; const Router: React.FC = () => { const { path } = useRouteMatch(); return ( - + + + + ) => { + return + }} /> ); }; diff --git a/src/tapis-app/MlHub/Models/index.ts b/src/tapis-app/MlHub/Models/index.ts index 450259390..067f2c5a0 100644 --- a/src/tapis-app/MlHub/Models/index.ts +++ b/src/tapis-app/MlHub/Models/index.ts @@ -1 +1,2 @@ export { default as Models } from './Models'; +export { default as ModelDetails } from './ModelDetails' \ No newline at end of file diff --git a/src/tapis-app/MlHub/_Router/Router.tsx b/src/tapis-app/MlHub/_Router/Router.tsx index 368c226d1..bdbdf5d1f 100644 --- a/src/tapis-app/MlHub/_Router/Router.tsx +++ b/src/tapis-app/MlHub/_Router/Router.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Route, useRouteMatch, Switch } from 'react-router-dom'; import { Dashboard } from '../Dashboard'; -import { Models } from '../Models'; +import { Layout as ModelsLayout } from '../Models/_Layout' const Router: React.FC = () => { const { path } = useRouteMatch(); @@ -12,7 +12,7 @@ const Router: React.FC = () => { - + ); From a195141f679f4359f9fcc6cfdb139d6a669c191d Mon Sep 17 00:00:00 2001 From: alex fields Date: Thu, 30 May 2024 14:31:40 -0500 Subject: [PATCH 4/7] fix ModelDetails to reflect ModelFullInfo. fix ModelDetails.Module to add styling. Fix ModelDetails to add buttons. --- .../MlHub/Models/ModelDetails.module.scss | 56 ++++++++ src/tapis-app/MlHub/Models/ModelDetails.tsx | 134 ++++++++++++++---- 2 files changed, 164 insertions(+), 26 deletions(-) diff --git a/src/tapis-app/MlHub/Models/ModelDetails.module.scss b/src/tapis-app/MlHub/Models/ModelDetails.module.scss index e69de29bb..bd7d4d8ad 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.module.scss +++ b/src/tapis-app/MlHub/Models/ModelDetails.module.scss @@ -0,0 +1,56 @@ +// .buttons-container { +// display: flex; +// flex-direction: column; +// width: fit-content; +// gap: 20px; +// text-align: left; +// } + +.buttons-container { + display: flex; + flex-direction: column; + position: absolute; + top: 0px; + right: 0px; + gap: 20px; +} + +.model-details-wrapper { + display: flex; + flex-direction: row; + width: 100%; + position: relative; +} + +.model-details { + margin-left: 10px; + display: flex; + flex-direction: column; + gap: 16px; + flex: 1; +} + +.model-title { + padding-bottom: 8px; + margin-left: 10px; +} + +.model-detail { + display: flex; + flex-direction: row; +} + +.detail-title { + font-weight: bold; + width: 10vw; +} + +.detail-info { + margin-left: 8px; + text-align: left; +} + +.model-title-container { + border-bottom: 1px solid black; + margin-bottom: 8px; +} \ No newline at end of file diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx index 88d868774..cfd217a05 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.tsx +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -2,48 +2,130 @@ import React from 'react'; import { Models } from '@tapis/tapis-typescript'; import { useDetails } from 'tapis-hooks/ml-hub/models'; import { QueryWrapper } from 'tapis-ui/_wrappers'; -import { Table } from 'reactstrap'; +import { Button } from 'reactstrap'; +import styles from './ModelDetails.module.scss'; +import { Icon } from 'tapis-ui/_common'; +import { JSONDisplay } from 'tapis-ui/_common'; +import { json } from '@codemirror/lang-json'; type ModelsProps = { modelId: string } -// type ButtonNames = { -// InferenceServerDetails: String; -// ModelCard: String; -// DownloadModel: String; -// } +type ButtonNames = { + InferenceServerDetails: String; + ModelCard: String; + DownloadModel: String; +} const ModelDetails: React.FC = ({modelId}) => { const { data, isLoading, error } = useDetails({modelId}); - const model: Models.ModelShortInfo = data?.result ?? {}; + const model: Models.ModelFullInfo = data?.result ?? {}; return ( - -
- {modelId} +
+
+ {modelId} +
+
-
- author: {model.author} - downloads: {model.downloads} - created_at: {model.created_at} - last_modified: {model.last_modified} - library_name: {model.library_name} +
+
+
+
+ author: +
+
+ {model.author} +
+
+
+
+ downloads: +
+
+ {model.downloads} +
+
+
+
+ created_at: +
+
+ {model.created_at} +
+
+
+
+ last_modified: +
+
+ {model.last_modified} +
+
+
+
+ sha: +
+
+ {model.sha} +
+
+
+
+ repository_content: +
+
+ +
+
+
+
+ library_name: +
+
+ {model.library_name} +
+
+
+
+ transformers_info: +
+
+ +
+
+
+
+ config: +
+
+ +
+
+
+
-
+ + ) } -// const Buttons: React.FC = ({InferenceServerDetails, ModelCard, DownloadModel}) => { -// return ( -//
-// -// -// -//
-// ); -// } +const Buttons: React.FC = ({InferenceServerDetails, ModelCard, DownloadModel}) => { + return ( +
+ + + +
+ ); + +} export default ModelDetails; \ No newline at end of file From 8e4b55f161aa6d6f1be244e8b04ef33af931e50a Mon Sep 17 00:00:00 2001 From: alex fields Date: Fri, 31 May 2024 13:59:11 -0500 Subject: [PATCH 5/7] Update basePath to original. --- src/tapis-hooks/ml-hub/models/basePath.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tapis-hooks/ml-hub/models/basePath.ts b/src/tapis-hooks/ml-hub/models/basePath.ts index 4dc81d9df..78c52f51a 100644 --- a/src/tapis-hooks/ml-hub/models/basePath.ts +++ b/src/tapis-hooks/ml-hub/models/basePath.ts @@ -1,3 +1,3 @@ -const basePath = 'http://127.0.0.1:5000/'; +const basePath = 'https://hub.pods.tacc.tapis.io'; export default basePath; From 3010335e65bd6f9da76bd9c22b023957c2129c5a Mon Sep 17 00:00:00 2001 From: alex fields Date: Fri, 31 May 2024 14:11:58 -0500 Subject: [PATCH 6/7] Remove json import from ModelDetails. Remove old button-container from ModelDetailsModule. --- src/tapis-app/MlHub/Models/ModelDetails.module.scss | 8 -------- src/tapis-app/MlHub/Models/ModelDetails.tsx | 1 - 2 files changed, 9 deletions(-) diff --git a/src/tapis-app/MlHub/Models/ModelDetails.module.scss b/src/tapis-app/MlHub/Models/ModelDetails.module.scss index bd7d4d8ad..27a851c84 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.module.scss +++ b/src/tapis-app/MlHub/Models/ModelDetails.module.scss @@ -1,11 +1,3 @@ -// .buttons-container { -// display: flex; -// flex-direction: column; -// width: fit-content; -// gap: 20px; -// text-align: left; -// } - .buttons-container { display: flex; flex-direction: column; diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx index cfd217a05..099647769 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.tsx +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -6,7 +6,6 @@ import { Button } from 'reactstrap'; import styles from './ModelDetails.module.scss'; import { Icon } from 'tapis-ui/_common'; import { JSONDisplay } from 'tapis-ui/_common'; -import { json } from '@codemirror/lang-json'; type ModelsProps = { modelId: string From c5f3dc75b31e10d6940b2e039e18933cb77ed71b Mon Sep 17 00:00:00 2001 From: alex fields Date: Fri, 31 May 2024 14:19:38 -0500 Subject: [PATCH 7/7] ran prettier. --- .../MlHub/Models/ModelDetails.module.scss | 52 ++--- src/tapis-app/MlHub/Models/ModelDetails.tsx | 215 +++++++++--------- src/tapis-app/MlHub/Models/_Router/Router.tsx | 27 ++- src/tapis-app/MlHub/Models/index.ts | 2 +- src/tapis-app/MlHub/_Router/Router.tsx | 2 +- 5 files changed, 148 insertions(+), 150 deletions(-) diff --git a/src/tapis-app/MlHub/Models/ModelDetails.module.scss b/src/tapis-app/MlHub/Models/ModelDetails.module.scss index 27a851c84..287b2bbf3 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.module.scss +++ b/src/tapis-app/MlHub/Models/ModelDetails.module.scss @@ -1,48 +1,48 @@ .buttons-container { - display: flex; - flex-direction: column; - position: absolute; - top: 0px; - right: 0px; - gap: 20px; + display: flex; + flex-direction: column; + position: absolute; + top: 0px; + right: 0px; + gap: 20px; } .model-details-wrapper { - display: flex; - flex-direction: row; - width: 100%; - position: relative; + display: flex; + flex-direction: row; + width: 100%; + position: relative; } .model-details { - margin-left: 10px; - display: flex; - flex-direction: column; - gap: 16px; - flex: 1; + margin-left: 10px; + display: flex; + flex-direction: column; + gap: 16px; + flex: 1; } .model-title { - padding-bottom: 8px; - margin-left: 10px; + padding-bottom: 8px; + margin-left: 10px; } .model-detail { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .detail-title { - font-weight: bold; - width: 10vw; + font-weight: bold; + width: 10vw; } .detail-info { - margin-left: 8px; - text-align: left; + margin-left: 8px; + text-align: left; } .model-title-container { - border-bottom: 1px solid black; - margin-bottom: 8px; -} \ No newline at end of file + border-bottom: 1px solid black; + margin-bottom: 8px; +} diff --git a/src/tapis-app/MlHub/Models/ModelDetails.tsx b/src/tapis-app/MlHub/Models/ModelDetails.tsx index 099647769..df1560403 100644 --- a/src/tapis-app/MlHub/Models/ModelDetails.tsx +++ b/src/tapis-app/MlHub/Models/ModelDetails.tsx @@ -8,123 +8,118 @@ import { Icon } from 'tapis-ui/_common'; import { JSONDisplay } from 'tapis-ui/_common'; type ModelsProps = { - modelId: string -} + modelId: string; +}; type ButtonNames = { - InferenceServerDetails: String; - ModelCard: String; - DownloadModel: String; -} - -const ModelDetails: React.FC = ({modelId}) => { - const { data, isLoading, error } = useDetails({modelId}); - const model: Models.ModelFullInfo = data?.result ?? {}; - return ( - -
-
- {modelId} -
- + InferenceServerDetails: String; + ModelCard: String; + DownloadModel: String; +}; +const ModelDetails: React.FC = ({ modelId }) => { + const { data, isLoading, error } = useDetails({ modelId }); + const model: Models.ModelFullInfo = data?.result ?? {}; + return ( + +
+
+ {modelId} +
+
+
+
+
+
author:
+
{model.author}
+
+
+
downloads:
+
{model.downloads}
+
+
+
created_at:
+
{model.created_at}
+
+
+
last_modified:
+
+ {model.last_modified}
-
-
-
-
- author: -
-
- {model.author} -
-
-
-
- downloads: -
-
- {model.downloads} -
-
-
-
- created_at: -
-
- {model.created_at} -
-
-
-
- last_modified: -
-
- {model.last_modified} -
-
-
-
- sha: -
-
- {model.sha} -
-
-
-
- repository_content: -
-
- -
-
-
-
- library_name: -
-
- {model.library_name} -
-
-
-
- transformers_info: -
-
- -
-
-
-
- config: -
-
- -
-
+
+
+
sha:
+
{model.sha}
+
+
+
+ repository_content:
- +
+
+
+
+
library_name:
+
+ {model.library_name} +
+
+
+
+ transformers_info: +
+
+ +
+
+
+
config:
+
+ +
+
+
+ +
+ + ); +}; - - - ) -} - -const Buttons: React.FC = ({InferenceServerDetails, ModelCard, DownloadModel}) => { - return ( +const Buttons: React.FC = ({ + InferenceServerDetails, + ModelCard, + DownloadModel, +}) => { + return (
- - - + + +
- ); - -} + ); +}; -export default ModelDetails; \ No newline at end of file +export default ModelDetails; diff --git a/src/tapis-app/MlHub/Models/_Router/Router.tsx b/src/tapis-app/MlHub/Models/_Router/Router.tsx index fd5c51045..499632d96 100644 --- a/src/tapis-app/MlHub/Models/_Router/Router.tsx +++ b/src/tapis-app/MlHub/Models/_Router/Router.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import { Route, useRouteMatch, Switch, RouteComponentProps } from 'react-router-dom'; -import { Models } from "../../Models" +import { + Route, + useRouteMatch, + Switch, + RouteComponentProps, +} from 'react-router-dom'; +import { Models } from '../../Models'; import ModelDetails from '../ModelDetails'; - const Router: React.FC = () => { const { path } = useRouteMatch(); return ( @@ -14,15 +18,14 @@ const Router: React.FC = () => { - ) => { - return - }} /> + render={({ + match: { + params: { modelId }, + }, + }: RouteComponentProps<{ modelId: string }>) => { + return ; + }} + /> ); }; diff --git a/src/tapis-app/MlHub/Models/index.ts b/src/tapis-app/MlHub/Models/index.ts index 067f2c5a0..c64ac4dd4 100644 --- a/src/tapis-app/MlHub/Models/index.ts +++ b/src/tapis-app/MlHub/Models/index.ts @@ -1,2 +1,2 @@ export { default as Models } from './Models'; -export { default as ModelDetails } from './ModelDetails' \ No newline at end of file +export { default as ModelDetails } from './ModelDetails'; diff --git a/src/tapis-app/MlHub/_Router/Router.tsx b/src/tapis-app/MlHub/_Router/Router.tsx index bdbdf5d1f..b7051ef75 100644 --- a/src/tapis-app/MlHub/_Router/Router.tsx +++ b/src/tapis-app/MlHub/_Router/Router.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Route, useRouteMatch, Switch } from 'react-router-dom'; import { Dashboard } from '../Dashboard'; -import { Layout as ModelsLayout } from '../Models/_Layout' +import { Layout as ModelsLayout } from '../Models/_Layout'; const Router: React.FC = () => { const { path } = useRouteMatch();