dashboard with context

dashboard/src/App.css

@@ -25,6 +25,14 @@
     color: white;
 }
 
+.CurrentContext {
+    height: 50vh;
+    width: 100vw;
+    object-fit: contain;
+    /*object-fit: scale-down;*/
+    object-position: right;
+}
+
 .CurrentAst {
     height: 50vh;
     width: 100vw;

dashboard/src/App.js

@@ -70,11 +70,11 @@ function App() {
         />
       </header>
       <main>
-        <CurrentState
+        <CurrentContextState
           diagram={context ? context.diagram : ''}
           label=''
         />
-        <CurrentState
+          <CurrentASTState
               diagram={ast ? ast.diagram : ''}
               label={ast ? ast.parseRule : ''}
           />
@@ -83,7 +83,7 @@ function App() {
   );
 }
 
-function CurrentState(props) {
+function CurrentASTState(props) {
   return (
     <div className="curent-state">
       <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
@@ -91,11 +91,19 @@ function CurrentState(props) {
   )
 }
 
+function CurrentContextState(props) {
+    return (
+        <div className="curent-state">
+            <img className="CurrentContext" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
+        </div>
+    )
+}
+
 function ControlPanel(props) {
   return (
     <div className='ControlPanel'>
-      <button onClick={() => { props.ws.current.send("parse") }}>start parsing</button>
-      <button onClick={() => { props.ws.current.send("reset") }}>reset selections</button>
+      <button onClick={() => { props.ws.current.send("cell1 parse") }}>start parsing in cell 1</button>
+      <button onClick={() => { props.ws.current.send("cell1 reset") }}>reset selections</button>
     </div>
   )
 }