compute jobs profile visual fixes

src/components/Profile/History/ComputeJobs/Details.tsx

@@ -42,9 +42,11 @@ function Asset({
 
 function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
   const { appConfig } = useMarketMetadata()
+  const newCancelToken = useCancelToken()
+
   const [algoName, setAlgoName] = useState<string>()
   const [algoDtSymbol, setAlgoDtSymbol] = useState<string>()
-  const newCancelToken = useCancelToken()
+
   useEffect(() => {
     async function getAlgoMetadata() {
       const ddo = await retrieveAsset(job.algoDID, newCancelToken())
@@ -52,7 +54,7 @@ function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
       setAlgoName(ddo?.metadata.name)
     }
     getAlgoMetadata()
-  }, [appConfig.metadataCacheUri, job.algoDID])
+  }, [appConfig.metadataCacheUri, job.algoDID, newCancelToken])
 
   return (
     <>

src/components/Profile/History/ComputeJobs/Results.module.css

@@ -3,8 +3,10 @@
   border-bottom-left-radius: var(--border-radius) !important;
 }
 
-.results li {
-  list-style-type: none;
+.title {
+  font-size: var(--font-size-base);
+  color: var(--font-color-text);
+  margin-bottom: calc(var(--spacer) / 3);
 }
 
 .help {

src/components/Profile/History/ComputeJobs/Results.tsx

@@ -26,31 +26,32 @@ export default function Results({
 
   const [datasetProvider, setDatasetProvider] = useState<string>()
   const newCancelToken = useCancelToken()
+
   useEffect(() => {
     async function getAssetMetadata() {
       const ddo = await retrieveAsset(job.inputDID[0], newCancelToken())
       setDatasetProvider(ddo.services[0].serviceEndpoint)
     }
     getAssetMetadata()
-  }, [job.inputDID[0]])
+  }, [job.inputDID, newCancelToken])
 
   function getDownloadButtonValue(type: ComputeResultType): string {
     let buttonName
     switch (type) {
       case 'output':
-        buttonName = 'Download results'
+        buttonName = 'results'
         break
       case 'algorithmLog':
-        buttonName = 'Download algorithm logs'
+        buttonName = 'algorithm logs'
         break
       case 'configrationLog':
-        buttonName = 'Download configuration logs'
+        buttonName = 'configuration logs'
         break
       case 'publishLog':
-        buttonName = 'Download publish logs'
+        buttonName = 'publish logs'
         break
       default:
-        buttonName = 'Download results'
+        buttonName = 'results'
         break
     }
     return buttonName
@@ -78,6 +79,7 @@ export default function Results({
 
   return (
     <div className={styles.results}>
+      <h4 className={styles.title}>Results</h4>
       {isFinished ? (
         <ul>
           {job.results &&
@@ -86,10 +88,10 @@ export default function Results({
               jobResult.filename ? (
                 <ListItem key={i}>
                   <Button
-                    style="primary"
+                    style="text"
                     size="small"
                     onClick={() => downloadResults(i)}
-                    disabled={isLoading || !isFinished}
+                    download
                   >
                     {getDownloadButtonValue(jobResult.type)}
                   </Button>

src/components/Profile/History/ComputeJobs/index.tsx

@@ -1,8 +1,6 @@
 import React, { ReactElement, useEffect, useState, useCallback } from 'react'
 import Time from '@shared/atoms/Time'
-import Link from 'next/link'
 import { LoggerInstance } from '@oceanprotocol/lib'
-import Dotdotdot from 'react-dotdotdot'
 import Table from '@shared/atoms/Table'
 import Button from '@shared/atoms/Button'
 import { useWeb3 } from '@context/Web3'
@@ -15,6 +13,7 @@ import styles from './index.module.css'
 import { useAsset } from '@context/Asset'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useCancelToken } from '@hooks/useCancelToken'
+import AssetListTitle from '@shared/AssetList/AssetListTitle'
 
 export function Status({ children }: { children: string }): ReactElement {
   return <div className={styles.status}>{children}</div>
@@ -24,13 +23,7 @@ const columns = [
   {
     name: 'Data Set',
     selector: function getAssetRow(row: ComputeJobMetaData) {
-      return (
-        <Dotdotdot clamp={2}>
-          <Link href={`/asset/${row.inputDID[0]}`}>
-            <a>{row.assetName}</a>
-          </Link>
-        </Dotdotdot>
-      )
+      return <AssetListTitle did={row.inputDID[0]} title={row.assetName} />
     }
   },
   {