Consortial-State

angular.json

@@ -39,7 +39,6 @@
               "theme.scss"
             ],
             "scripts": [
-              "node_modules/chart.js/dist/Chart.js",
               "node_modules/hammerjs/hammer.min.js"
             ]
           },
@@ -136,9 +135,10 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "qc-atlas-ui",
   "cli": {
     "analytics": false
   }
-}
+}

package.json

@@ -34,6 +34,7 @@
     "@angular/router": "~9.1.10",
     "@fortawesome/fontawesome-free": "^5.13.1",
     "@swimlane/ngx-graph": "^7.1.2",
+    "@types/chart.js": "^2.9.40",
     "angular-bootstrap-md": "^9.3.1",
     "animate.css": "^4.1.0",
     "chart.js": "^4.4.0",
@@ -83,4 +84,4 @@
     "tslint-plugin-prettier": "^2.3.0",
     "typescript": "~3.8.3"
   }
-}
+}

src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.html

@@ -48,7 +48,11 @@
       </mat-tab>
 
       <mat-tab label="Get Results">
-        <button id="Results" color="primary" (click)="getResults()">Get Results</button>
+        <!-- <button id="Results" color="primary" (click)="getResults()">Get Results</button> -->
+        <form (ngSubmit)="getResults(jobID)">
+          <input [(ngModel)]="jobID" name="jobID" placeholder=5 />
+          <button mat-flat-button color="primary" type="submit">Get Results</button>
+        </form>
         <!-- <app-histogram-plot [counts]="{'0': 2007, '11': 1993}"></app-histogram-plot> -->
         <div class="response-frame">
           <div *ngIf="result">

src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.ts

@@ -2,9 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UtilService } from '../../../util/util.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import * as Chart from 'chart.js';
-
-import { OnDemandComponent } from '../../on-demand-execution/ondemand.component';
 
 @Component({
   selector: 'qunicorn-service',
@@ -18,6 +15,7 @@ export class QunicornAppComponent implements OnInit {
 
   userInput: string = '';
   deploymentID: number = 3;
+  jobID: number = 3;
 
   constructor(
     private router: Router,
@@ -55,11 +53,17 @@ export class QunicornAppComponent implements OnInit {
       .set('accept', 'application/json')
       .set('Content-Type', 'application/json');
 
+    if (this.userInput = '') {
+      this.userInput = 'OPENQASM 2.0;\ninclude \"qelib1.inc\";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1];\nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n';
+    }
+
+    console.log(this.userInput);
+
     const requestBody = {
       programs: [
         {
-          // quantumCircuit: "OPENQASM 2.0;\ninclude \"qelib1.inc\";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1];\nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n (Note: if you have qrisp/qiskit as your assembler language add 'circuit =' to the beginning of your quantumCircuit string)",
-          quantumCircuit: this.userInput,
+          quantumCircuit: "OPENQASM 2.0;\ninclude \"qelib1.inc\";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1];\nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n",
+          //quantumCircuit: this.userInput,
           assemblerLanguage: "QASM2"
         }
       ],
@@ -96,7 +100,7 @@ export class QunicornAppComponent implements OnInit {
       // parameters: [0],
       token: "",
       type: "RUNNER",
-      deploymentId: 3,
+      deploymentId: this.deploymentID,
     };
 
     this.http.post('http://localhost:5005/jobs/', requestBody, { headers: headers })
@@ -107,8 +111,11 @@ export class QunicornAppComponent implements OnInit {
       });
   }
 
-  getResults() {
-    this.http.get('http://localhost:5005/jobs/3/', { headers: { accept: 'application/json' } })
+  getResults(jobID: number) {
+
+    const url = `http://localhost:5005/jobs/${jobID}/`;
+
+    this.http.get(url, { headers: { accept: 'application/json' } })
       .subscribe(
         (data: any) => {
           this.result = data;

src/app/components/qunicorn-service/qunicorn.apps.module.ts

@@ -28,14 +28,11 @@ import { QcAtlasUiFeatureToggleModule } from '../../directives/feature-toggle.mo
 import { AlgorithmModule } from '../algorithms/algorithm.module';
 import { NisqAnalyzerModule } from '../algorithms/nisq-analyzer/nisq-analyzer.module';
 import { QunicornAppComponent } from './qunicorn-view/qunicorn-service.component';
-import { OnDemandComponent } from '../on-demand-execution/ondemand.component';
-import { HistogramPlotComponent } from './histogram-plot/histogram-plot.component';
-
+
 
 @NgModule({
     declarations: [
         QunicornAppComponent,
-        HistogramPlotComponent,
     ],
     imports: [
         MatTabsModule,
@@ -68,6 +65,6 @@ import { HistogramPlotComponent } from './histogram-plot/histogram-plot.componen
         NisqAnalyzerModule,
         MatProgressBarModule,
     ],
-    exports: [QunicornAppComponent,HistogramPlotComponent],
+    exports: [QunicornAppComponent],
 })
 export class QunicornAppModule { }