Skip to content
Snippets Groups Projects
Commit a7a9cd8e authored by Johannes Mey's avatar Johannes Mey
Browse files

dashboard with context

parent c85cc13d
No related branches found
No related tags found
1 merge request!1festival updatesfestival updatesfestival updatesfestival updatesfestival
Pipeline #14743 passed
.App { .App {
background-color: #282c34; background-color: #282c34;
text-align: left; text-align: left;
} }
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.App-logo { .App-logo {
animation: App-logo-spin infinite 20s linear; animation: App-logo-spin infinite 20s linear;
} }
} }
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 40px; /*100vmin*/ min-height: 40px; /*100vmin*/
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: white;
}
.CurrentContext {
height: 50vh;
width: 100vw;
object-fit: contain;
/*object-fit: scale-down;*/
object-position: right;
} }
.CurrentAst { .CurrentAst {
height: 50vh; height: 50vh;
width: 100vw; width: 100vw;
object-fit: cover; object-fit: cover;
object-position: right; object-position: right;
} }
.AstInTimeline { .AstInTimeline {
max-width: 100%; max-width: 100%;
} }
.App-link { .App-link {
color: #61dafb; color: #61dafb;
} }
.MG-Timeline { .MG-Timeline {
max-width: 4000px !important; max-width: 4000px !important;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
...@@ -70,20 +70,20 @@ function App() { ...@@ -70,20 +70,20 @@ function App() {
/> />
</header> </header>
<main> <main>
<CurrentState <CurrentContextState
diagram={context ? context.diagram : ''} diagram={context ? context.diagram : ''}
label='' label=''
/> />
<CurrentState <CurrentASTState
diagram={ast ? ast.diagram : ''} diagram={ast ? ast.diagram : ''}
label={ast ? ast.parseRule : ''} label={ast ? ast.parseRule : ''}
/> />
</main> </main>
</div> </div>
); );
} }
function CurrentState(props) { function CurrentASTState(props) {
return ( return (
<div className="curent-state"> <div className="curent-state">
<img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} /> <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
...@@ -91,11 +91,19 @@ function CurrentState(props) { ...@@ -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) { function ControlPanel(props) {
return ( return (
<div className='ControlPanel'> <div className='ControlPanel'>
<button onClick={() => { props.ws.current.send("parse") }}>start parsing</button> <button onClick={() => { props.ws.current.send("cell1 parse") }}>start parsing in cell 1</button>
<button onClick={() => { props.ws.current.send("reset") }}>reset selections</button> <button onClick={() => { props.ws.current.send("cell1 reset") }}>reset selections</button>
</div> </div>
) )
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment