improve compute layout, add running raw algorithm

package.json

@@ -7,7 +7,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",
-    "web3": "^1.2.5"
+    "web3": "^1.2.5",
+    "prettier": "^1.19.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/Compute.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import * as Assets from './asset'
+import { asset } from './asset'
+import { algoAsset, createComputeService, rawAlgoMeta } from './compute-asset'
 
 export default function Compute({ ocean, web3 }) {
-  const [ddoAsset, setDdoAsset] = useState({ id: '' })
+  const [ddoAssetId, setDdoAssetId] = useState('')
   const [jobStatus, setJobStatus] = useState('')
   const [jobId, setJobId] = useState('')
   const [agreementId, setAgreementId] = useState('')
-  const [ddoAlgorithm, setDdoAlgorithm] = useState({ id: '' })
+  const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
 
   // publish a dataset and an algorithm
   async function publish() {
@@ -14,22 +15,20 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing asset.')
 
-      const service = await Assets.createComputeService(
+      const service = await createComputeService(
         ocean,
         accounts[0],
         '0',
         '2020-03-10T10:00:00Z'
       )
       console.log(service)
-      const ddoAssetNew = await ocean.assets.create(
+      const ddoAssetNew = await ocean.assets.create(asset, accounts[0], [
-        Assets.getAsset(),
+        service
-        accounts[0],
+      ])
-        [service]
-      )
       console.log('Asset successfully submitted.')
       console.log(ddoAssetNew)
       // keep track of this registered asset for consumption later on
-      setDdoAsset(ddoAssetNew)
+      setDdoAssetId(ddoAssetNew.id)
       alert('Asset successfully submitted.')
     } catch (error) {
       console.error(error.message)
@@ -41,33 +40,30 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing algo.')
 
-      const ddoAlgorithmNew = await ocean.assets.create(
+      const ddoAlgorithmNew = await ocean.assets.create(algoAsset, accounts[0])
-        Assets.getAlgoAsset(),
-        accounts[0]
-      )
       console.log(ddoAlgorithmNew)
       console.log('Algo asset successfully submitted.')
       // keep track of this registered asset for consumption later on
-      setDdoAlgorithm(ddoAlgorithmNew)
+      setDdoAlgorithmId(ddoAlgorithmNew.id)
       alert('Algorithm successfully submitted.')
     } catch (error) {
       console.error(error.message)
     }
   }
 
-  // order and start the compute service
+  async function startCompute(algorithmId, algorithmMeta) {
-  async function start() {
     try {
       const accounts = await ocean.accounts.list()
 
       // order the compute service
-      const agreement = await ocean.compute.order(accounts[0], ddoAsset.id)
+      const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
       setAgreementId(agreement)
       // start a compute job
       const status = await ocean.compute.start(
         accounts[0],
         agreement,
-        ddoAlgorithm.id
+        algorithmId,
+        algorithmMeta
       )
       setJobId(status.jobId)
       console.log(status)
@@ -77,6 +73,15 @@ export default function Compute({ ocean, web3 }) {
     }
   }
 
+  // order and start the compute service
+  async function startWithPublishedAlgo() {
+    return startCompute(ddoAlgorithmId)
+  }
+
+  async function startWithRawAlgo() {
+    return startCompute(undefined, rawAlgoMeta)
+  }
+
   async function getStatus() {
     try {
       const accounts = await ocean.accounts.list()
@@ -92,33 +97,60 @@ export default function Compute({ ocean, web3 }) {
 
   // get results
 
+  if (!web3) {
+    return null
+  }
+
   return (
     <>
       <h3>Compute</h3>
-      <button onClick={() => publish()} disabled={!web3}>
+      <ComputeSection>
-        1) Publish dataset with compute service
+        <button onClick={publish}>Publish dataset with compute service</button>
-      </button>
+        Asset DID:
-      <button onClick={() => publishalgo()} disabled={!web3}>
+        <input type="text" value={ddoAssetId} readOnly />
-        2) Publish algorithm
+      </ComputeSection>
-      </button>
+      <ComputeSection>
-      <button onClick={() => start()} disabled={!web3}>
+        <button onClick={publishalgo}>Publish algorithm</button>
-        3)Order and start compute service
+        Algo DID:
-      </button>
+        <input type="text" value={ddoAlgorithmId} readOnly />
-      <button onClick={() => getStatus()} disabled={!web3}>
+      </ComputeSection>
-        4)Get Job Status
+      <ComputeSection>
-      </button>
+        <button
-      <hr />
+          onClick={startWithPublishedAlgo}
-      Asset DID:
+          disabled={!ddoAssetId || !ddoAlgorithmId}
-      <input type="text" value={ddoAsset.id} readOnly />
+        >
-      <hr />
+          Order and start compute service with published algorithm
-      Algo DID:
+        </button>
-      <input type="text" value={ddoAlgorithm.id} readOnly />
+        <button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
-      <hr />
+          Order and start compute service with raw algorithm
-      Job ID:
+        </button>
-      <input type="text" value={jobId} readOnly />
+        Job ID:
-      <hr />
+        <input type="text" value={jobId} readOnly />
-      Compute status:
+      </ComputeSection>
-      <textarea rows="10" cols="180" value={jobStatus} readOnly />
+      <ComputeSection>
+        <button onClick={getStatus} disabled={!jobId}>
+          Get Job Status
+        </button>
+        Compute status:
+        <textarea rows="20" cols="120" value={jobStatus} readOnly />
+      </ComputeSection>
+    </>
+  )
+}
+
+function ComputeSection({ children }) {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center'
+        }}
+      >
+        {children}
+      </div>
+      <hr />
     </>
   )
 }

