Resource estimator visualization (#480)

Resource Estimator Visualization Library

Co-authored-by: Katy McClintic <kamcclin@microsoft.com>
Co-authored-by: Katy McClintic <8239561+katymccl@users.noreply.github.com>

.gitignore

@@ -392,7 +392,6 @@ htmlcov/
 
 # Other
 *.ini
-*.json
 dist/
 temp/
 .[v]env/

visualization/.gitignore

@@ -0,0 +1,8 @@
+# Node Modules
+react-lib/node_modules/
+
+# Test Coverage
+coverage/
+
+# Test Results
+TestResults/

visualization/README.md

@@ -0,0 +1,17 @@
+# Visualization
+
+This folder includes the visualization project.
+
+- react-lib: source code for the visualization components and D3 integration.
+- js-lib: wrapper JavaScript library which packages the visualization components into a consumable JavaScript package by clients.
+
+Refer to **build** folder to build and package the js-lib and react-lib.
+
+For react-build project:
+
+```
+- npm run build // builds react-lib
+- npm run tests //runs all tests and code coverage
+- npm run testsonly //excludes code coverage
+- npm run updatetests //updates test snapshots and runs tests with no coverage
+```

visualization/build/Readme.md

@@ -0,0 +1,14 @@
+# Visualization Library Build Process
+
+## Local Dev
+
+Run `build-all-local.sh` script from the build folder.
+
+## ADO pipeline flow for CI/CD
+
+> [_microsoft.visualization_](https://ms-quantum.visualstudio.com/Quantum%20Program/_build?definitionId=789&_a=summary)
+
+The build pipeline is composed of:
+
+- `visualization-lib.yml`
+- `build-jslib.sh`

visualization/build/build-all-local.sh

@@ -0,0 +1,59 @@
+#!/bin/bash
+# Use flag buildJsLibOnly to only build js-lib
+
+if [ "$1" == "buildJsLibOnly" ]; then
+  cd ../js-lib
+  npm link react quantum-visualization
+  if [ $? -eq 0 ]; then
+    echo 'Successfully linked react and quantum-visualization'
+  fi
+
+  npm run lint
+
+  npm run sortpackagejson || true
+
+  npm run build
+  if [ $? -eq 0 ]; then
+    echo 'Successfully built js-lib'
+    exit 0
+  fi
+
+else
+
+  cd ../react-lib
+  npm install
+  if [ $? -eq 0 ]; then
+    echo 'Successfully installed react-lib'
+  fi
+
+  npm run sortpackagejson || true
+
+  npm run build
+  if [ $? -eq 0 ]; then
+    echo 'Successfully built react-lib'
+  fi
+  npm link
+  if [ $? -eq 0 ]; then
+    echo 'Successfully created link" react-lib'
+  fi
+  cd node_modules/react
+  npm link
+  if [ $? -eq 0 ]; then
+    echo 'Successfully created link: node_modules/react'
+  fi
+  cd ../../../js-lib
+  npm link react quantum-visualization
+  if [ $? -eq 0 ]; then
+    echo 'Successfully linked react and quantum-visualization to js-lib.'
+  fi
+
+  npm run sortpackagejson || true
+
+  npm run build
+  if [ $? -eq 0 ]; then
+    echo 'Successfully built js-lib'
+  fi
+  echo 'Successfully built js-lib and dependencies.'
+  echo 'js-lib located in dist/index.js.'
+  exit 0
+fi

visualization/build/build-jslib.sh

@@ -0,0 +1,63 @@
+#!/bin/bash 
+# assume working directory to be "visualization/build"
+
+cd ../react-lib
+npm install
+if [ $? -ne 0 ]; then
+  echo 'Failed to install: react-lib'
+  exit 1 
+else
+  echo 'Successfully install: react-lib'
+fi
+
+npm run lint 
+
+npm run sortpackagejson || true
+
+npm run build:prod
+if [ $? -ne 0 ]; then
+  echo 'Failed to build: react-lib'
+  exit 1
+else 
+  echo 'Successfully build: react-lib'
+fi
+
+npm link
+if [ $? -ne 0 ]; then
+  echo 'Failed to create link: react-lib'
+  exit 1
+else
+  echo 'Successfully created link: react-lib'
+fi
+
+cd node_modules/react
+npm link
+if [ $? -ne 0 ]; then
+  echo 'Failed to create link: node_modules/react'
+  exit 1
+else
+  echo 'Successfully created link: node_modules/react'
+fi
+
+cd ../../../js-lib
+npm link react quantum-visualization
+if [ $? -ne 0 ]; then
+  echo 'Failed to link react and quantum-visualization to js-lib.'
+  exit 1
+else
+  echo 'Successfully linked react and quantum-visualization to js-lib'
+fi
+
+npm run sortpackagejson || true
+
+npm run build:prod
+if [ $? -ne 0 ]; then
+  echo 'Failed to build js-lib'
+  exit 1
+else
+  echo 'Successfully built js-lib'
+fi
+
+echo 'Successfully built js-lib and dependencies.' 
+echo 'js-lib to be published to microsoft-visualization/index.js artifact.'
+exit 0

visualization/build/visualization-lib-pr.yml

@@ -0,0 +1,89 @@
+# Builds react-lib, js-lib and links the packages.
+resources:
+  - repo: self
+    clean: true
+
+# Trigger whenever a PR is submitted
+pr:
+  branches:
+    include:
+      - main
+  paths:
+    include:
+      - visualization
+
+variables:
+  rootDirectory: visualization
+  project: $(rootDirectory)/react-lib
+  jslib: $(rootDirectory)/js-lib
+  reactnodemodules: node_modules/react
+  projectname: quantum-visualization
+  outputDirectory: $(Agent.BuildDirectory)/output
+  tests: $(project)/TestResults
+
+stages:
+  - stage: Build_Visualization_Library
+    pool:
+      vmImage: "windows-latest"
+    jobs:
+      - job: Build_Test_Link_Publish
+        steps:
+          - task: UseDotNet@2
+            inputs:
+              version: "3.1.x"
+
+          - task: NodeTool@0
+            inputs:
+              versionSpec: "16.x"
+
+          - task: Bash@3
+            displayName: "Build js-lib and dependencies"
+            inputs:
+              targetType: "filePath"
+              filePath: "$(rootDirectory)/build/build-jslib.sh"
+              failOnStderr: true
+              workingDirectory: "$(rootDirectory)/build/"
+
+          # - task: SFP.build-tasks.custom-build-task-1.EsrpCodeSigning@1
+          #   displayName: 'Signing'
+          #   inputs:
+          #     ConnectedServiceName: CodeSign
+          #     FolderPath: "$(jslib)/dist/"
+          #     Pattern: "*.js"
+          #     CertificateId: 100040160
+          #     OpusName: "Microsoft Quantum Development Kit"
+          #     OpusInfo: "https://www.microsoft.com/quantum"
+          #     SessionTimeout: 120
+
+          - task: CopyFiles@2
+            inputs:
+              SourceFolder: "$(jslib)/dist/"
+              Contents: "**"
+              TargetFolder: "$(outputDirectory)"
+            displayName: "Copy build artifacts to output directory"
+
+          - task: Npm@1
+            displayName: npm run tests (react-lib)
+            inputs:
+              workingDir: "$(project)"
+              command: "custom"
+              customCommand: "run testsonly"
+
+          - task: PublishTestResults@2
+            displayName: "Publish Test Results (react-lib)"
+            condition: succeededOrFailed()
+            inputs:
+              testResultsFiles: "$(tests)/test-results.xml"
+
+          - task: PublishCodeCoverageResults@1
+            displayName: "Publish Code Coverage Results (react-lib)"
+            condition: succeededOrFailed()
+            inputs:
+              codeCoverageTool: "cobertura"
+              summaryFileLocation: "$(project)/coverage/cobertura-coverage.xml"
+
+          - task: PublishPipelineArtifact@1
+            inputs:
+              targetPath: $(outputDirectory)"
+              artifactType: "pipeline"
+              artifactName: "microsoft-visualization"

visualization/build/visualization-lib.yml

@@ -0,0 +1,86 @@
+# Builds react-lib, js-lib and links the packages.
+resources:
+  - repo: self
+    clean: true
+
+# Trigger whenever a commit occurs in these branches
+trigger:
+  branches:
+    include:
+      - main
+
+variables:
+  rootDirectory: visualization
+  project: $(rootDirectory)/react-lib
+  jslib: $(rootDirectory)/js-lib
+  reactnodemodules: node_modules/react
+  projectname: quantum-visualization
+  outputDirectory: $(Agent.BuildDirectory)/output
+  tests: $(project)/TestResults
+
+stages:
+  - stage: Build_Visualization_Library
+    pool:
+      vmImage: "windows-latest"
+    jobs:
+      - job: Build_Test_Link_Publish
+        steps:
+          - task: UseDotNet@2
+            inputs:
+              version: "3.1.x"
+
+          - task: NodeTool@0
+            inputs:
+              versionSpec: "16.x"
+
+          - task: Bash@3
+            displayName: "Build js-lib and dependencies"
+            inputs:
+              targetType: "filePath"
+              filePath: "$(rootDirectory)/build/build-jslib.sh"
+              failOnStderr: true
+              workingDirectory: "$(rootDirectory)/build/"
+
+          # - task: SFP.build-tasks.custom-build-task-1.EsrpCodeSigning@1
+          #   displayName: 'Signing'
+          #   inputs:
+          #     ConnectedServiceName: CodeSign
+          #     FolderPath: "$(jslib)/dist/"
+          #     Pattern: "*.js"
+          #     CertificateId: 100040160
+          #     OpusName: "Microsoft Quantum Development Kit"
+          #     OpusInfo: "https://www.microsoft.com/quantum"
+          #     SessionTimeout: 120
+
+          - task: CopyFiles@2
+            inputs:
+              SourceFolder: "$(jslib)/dist/"
+              Contents: "**"
+              TargetFolder: "$(outputDirectory)"
+            displayName: "Copy build artifacts to output directory"
+
+          - task: Npm@1
+            displayName: npm run tests (react-lib)
+            inputs:
+              workingDir: "$(project)"
+              command: "custom"
+              customCommand: "run testsonly"
+
+          - task: PublishTestResults@2
+            displayName: "Publish Test Results (react-lib)"
+            condition: succeededOrFailed()
+            inputs:
+              testResultsFiles: "$(tests)/test-results.xml"
+
+          - task: PublishCodeCoverageResults@1
+            displayName: "Publish Code Coverage Results (react-lib)"
+            condition: succeededOrFailed()
+            inputs:
+              codeCoverageTool: "cobertura"
+              summaryFileLocation: "$(project)/coverage/cobertura-coverage.xml"
+
+          - task: PublishPipelineArtifact@1
+            inputs:
+              targetPath: $(outputDirectory)"
+              artifactType: "pipeline"
+              artifactName: "microsoft-visualization"

visualization/js-lib/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function (api) {
+    api.cache(true);
+
+    const presets = [ "@babel/preset-env", "@babel/preset-react" ];
+    const generatorOpts ={"compact" : true};
+
+    return {
+      presets,
+      generatorOpts
+    };
+  }