Show more feedback for compiled noir program

apps/noir-compiler/src/app/app.tsx

@@ -40,7 +40,7 @@ function App() {
       // noir compiling events
       plugin.internalEvents.on('noir_compiling_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'compiling' }))
       plugin.internalEvents.on('noir_compiling_done', () => {
-        dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })
+        dispatch({ type: 'SET_COMPILER_STATUS', payload: 'succeed' })
         dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null })
       })
       plugin.internalEvents.on('noir_compiling_errored', noirCompilerErrored)

apps/noir-compiler/src/app/components/container.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { CompileBtn, CompilerFeedback, CompilerReport, CustomTooltip, RenderIf } from '@remix-ui/helper'
+import { CompileBtn, CompilerFeedback, CompilerReport, CustomTooltip, extractNameFromKey, extractParentFromKey, RenderIf } from '@remix-ui/helper'
 import { FormattedMessage } from 'react-intl'
 import { NoirAppContext } from '../contexts'
 import { CompileOptions } from '@remix-ui/helper'
@@ -37,6 +37,11 @@ export function Container () {
     compileNoirCircuit(noirApp.plugin, noirApp.appState)
   }
 
+  const handleViewProgramArtefact = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    noirApp.plugin.call('fileManager', 'open', `${extractParentFromKey(noirApp.appState.filePath)}/build/${extractNameFromKey(noirApp.appState.filePath).replace('.nr', '.json')}`)
+  }
+
   return (
     <section>
       <article>
@@ -60,6 +65,11 @@ export function Container () {
             <RenderIf condition={noirApp.appState.status !== 'compiling'}>
               <CompilerFeedback feedback={noirApp.appState.compilerFeedback} filePathToId={noirApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={noirApp.appState.hideWarnings} askGPT={askGPT} />
             </RenderIf>
+            <RenderIf condition={noirApp.appState.status === 'succeed'}>
+              <a className="cursor-pointer text-decoration-none" href='#' onClick={handleViewProgramArtefact}>
+                <i className="text-success mt-1 px-1 fas fa-check"></i> View compiled noir program artefact.
+              </a>
+            </RenderIf>
           </div>
         </div>
       </article>

apps/noir-compiler/src/app/services/noirPluginClient.ts

@@ -65,6 +65,8 @@ export class NoirPluginClient extends PluginClient {
       this.emit('statusChanged', { key: 'succeed', title: 'Noir circuit compiled successfully', type: 'success' })
       // @ts-ignore
       this.call('terminal', 'log', { type: 'log', value: 'Compiled successfully' })
+      // @ts-ignore
+      await this.call('editor', 'clearErrorMarkers', [path])
     } catch (e) {
       const regex = /^\s*(\/[^:]+):(\d+):/gm;
       const pathContent = await this.call('fileManager', 'readFile', path)

apps/noir-compiler/src/app/types/index.ts

@@ -2,7 +2,7 @@ import { compiler_list } from 'circom_wasm'
 import { Dispatch } from 'react'
 import type { NoirPluginClient } from '../services/noirPluginClient'
 
-export type CompilerStatus = "compiling" | "idle" | "errored" | "warning"
+export type CompilerStatus = "compiling" | "idle" | "errored" | "warning" | "succeed"
 export interface INoirAppContext {
   appState: AppState
   dispatch: Dispatch<Actions>,