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

update dashboard to single image only

parent 17850c96
No related branches found
No related tags found
1 merge request!1festival updatesfestival updatesfestival updatesfestival updatesfestival
...@@ -26,7 +26,10 @@ ...@@ -26,7 +26,10 @@
} }
.CurrentAst { .CurrentAst {
height: 50vh;
width: 100vw; width: 100vw;
object-fit: cover;
object-position: right;
} }
.AstInTimeline { .AstInTimeline {
......
import './App.css'; import './App.css';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import './index.css'; import './index.css';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css'; import 'react-vertical-timeline-component/style.min.css';
import { GiFamilyTree } from "react-icons/gi";
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { addAst, setAstList } from './mgSlice' import { setAst, setContext } from './mgSlice'
function App() { function App() {
const ws = useRef(null); const ws = useRef(null);
const dispatch = useDispatch(); const dispatch = useDispatch();
const asts = useSelector(state => state.mg.asts); const ast = useSelector(state => state.mg.ast);
const context = useSelector(state => state.mg.context);
useEffect(() => { useEffect(() => {
ws.current = new WebSocket("ws://localhost:7070/ast-events"); ws.current = new WebSocket("ws://localhost:7070/ast-events");
...@@ -20,8 +19,10 @@ function App() { ...@@ -20,8 +19,10 @@ function App() {
ws.current.onmessage = (event) => { ws.current.onmessage = (event) => {
const json = JSON.parse(event.data); const json = JSON.parse(event.data);
try { try {
if ((json.event = "data")) { if (json.type === "ast") {
dispatch(addAst(json)); dispatch(setAst(json));
} else if (json.type === "context") {
dispatch(setContext(json));
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
...@@ -36,51 +37,47 @@ function App() { ...@@ -36,51 +37,47 @@ function App() {
}, [dispatch]); }, [dispatch]);
useEffect(() => { useEffect(() => {
if (asts.length === 0) { if (ast.diagram == null) {
fetch('http://localhost:7070/asts/') console.log("setting ast from WS 1");
fetch('http://localhost:7070/ast/')
.then(res => res.json()) .then(res => res.json())
.then((asts) => { .then((ast) => {
dispatch(setAstList(asts)) console.log("setting ast from WS");
console.log(ast);
dispatch(setAst(ast))
}) })
.catch(console.log) .catch(console.log)
} }
}, [dispatch, asts.length]) if (context.diagram == null) {
console.log("setting ctx from WS");
fetch('http://localhost:7070/context/')
.then(res => res.json())
.then((context) => {
dispatch(setContext(context))
})
.catch(console.log)
} else {
console.log(context)
}
}, [dispatch, ast, context])
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<ControlPanel /> <ControlPanel
ws={ws}
/>
</header> </header>
<main> <main>
<CurrentState <CurrentState
diagram={asts[0] ? asts[0].diagram : ''} diagram={context ? context.diagram : ''}
label={asts[0] ? asts[0].parseRule : ''} label=''
/>
<CurrentState
diagram={ast ? ast.diagram : ''}
label={ast ? ast.parseRule : ''}
/> />
<VerticalTimeline
className='MG-Timeline'>
{asts.map(v => {
console.log(v.parseRule)
return (
<VerticalTimelineElement
className="ast-timeline-event"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid rgb(33, 150, 243)' }}
date={new Date(v.timestamp).toLocaleTimeString('en-us', { hour12: false })}
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff', rotate: '180deg' }}
icon={<GiFamilyTree />}
key={v.timestamp}
position={'right'}
>
<h3 className="vertical-timeline-element-title">{v.parseRule}()</h3>
<p>
<img className="AstInTimeline" src={`data:image/svg+xml;utf8,${encodeURIComponent(v.diagram)}`} alt={v.parseRule} />
</p>
</VerticalTimelineElement>
)
})}
</VerticalTimeline>
</main> </main>
</div> </div>
); );
...@@ -94,14 +91,13 @@ function CurrentState(props) { ...@@ -94,14 +91,13 @@ function CurrentState(props) {
) )
} }
class ControlPanel extends React.Component { function ControlPanel(props) {
render() { return (
return ( <div className='ControlPanel'>
<div className='ControlPanel'> <button onClick={() => { props.ws.current.send("parse") }}>start parsing</button>
<button onClick={() => { alert('You clicked me!'); }}>connect</button> <button onClick={() => { props.ws.current.send("reset") }}>reset selections</button>
</div> </div>
); )
}
} }
export default App; export default App;
import { createSlice } from '@reduxjs/toolkit' import {createSlice} from '@reduxjs/toolkit'
export const mgSlice = createSlice({ export const mgSlice = createSlice({
name: 'mg', name: 'mg',
initialState: { initialState: {
asts: [], ast: {},
contexts: {}, context: {},
},
reducers: {
addAst: (state, action) => {
state.asts = [action.payload, ...state.asts];
console.log("added ast, size is " + state.asts.length);
}, },
setAstList: (state, action) => { reducers: {
state.asts = action.payload.reverse(); setAst: (state, action) => {
console.log("set AST list, size is " + state.asts.length); state.ast = action.payload;
console.log("set AST");
},
setContext: (state, action) => {
state.context = action.payload;
console.log("set context");
}
} }
}
}) })
export const { addAst, setAstList } = mgSlice.actions export const {setAst, setContext} = mgSlice.actions
export default mgSlice.reducer export default mgSlice.reducer
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment