Merge pull request #8 from oceanprotocol/feature/compute

Compute component example

package.json

@@ -3,11 +3,12 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^1.2.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.0",
-    "web3": "^1.2.5"
+    "@oceanprotocol/squid": "^2.0.0",
+    "prettier": "^2.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "web3": "^1.2.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/Compute.js

@@ -0,0 +1,255 @@
+import React, { useState } from 'react'
+
+import asset from './asset'
+import { assetAlgo, rawAlgoMeta } from './asset-compute'
+
+export default function Compute({ ocean, web3 }) {
+  const [ddoAssetId, setDdoAssetId] = useState('')
+  const [jobStatus, setJobStatus] = useState('')
+  const [jobId, setJobId] = useState('')
+  const [agreementId, setAgreementId] = useState('')
+  const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
+  const [isAlgoInputVisible, setIsAlgoInputVisible] = useState('')
+  const [textRawAlgo, setTextRawAlgo] = useState('')
+  const [publishLogState, setPublishLogState] = useState(false)
+  const [publishOutputState, setPublishOutputState] = useState(false)
+
+  // publish a dataset and an algorithm
+  async function publish() {
+    try {
+      const accounts = await ocean.accounts.list()
+      console.log('Publishing asset.')
+
+      const service = await ocean.compute.createComputeServiceAttributes(
+        accounts[0],
+        '0',
+        '2020-03-10T10:00:00Z'
+      )
+      console.log(service)
+      const ddoAssetNew = await ocean.assets.create(asset, accounts[0], [
+        service
+      ])
+      console.log('Asset successfully submitted.')
+      console.log(ddoAssetNew)
+      // keep track of this registered asset for consumption later on
+      setDdoAssetId(ddoAssetNew.id)
+      alert('Asset successfully submitted.')
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  async function publishalgo() {
+    try {
+      const accounts = await ocean.accounts.list()
+      console.log('Publishing algo.')
+
+      const ddoAlgorithmNew = await ocean.assets.create(assetAlgo, accounts[0])
+      console.log(ddoAlgorithmNew)
+      console.log('Algo asset successfully submitted.')
+      // keep track of this registered asset for consumption later on
+      setDdoAlgorithmId(ddoAlgorithmNew.id)
+      alert('Algorithm successfully submitted.')
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  async function startCompute(algorithmId, algorithmMeta) {
+    try {
+      const accounts = await ocean.accounts.list()
+      const computeOutput = {
+        publishAlgorithmLog: publishLogState,
+        publishOutput: publishOutputState,
+        brizoAddress: ocean.config.brizoAddress,
+        brizoUri: ocean.config.brizoUri,
+        metadataUri: ocean.config.aquariusUri,
+        nodeUri: ocean.config.nodeUri,
+        owner: accounts[0].getId(),
+        secretStoreUri: ocean.config.secretStoreUri
+      }
+      console.log(computeOutput)
+      // order the compute service
+      const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
+      setAgreementId(agreement)
+      // start a compute job
+      const status = await ocean.compute.start(
+        accounts[0],
+        agreement,
+        algorithmId,
+        algorithmMeta,
+        computeOutput
+      )
+      setJobId(status.jobId)
+      console.log(status)
+      alert('Compute job created. You can query for its status now.')
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  // order and start the compute service with an algorithm published as an asset
+  async function startWithPublishedAlgo() {
+    return startCompute(ddoAlgorithmId)
+  }
+
+  // order and start the compute service with a passed raw algorithm
+  async function startWithRawAlgo() {
+    rawAlgoMeta.rawcode = textRawAlgo
+    return startCompute(undefined, rawAlgoMeta)
+  }
+
+  async function getStatus() {
+    try {
+      const accounts = await ocean.accounts.list()
+
+      const status = await ocean.compute.status(accounts[0], agreementId, jobId)
+      setJobStatus(JSON.stringify(status, null, '\t'))
+      console.log(status)
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  async function showDivAlgo() {
+    setIsAlgoInputVisible(isAlgoInputVisible ? false : true)
+  }
+
+  async function updateRawAlgoCode(event) {
+    setTextRawAlgo(event.target.value)
+  }
+
+  async function updateDdoAssetId(event) {
+    setDdoAssetId(event.target.value)
+  }
+
+  async function handlePublishOutputState(event) {
+    setPublishOutputState(event.target.checked)
+  }
+
+  async function handlePublishLogState(event) {
+    setPublishLogState(event.target.checked)
+  }
+
+  if (!web3) {
+    return null
+  }
+
+  return (
+    <>
+      <h2>Compute</h2>
+      <ComputeSection>
+        <h3>1. Publish Dataset</h3>
+        <button onClick={publish}>Publish dataset with compute service</button>
+
+        <p>
+          <Label htmlFor="ddoAssetId">Asset DID</Label>
+          <code id="ddoAssetId">{ddoAssetId}</code>
+        </p>
+      </ComputeSection>
+
+      <ComputeSection>
+        <h3>2. Publish Algorithm</h3>
+        <button onClick={publishalgo}>Publish algorithm</button>
+        <p>
+          <Label htmlFor="ddoAlgorithmId">Algorithm DID</Label>
+          <code id="ddoAlgorithmId">{ddoAlgorithmId}</code>
+        </p>
+      </ComputeSection>
+
+      <ComputeSection>
+        <h3>3. Start Compute Job</h3>
+
+        <p>
+          <Label htmlFor="publishOutputState">
+            <input
+              type="checkbox"
+              id="publishOutputState"
+              checked={publishOutputState}
+              onChange={handlePublishOutputState}
+            />
+            Publish Output into the Marketplace
+          </Label>
+          <Label htmlFor="publishLogState">
+            <input
+              type="checkbox"
+              id="publishLogState"
+              checked={publishLogState}
+              onChange={handlePublishLogState}
+            />
+            Publish Algorithm Logs into the Marketplace
+          </Label>
+        </p>
+
+        <div>
+          <button onClick={showDivAlgo}>Show/Hide Raw Algorithm</button>
+          <p style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
+            <Label htmlFor="jobStatus">Raw Algorithm</Label>
+            <textarea
+              style={{ width: '100%' }}
+              rows="10"
+              value={textRawAlgo}
+              onChange={updateRawAlgoCode}
+            />
+          </p>
+        </div>
+
+        <p>
+          <Label htmlFor="jobId">Compute Job ID</Label>
+          <code>{jobId}</code>
+        </p>
+
+        <button
+          onClick={startWithPublishedAlgo}
+          disabled={!ddoAssetId || !ddoAlgorithmId}
+        >
+          Order and start compute service with published algorithm
+        </button>
+        <button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
+          Order and start compute service with raw algorithm
+        </button>
+      </ComputeSection>
+
+      <ComputeSection>
+        <h3>4. Get Compute Job Status</h3>
+
+        <pre
+          id="jobStatus"
+          style={{ padding: '1rem', background: 'ghostwhite' }}
+        >
+          <code>{jobStatus}</code>
+        </pre>
+
+        <button onClick={getStatus} disabled={!jobId}>
+          Get Job Status
+        </button>
+      </ComputeSection>
+    </>
+  )
+}
+
+function ComputeSection({ children }) {
+  return (
+    <>
+      <div
+        style={{
+          textAlign: 'left',
+          paddingBottom: '1rem',
+          maxWidth: '40rem',
+          margin: '1rem auto'
+        }}
+      >
+        {children}
+      </div>
+      <hr />
+    </>
+  )
+}
+
+function Label({ children, ...props }) {
+  return (
+    <label style={{ display: 'block', fontSize: '0.8rem' }} {...props}>
+      {children}
+    </label>
+  )
+}

src/asset-compute.js

@@ -0,0 +1,44 @@
+export const assetAlgo = {
+  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'
+  }
+}

src/asset.js

@@ -45,18 +45,6 @@ const asset = {
         name: 'example code',
         type: 'example code',
         url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
-        name: 'n5151.jpg',
-        type: 'discovery'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
-        name: 'sample.zip',
-        type: 'sample'
       }
     ],
     inLanguage: 'en'

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 import asset from './asset'
+import Compute from './Compute'
 
 let web3
 
@@ -27,11 +28,11 @@ class App extends Component {
       brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
       secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
       // local Spree connection
-      // nodeUri: 'http://localhost:8545',
-      // aquariusUri: 'http://aquarius:5000',
-      // brizoUri: 'http://localhost:8030',
-      // brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
-      // secretStoreUri: 'http://localhost:12001',
+      //nodeUri: 'http://localhost:8545',
+      //aquariusUri: 'http://aquarius:5000',
+      //brizoUri: 'http://localhost:8030',
+      //brizoAddress: '0x068Ed00cF0441e4829D9784fCBe7b9e26D4BD8d0',
+      //secretStoreUri: 'http://localhost:12001',
       verbose: true
     })
     this.setState({ ocean })
@@ -75,19 +76,15 @@ class App extends Component {
       const accounts = await this.state.ocean.accounts.list()
       // get our registered asset
       const consumeAsset = this.state.ddo
-      // get service we want to execute
-      const service = consumeAsset.findServiceByType('access')
       // order service agreement
       const agreement = await this.state.ocean.assets.order(
         consumeAsset.id,
-        service.index,
         accounts[0]
       )
       // consume it
       await this.state.ocean.assets.consume(
         agreement,
         consumeAsset.id,
-        service.index,
         accounts[0],
         '',
         0
@@ -119,6 +116,8 @@ class App extends Component {
         <button onClick={() => this.consumeAsset()} disabled={!web3}>
           Consume asset
         </button>
+        <hr />
+        <Compute ocean={this.state.ocean} web3={web3} />
       </div>
     )
   }