Add support for slice annotations

src/components/sections/CircuitSelect/FileUploader.tsx

@@ -20,7 +20,7 @@ const FileUploader = ({ onFileAccepted, isLoading }: FileUploaderProps): JSX.Ele
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         onDrop,
-        accept: [".qasm", ".json", ".lli", ".lsi"],
+        accept: [".qasm", ".json", ".lli", ".lsi", ".spec", ".spec.new"],
         maxFiles: 1,
         multiple: false,
         disabled: isLoading,

src/components/sections/CircuitSelect/index.tsx

@@ -64,10 +64,10 @@ const runCompilation = async (
             if (emscriptenResult.exit_code === 0) {
                 setAppState({
                     compilationIsLoading: false,
-                    apiResponse: new CompilationResultSuccess(
-                        JSON.parse(emscriptenResult.output) as Slices,
-                        `Emscripten Success`
-                    ),
+                    apiResponse: new CompilationResultSuccess({
+                        slices: JSON.parse(emscriptenResult.output) as Slices,
+                        compilation_text:"Emscripten Success"
+                }),
                 })
             } else {
                 setAppState({
@@ -107,21 +107,18 @@ const CircuitSelect = ({ appState, setAppState }: CircuitSelectProps) => {
     }
 
     const onFileAccepted = async (file: File) => {
-        const data = await readFile(file)
+        const data = (await readFile(file)) as string
         const extension: string = file.name.split(".").pop() || ""
-        if (extension === "json") {
-            const json_data = JSON.parse(data as string)
+        if (extension === "json" || "[{".includes(data[0])) {
+            const json_data = JSON.parse(data)
             if (Object.prototype.hasOwnProperty.call(json_data, "compilation_text")) {
                 setAppState({
-                    apiResponse: new CompilationResultSuccess(
-                        json_data.slices,
-                        json_data.compilation_text
-                    ),
+                    apiResponse: new CompilationResultSuccess(json_data),
                     compilationIsLoading: false,
                 })
             } else {
                 setAppState({
-                    apiResponse: new CompilationResultSuccess(json_data, ""),
+                    apiResponse: new CompilationResultSuccess({compilation_text: "", slices: json_data}),
                     compilationIsLoading: false,
                 })
             }

src/components/sections/LatticeView.tsx

@@ -81,7 +81,7 @@ const LatticeView = ({ compilationResult }: LatticeViewProps): JSX.Element => {
     }
     const [cellDimensionPixels, setCellDimensionPixels] = useState(130)
     // cell font size is cellDimensionPixels divided by 20.
-    const { compilation_text, slices } = compilationResult
+    const { compilation_text, slices, slice_annotations } = compilationResult
     const num_slices = slices.length
 
     const [latticePosition, setLatticePosition] = useState({ x: 0, y: 0 })
@@ -98,6 +98,7 @@ const LatticeView = ({ compilationResult }: LatticeViewProps): JSX.Element => {
 
     // set state of checkbox switch
     const [showCompilationText, setCompilationText] = useState(false)
+    const [showAnnotations, setShowAnnotations] = useState(false)
 
     // export slices to downloadable text JSON file
     const exportJson = (compilationResult: CompilationResult) => {
@@ -143,6 +144,20 @@ const LatticeView = ({ compilationResult }: LatticeViewProps): JSX.Element => {
                         checked={showCompilationText}
                     />
                 </Flex>
+                <Flex alignItems="center">
+                    <FormLabel htmlFor="slice-annotations" fontSize="xl" mb="0">
+                        Show Slice Annotations
+                    </FormLabel>
+                    <Switch
+                        id="slice-annotations"
+                        size="lg"
+                        onChange={(e) => {
+                            setShowAnnotations(e.target.checked)
+                        }}
+                        checked={showAnnotations}
+                        // disabled={!slice_annotations}
+                    />
+                </Flex>
                 <Button borderWidth="2px" onClick={() => exportJson(compilationResult)}>
                     <Flex gap="4">
                         <Text fontSize="xl" margin="auto">
@@ -174,6 +189,17 @@ const LatticeView = ({ compilationResult }: LatticeViewProps): JSX.Element => {
                 </Flex>
             )}
 
+            {showAnnotations && slice_annotations && slice_annotations[selectedSliceNumber] && (
+                <>
+                    <Text className="line-1" fontSize="24px">
+                        Instructions for this slice:
+                    </Text>
+                    <pre>
+                        {slice_annotations[selectedSliceNumber].instuction_annotations.map(i => i.instruction_text).join("\n")}
+                    </pre>
+                </>
+            )}
+
             <Box pt="3" pb="3">
                 <Center>
                     <Flex flexWrap="wrap">

src/lib/apiResponses.ts

@@ -1,4 +1,4 @@
-import type { Slices } from "./slices"
+import type { CompilationResult } from "./slices"
 
 // Different classes representing possible Api Response outcomes
 export class ResponseError {
@@ -12,12 +12,10 @@ export class ResponseError {
 }
 
 export class CompilationResultSuccess {
-    slices: Slices
-    compilation_text: string
+    compilation_result: CompilationResult
 
-    constructor(slices: Slices, compilation_text: string) {
-        this.slices = slices
-        this.compilation_text = compilation_text
+    constructor(compilation_result: CompilationResult) {
+        this.compilation_result = compilation_result
     }
 }
 

src/lib/parseCompilationText.ts

@@ -12,6 +12,11 @@ const parseCompilationText = (compilation_text: string): Array<CompilationStage>
         return [new CompilationStage("Compiled in browser:", "Success")]
     }
 
+    if (!compilation_text.includes("Circuit"))
+    {
+        return [new CompilationStage(compilation_text, "")]
+    }
+
     const compilation_text_split = compilation_text.split("Circuit")
     const input_circuit = compilation_text_split[1].slice(2)
 

src/lib/sliceAnnotations.ts

@@ -0,0 +1,14 @@
+type InstructionAnnotation = {
+    instruction_text: string
+}
+
+type SliceAnnotation = {
+    instuction_annotations:  Array<InstructionAnnotation>
+}
+
+type SliceAnnotations = Array<SliceAnnotation>
+
+export type {
+    SliceAnnotation,
+    SliceAnnotations
+}

src/lib/slices.ts

@@ -1,3 +1,5 @@
+import {SliceAnnotations} from './sliceAnnotations'
+
 // These types mirror the ones used by lsqecc.lattice_array and are used to interpret the calls to
 // lsqecc.pipeline.json_pipeline (i.e. what you get by calling api.latticesurgery.com/compile).
 // The reason for this exact mirroring is so that the output json can be generated directly from the internal python
@@ -68,6 +70,7 @@ type Slices = Array<Slice>
 
 type CompilationResult = {
     slices: Slices
+    slice_annotations?: SliceAnnotations
     compilation_text: string
 }
 

src/lib/submitCompileRequest.ts

@@ -41,10 +41,7 @@ const submitCompileRequest = async (
                 const responseJson = JSON.parse(response.data) as CompilationResult
 
                 setAppState({
-                    apiResponse: new CompilationResultSuccess(
-                        responseJson.slices,
-                        responseJson.compilation_text
-                    ),
+                    apiResponse: new CompilationResultSuccess(responseJson),
                     compilationIsLoading: false,
                 })
             } catch (err) {

src/pages/Compiler.tsx

@@ -66,7 +66,7 @@ const CompilerPage = (): JSX.Element => {
                     </Text>
                 </Center>
                 {appState.apiResponse instanceof CompilationResultSuccess && (
-                    <LatticeView compilationResult={appState.apiResponse} />
+                    <LatticeView compilationResult={appState.apiResponse.compilation_result} />
                 )}
             </Stack>
         </>