[Feature Request] Make the visualization work for 100s of patches at a time

[gwwatkin]

Issue Description

Right now if there are too many patches for the page width the ui breaks down. We want to be able to visualize hundreds of patches at a time.

Proposed Solution

It used to be possible to do this by panning and zooming. A possible solution is to bring this functionality back. However there might be better solutions.

Additional References

How the pannable container used to be implemented https://github.com/latticesurgery-com/lattice-surgery-compiler/pull/3/files#r783864838

[Keelando]

@gwwatkin No problem. Is there a way I can recreate what 100s of patches look like, or do you have any large examples/lattices that I can tinker with? I'm not fully clear on the possible parameters, and the current UI was based around whats in the example circuits. I can make any size render in the browser correctly once I can render them in the view.

Also, are patches essentially the squares? We still need a legend on the lattice view...

[gwwatkin]

use this patch:

diff --git a/src/components/sections/SelectExampleCircuit.tsx b/src/components/sections/SelectExampleCircuit.tsx
index a1f7f0b..fc52705 100644
--- a/src/components/sections/SelectExampleCircuit.tsx
+++ b/src/components/sections/SelectExampleCircuit.tsx
@@ -79,6 +79,24 @@ const SelectExampleCircuit = ({ appState, setAppState }: AppStateProps): JSX.Ele
@@ -79,6 +79,24 @@ const SelectExampleCircuit = ({ appState, setAppState }: AppStateProps): JSX.Ele
                 } else {
                     try {
                         const responseJson = JSON.parse(response.data) as CompilationResult
+                        // Extend the slices by
+                        const REPEATS=5
+                        console.log("Zero")
+                        responseJson.slices.forEach((slice, slice_idx) =>
+                        {
+                            slice.forEach((row, row_idx) => {
+                                for (let i = 0; i < REPEATS; i++)
+                                {
+                                    responseJson.slices[slice_idx][row_idx] = responseJson.slices[slice_idx][row_idx].concat(row)
+                                }
+                            })
+
+                            for (let i = 0; i < REPEATS; i++){
+                                responseJson.slices[slice_idx] = responseJson.slices[slice_idx].concat(slice)
+                                console.log("One round")
+                            }
+                        })
+
                         setAppState({
                             apiResponse: new CompilationResultSuccess(
                                 responseJson.slices,

Yes patches should be square.

[gwwatkin]

Lattices like this need to be fixed:

[Keelando]

It dawned on me that I can fix this, but since we have implemented a new UI paradigm, I am going to focus on porting over the last of the UI to Chakra, and help rebuild the the lattice view using that framework.

[gwwatkin]

It dawned on me that I can fix this, but since we have implemented a new UI paradigm, I am going to focus on porting over the last of the UI to Chakra, and help rebuild the the lattice view using that framework.

@Keelando sounds like a good plan 👍

[gwwatkin]

@Keelando if porting to Chakra is a big task feel free to break it into a separate PR and even make a specific issue for it