Three column layout

[mazurroman]

Let's add support for three column layout in case someone wants to preview multiple things simultaneously, i.e. Cairo, Sierra and the Execution Trace, all at the same time!

This will involve:

• Add new icon to the top right part of the screen; we can use the layout-vertical icon
• When the user clicks the icon, it changes from line to fill to indicate that the three column layout mode is on
• New column will appear in between the current editor and the Execution Trace
• The new column will not be editable and will not have the "Compile and run" button - its just a preview column!
• The new column will let the user select from Cairo, Sierra and CASM, similar to the dropdown above the editor
• The new column will support variable highlighting or execution highlighting, similar to what the Editor can do today.

This feature will be particularly useful with #89

[princeibs]

Hi @mazurroman, I have worked on a couple of JS/TS and Cairo projects in the past and also an active user of cairovm.codes. I would tackle this problem first by adding a button at the top of the editor to indicate the current active view mode. When the button is clicked, it will bring up a new column in between the editor and the execution trace. This new column will have dropdown to select mode from Cairo, Sierra, CASM. More research will be conducted during development in areas where improvement is needed.

[jaipaljadeja]

Hey Jaipal again this side. can i do this? I am thinking of making a boolean state variable which can be controlled by the icon and based on the boolean state i can conditionally render a column in between the Editor and Execution Trace. Now this column will render a new component which will have a drop down initially in the center and based on what user selects it will render the Instruction Table or the Editor itself. and Will use the readOnly prop to enable/disable editing.

[Ayoazeez26]

Hi @mazurroman I'm Abdulhakeem, a frontend developer with 4 years experience, I would like to work on this. I am thinking of making the layout-vertical icon a button that toggles a boolean variable to conditionally render the extra column in between the current editor and execution trace. The new column would let the user select what language to display similar to what the current editor has. Will also disable editing on the new column

[melnikga]

Hi, I want to take on this assignment! It seems to me that first of all it is necessary to create a new component similar to ToggleFullScreen only to include the third column, and add it to Nav. Next, I would add a component similar to the existing editor, where the Header will also have select with a selection of options from CASM, Sierra and Cario, however, in the SCEditor component I would add disabled={true}. In the end, I would tweak the styles a bit to make the display in three columns look cool!

[mazurroman]

Thank you everyone for your thorough comments, this one was really hard! We decided to assign it to @jaipaljadeja who was the first to provide a comprehensive comment on how to resolve this issue.

All of the comments are really good quality, hopefully you can get another issue in the future so keep an eye on new ones :)