From 4e9378ce9383a46e47beb189893a54d0ddcc1f90 Mon Sep 17 00:00:00 2001
From: Rahil Ashtari Mahini
 <ramahini@wireless-10-150-221-186.public.utexas.edu>
Date: Mon, 29 Jul 2024 14:21:41 -0500
Subject: [PATCH] Update the DatasetDetails to show the tags, Update
 InferenceServerInfo to show the inferenc_server_possibel, Add the
 InferenceServerInfo.module.sccs

---
 src/app/MlHub/Datasets/DatasetDetails.tsx     |  4 +-
 .../Models/InferenceServerInfo.module.scss    | 63 +++++++++++++++++++
 src/app/MlHub/Models/InferenceServerInfo.tsx  |  6 +-
 3 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 src/app/MlHub/Models/InferenceServerInfo.module.scss

diff --git a/src/app/MlHub/Datasets/DatasetDetails.tsx b/src/app/MlHub/Datasets/DatasetDetails.tsx
index 186eb303..f15982ec 100644
--- a/src/app/MlHub/Datasets/DatasetDetails.tsx
+++ b/src/app/MlHub/Datasets/DatasetDetails.tsx
@@ -44,7 +44,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({ datasetId }) => {
             </div>
           )}
 
-          {dataset.last_modified && (
+          {dataset.created_at && (
             <div className={`${styles['dataset-detail']}`}>
               <div className={`${styles['dataset-title']}`}>created_at:</div>
               <div className={`${styles['detail-info']}`}>
@@ -64,7 +64,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({ datasetId }) => {
 
           {dataset.tags && (
             <div className={`${styles['dataset-detail']}`}>
-              <div className={`${styles['dataset-title']}`}>last_modified:</div>
+              <div className={`${styles['dataset-title']}`}>tags:</div>
               <div className={`${styles['detail-info']}`}>{dataset.tags}</div>
             </div>
           )}
diff --git a/src/app/MlHub/Models/InferenceServerInfo.module.scss b/src/app/MlHub/Models/InferenceServerInfo.module.scss
new file mode 100644
index 00000000..f36037c5
--- /dev/null
+++ b/src/app/MlHub/Models/InferenceServerInfo.module.scss
@@ -0,0 +1,63 @@
+.model-details {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.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 {
+  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: 15vw;
+}
+
+.detail-info {
+  margin-left: 8px;
+  text-align: left;
+}
+
+.model-title-container {
+  border-bottom: 1px solid black;
+  margin-bottom: 8px;
+}
+
+.download-links {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 5px;
+}
+
+.download-url-button {
+  height: 40px;
+}
diff --git a/src/app/MlHub/Models/InferenceServerInfo.tsx b/src/app/MlHub/Models/InferenceServerInfo.tsx
index 777bc683..4968efde 100644
--- a/src/app/MlHub/Models/InferenceServerInfo.tsx
+++ b/src/app/MlHub/Models/InferenceServerInfo.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { MLHub as Hooks } from '@tapis/tapisui-hooks';
 import { JSONDisplay } from '@tapis/tapisui-common';
-import styles from './ModelDetails.module.scss';
 import { QueryWrapper } from '@tapis/tapisui-common';
 import { Link, useRouteMatch } from 'react-router-dom';
+import styles from './InferenceServerInfo.module.scss';
 
 type InferenceServerInfoProps = {
   modelId: string;
@@ -87,7 +87,9 @@ const InferenceServerInfo: React.FC<InferenceServerInfoProps> = ({
                       inference_server_possible:
                     </div>
                     <div className={`${styles['detail-info']}`}>
-                      {String(serverInfo.result?.inference_server_possible)}
+                      {!!serverInfo.result?.inference_server_possible === false
+                        ? 'false'
+                        : 'true'}
                     </div>
                   </div>
                 </>