Task/t UI 375 single model page model card functionality (#379)

* generate modal, update basePath, remember reset basePath

* fix line 16-19, 36-39 of JSONdisplay to return null values.

* fix modelCardDetails naming, remove Buttons Divs

* fix ModelDetails

* fix basePath

* run prettier, run lint

package.json

@@ -22,6 +22,7 @@
     "js-cookie": "^3.0.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.4.7",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.2",

src/tapis-app/MlHub/Models/ModelDetails.tsx

@@ -1,23 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Models } from '@tapis/tapis-typescript';
 import { useDetails } from 'tapis-hooks/ml-hub/models';
 import { QueryWrapper } from 'tapis-ui/_wrappers';
 import { Button } from 'reactstrap';
 import styles from './ModelDetails.module.scss';
 import { Icon } from 'tapis-ui/_common';
 import { JSONDisplay } from 'tapis-ui/_common';
+import GenericModal from 'tapis-ui/_common/GenericModal/GenericModal';
 
-type ModelsProps = {
+type ModelDetailsProps = {
   modelId: string;
 };
 
-type ButtonNames = {
-  InferenceServerDetails: String;
-  ModelCard: String;
-  DownloadModel: String;
-};
-
-const ModelDetails: React.FC<ModelsProps> = ({ modelId }) => {
+const ModelDetails: React.FC<ModelDetailsProps> = ({ modelId }) => {
   const { data, isLoading, error } = useDetails({ modelId });
   const model: Models.ModelFullInfo = data?.result ?? {};
   return (
@@ -80,44 +75,82 @@ const ModelDetails: React.FC<ModelsProps> = ({ modelId }) => {
             </div>
           </div>
         </div>
-        <Buttons
-          InferenceServerDetails="Inference Server Info"
-          DownloadModel="Download Model"
-          ModelCard="Model Card"
-        />
+        <Buttons modelId={modelId} />
       </div>
     </QueryWrapper>
   );
 };
 
-const Buttons: React.FC<ButtonNames> = ({
-  InferenceServerDetails,
-  ModelCard,
-  DownloadModel,
-}) => {
+const Buttons: React.FC<{ modelId: string }> = ({ modelId }) => {
+  const [currentModal, setCurrentModal] = useState<string | undefined>(
+    undefined
+  );
+  const { data } = useDetails({ modelId });
+  const modelCardDetails: Models.ModelFullInfo = data?.result ?? {};
   return (
     <div className={`${styles['buttons-container']}`}>
-      <Button>
-        {InferenceServerDetails}{' '}
+      <Button
+        onClick={() => {
+          setCurrentModal('inferenceinfo');
+        }}
+      >
+        {'Inference Service Info'}
         <span>
-          {' '}
-          <Icon name="push-right" />{' '}
+          <Icon name="push-right" />
         </span>
       </Button>
-      <Button>
-        {DownloadModel}{' '}
+      <Button
+        onClick={() => {
+          setCurrentModal('downloadmodel');
+        }}
+      >
+        {'Download Model'}
         <span>
-          {' '}
-          <Icon name="push-right" />{' '}
-        </span>{' '}
+          <Icon name="push-right" />
+        </span>
       </Button>
-      <Button>
-        {ModelCard}{' '}
+      <Button
+        onClick={() => {
+          setCurrentModal('modelcard');
+        }}
+      >
+        {'Model Card'}
         <span>
-          {' '}
-          <Icon name="push-right" />{' '}
-        </span>{' '}
+          <Icon name="push-right" />
+        </span>
       </Button>
+      {currentModal === 'modelcard' && (
+        <GenericModal
+          toggle={() => {
+            setCurrentModal(undefined);
+          }}
+          title="Model Card"
+          body={
+            <div>
+              {modelId}
+              <JSONDisplay json={modelCardDetails.card_data}> </JSONDisplay>
+            </div>
+          }
+        />
+      )}
+      {currentModal === 'inferenceinfo' && (
+        <GenericModal
+          toggle={() => {
+            setCurrentModal(undefined);
+          }}
+          title="Inference Info"
+          body={<div>INFERENCE INFO</div>}
+        />
+      )}
+      {currentModal === 'downloadmodel' && (
+        <GenericModal
+          toggle={() => {
+            setCurrentModal(undefined);
+          }}
+          title="Download Model"
+          body={<div>"DOWNLOAD ME"</div>}
+        />
+      )}
     </div>
   );
 };

src/tapis-ui/_common/JSONDisplay/JSONDisplay.tsx

@@ -14,7 +14,7 @@ const simplifyObject = (obj: any) => {
       }
       return;
     }
-    if (typeof value === 'object') {
+    if (typeof value === 'object' && value !== null) {
       const simplifiedValue = simplifyObject(value);
       if (Object.entries(simplifiedValue).length === 0) {
         delete result[key];
@@ -34,13 +34,16 @@ const convertSets = (obj: any): any => {
   if (obj === undefined) {
     return undefined;
   }
+  if (obj === null) {
+    return null;
+  }
   if (Array.isArray(obj)) {
     return (obj as Array<any>).map((value) => convertSets(value));
   }
   if (obj instanceof Set) {
     return Array.from(obj).map((value) => convertSets(value));
   }
-  if (typeof obj === 'object') {
+  if (typeof obj === 'object' && obj !== null) {
     const result: any = {};
     Object.entries(obj).forEach(([key, value]) => {
       result[key] = convertSets(value);