src/asset.js

@@ -1,120 +1,52 @@
-export function getAsset() {
+export const asset = {
-  const asset = {
+  main: {
-    main: {
+    name: '10 Monkey Species Small',
-      name: '10 Monkey Species Small',
+    dateCreated: '2012-02-01T10:55:11Z',
-      dateCreated: '2012-02-01T10:55:11Z',
+    author: 'Mario',
-      author: 'Mario',
+    type: 'dataset',
-      type: 'dataset',
+    license: 'CC0: Public Domain',
-      license: 'CC0: Public Domain',
+    price: '0',
-      price: '0',
+    files: [
-      files: [
+      {
-        {
+        index: 0,
-          index: 0,
+        contentType: 'application/zip',
-          contentType: 'application/zip',
+        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-          checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
+        checksumType: 'MD5',
-          checksumType: 'MD5',
+        contentLength: '12057507',
-          contentLength: '12057507',
+        compression: 'zip',
-          compression: 'zip',
+        encoding: 'UTF-8',
-          encoding: 'UTF-8',
+        url:
-          url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-        },
-        {
-          index: 1,
-          contentType: 'text/txt',
-          checksum: '354d19c0733c47ef3a6cce5b633116b0',
-          checksumType: 'MD5',
-          contentLength: '928',
-          url:
-            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-        }
-      ]
-    },
-    additionalInformation: {
-      categories: ['Biology'],
-      tags: ['image data', 'classification', 'animals'],
-      description: 'EXAMPLE ONLY ',
-      copyrightHolder: 'Unknown',
-      workExample: 'image path, id, label',
-      links: [
-        {
-          name: 'example model',
-          url:
-            'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-        },
-        {
-          name: 'example code',
-          type: 'example code',
-          url:
-            'https://github.com/slothkong/CNN_classification_10_monkey_species'
-        }
-      ],
-      inLanguage: 'en'
-    }
-  }
-  return asset
-}
-
-export function getAlgoAsset() {
-  const algoasset = {
-    main: {
-      name: 'My great algo',
-      dateCreated: '2012-02-01T10:55:11Z',
-      author: 'Alex',
-      type: 'algorithm',
-      algorithm: {
-        format: 'docker-image',
-        version: '0.1',
-        container: {
-          entrypoint: 'node $ALGO',
-          image: 'node',
-          tag: '10'
-        }
       },
-      license: 'CC0: Public Domain',
+      {
-      price: '0',
+        index: 1,
-      files: [
+        contentType: 'text/txt',
-        {
+        checksum: '354d19c0733c47ef3a6cce5b633116b0',
-          index: 0,
+        checksumType: 'MD5',
-          contentType: 'application/text',
+        contentLength: '928',
-          contentLength: '12057507',
+        url:
-          compression: 'zip',
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-          encoding: 'UTF-8',
+      }
-          url:
+    ]
-            'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
+  },
-        }
+  additionalInformation: {
-      ]
+    categories: ['Biology'],
-    },
+    tags: ['image data', 'classification', 'animals'],
-    additionalInformation: {
+    description: 'EXAMPLE ONLY ',
-      description: 'My super algo '
+    copyrightHolder: 'Unknown',
-    }
+    workExample: 'image path, id, label',
-  }
+    links: [
-  return algoasset
+      {
-}
+        name: 'example model',
-
+        url:
-export async function createComputeService(
+          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-  ocean,
-  publisher,
-  price,
-  datePublished
-) {
-  const { templates } = ocean.keeper
-  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
-  const name = 'dataAssetComputingServiceAgreement'
-  const service = {
-    type: 'compute',
-    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
-    templateId: templates.escrowComputeExecutionTemplate.getId(),
-    attributes: {
-      main: {
-        creator: publisher.getId(),
-        datePublished,
-        price,
-        timeout: 3600,
-        name
       },
-      serviceAgreementTemplate
+      {
-    }
+        name: 'example code',
+        type: 'example code',
+        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
+      }
+    ],
+    inLanguage: 'en'
   }
-  return service
 }

src/compute-asset.js

@@ -0,0 +1,70 @@
+export const algoAsset = {
+  main: {
+    name: 'My great algo',
+    dateCreated: '2012-02-01T10:55:11Z',
+    author: 'Alex',
+    type: 'algorithm',
+    algorithm: {
+      format: 'docker-image',
+      version: '0.1',
+      container: {
+        entrypoint: 'node $ALGO',
+        image: 'node',
+        tag: '10'
+      }
+    },
+    license: 'CC0: Public Domain',
+    price: '0',
+    files: [
+      {
+        index: 0,
+        contentType: 'application/text',
+        contentLength: '12057507',
+        compression: 'zip',
+        encoding: 'UTF-8',
+        url:
+          'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
+      }
+    ]
+  },
+  additionalInformation: {
+    description: 'My super algo'
+  }
+}
+
+export const rawAlgoMeta = {
+  rawcode: `console.log('Hello world'!)`,
+  format: 'docker-image',
+  version: '0.1',
+  container: {
+    entrypoint: 'node $ALGO',
+    image: 'node',
+    tag: '10'
+  }
+}
+
+export async function createComputeService(
+  ocean,
+  publisher,
+  price,
+  datePublished
+) {
+  const { templates } = ocean.keeper
+  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
+  const name = 'dataAssetComputingServiceAgreement'
+  return {
+    type: 'compute',
+    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
+    templateId: templates.escrowComputeExecutionTemplate.getId(),
+    attributes: {
+      main: {
+        creator: publisher.getId(),
+        datePublished,
+        price,
+        timeout: 3600,
+        name
+      },
+      serviceAgreementTemplate
+    }
+  }
+}

src/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
-import * as Assets from './asset'
+import { asset } from './asset'
 import Compute from './Compute'
 
 let web3
@@ -42,10 +42,7 @@ class App extends Component {
   async registerAsset() {
     try {
       const accounts = await this.state.ocean.accounts.list()
-      const ddo = await this.state.ocean.assets.create(
+      const ddo = await this.state.ocean.assets.create(asset, accounts[0])
-        Assets.getAsset(),
-        accounts[0]
-      )
       console.log('Asset successfully submitted.')
       console.log(ddo)
       // keep track of this registered asset for consumption later on