final pr feedback

visualization/build/build-all-local.sh

@@ -7,6 +7,9 @@ if [ "$1" == "buildJsLibOnly" ]; then
   if [ $? -eq 0 ]; then
     echo 'Successfully linked react and quantum-visualization'
   fi
+
+  npm run sortpackagejson || true
+
   npm run build
   if [ $? -eq 0 ]; then
     echo 'Successfully built js-lib'
@@ -20,6 +23,9 @@ else
   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'
@@ -38,6 +44,9 @@ else
   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'

visualization/build/build-jslib.sh

@@ -10,6 +10,8 @@ else
   echo 'Successfully install: react-lib'
 fi
 
+npm run sortpackagejson || true
+
 npm run build:prod
 if [ $? -ne 0 ]; then
   echo 'Failed to build: react-lib'
@@ -44,6 +46,8 @@ 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'
@@ -53,5 +57,5 @@ else
 fi
 
 echo 'Successfully built js-lib and dependencies.' 
-echo 'js-lib to be published to microsoft-visualization/index.js artifact."
+echo 'js-lib to be published to microsoft-visualization/index.js artifact.'
 exit 0

visualization/build/visualization-lib-pr.yml

@@ -0,0 +1,96 @@
+# 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: Npm@1
+            displayName: npm run lint (react-lib)
+            inputs:
+              workingDir: "$(project)"
+              command: "custom"
+              customCommand: "run lint"
+
+          - 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,93 @@
+# 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: Npm@1
+            displayName: npm run lint (react-lib)
+            inputs:
+              workingDir: "$(project)"
+              command: "custom"
+              customCommand: "run lint"
+
+          - 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"