Skip to content

Commit

Permalink
#40 plugging side bar
Browse files Browse the repository at this point in the history
  • Loading branch information
ddelpiano committed Nov 25, 2022
1 parent 67dbe6a commit 1e7e8c6
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 77 deletions.
7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@
"@mui/lab": "^5.0.0-alpha.103",
"@mui/material": "^5.8.4",
"@mui/styles": "^5.8.4",
"@reduxjs/toolkit": "^1.9.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.5.0",
"add": "^2.0.6",
"ajv": "^6.12.6",
"buffer": "^6.0.3",
"closest": "0.0.1",
Expand All @@ -37,11 +39,14 @@
"react-rnd": "^10.3.7",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-batched-subscribe": "^0.1.6",
"redux-logger": "^3.0.6",
"resize-observer-polyfill": "^1.5.1",
"stream-browserify": "^3.0.0",
"typescript": "^4.6.4",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"yarn": "^1.22.19"
},
"scripts": {
"start": "react-app-rewired start",
Expand Down
3 changes: 2 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { Provider } from 'react-redux';
import Layout from './components/common/Layout';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import store from './redux/store';

// import Loader from './components/common/Loader';

function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Provider store={}>
<Provider store={store}>
<Layout />
</Provider>
{/* <Loader /> */}
Expand Down
69 changes: 29 additions & 40 deletions src/components/Main.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import React from 'react';
import { withStyles } from '@mui/styles';
import { PNLClasses } from '../constants';
import BG from '../assets/svg/bg-dotted.svg';
import ModelInterpreter from '../model/Interpreter';
import Composition from './views/compositions/Composition';
import GenericMechanism from './views/mechanisms/GenericMechanism';
import MetaDiagram, {
CallbackTypes,
ComponentsMap,
EventTypes,
Position,
} from '@metacell/meta-diagram';
import CustomLinkWidget from './views/projections/CustomLinkWidget';
import { withStyles } from '@mui/styles';
import { PNLClasses } from '../constants';
import BG from '../assets/svg/bg-dotted.svg';
import { generateMetaGraph } from '../model/utils';
import { leftSideBarNodes } from './views/leftSidebar/nodes';
import ModelInterpreter from '../model/Interpreter';
import { Sidebar } from './views/rightSidebar/Sidebar';
import Composition from './views/compositions/Composition';
import { leftSideBarNodes } from './views/leftSidebar/nodes';
import GenericMechanism from './views/mechanisms/GenericMechanism';
import CustomLinkWidget from './views/projections/CustomLinkWidget';

import { connect } from "react-redux";
import { select } from '../redux/actions/general';
import { handlePostUpdates, handlePreUpdates } from './graph/eventsHandler';



const mockModel = require('../resources/model').mockModel;

Expand Down Expand Up @@ -46,8 +51,6 @@ class Main extends React.Component {

// functions bond to this scope
this.metaCallback = this.metaCallback.bind(this);
this.handlePreUpdates = this.handlePreUpdates.bind(this);
this.handlePostUpdates = this.handlePostUpdates.bind(this);
this.mouseMoveCallback = this.mouseMoveCallback.bind(this);

this.metaGraph = generateMetaGraph([
Expand All @@ -57,40 +60,14 @@ class Main extends React.Component {
this.metaGraph.addLinks(this.metaModel[PNLClasses.PROJECTION]);
}

handlePostUpdates(event) {
const node = event.entity;
switch (event.function) {
case CallbackTypes.POSITION_CHANGED: {
this.metaGraph.updateGraph(
node,
this.mousePos.x,
this.mousePos.y,
event?.extraCondition === CallbackTypes.CHILD_POSITION_CHANGED
);
this.interpreter.updateModel(node);
return true;
}
default: {
console.log(
'Function callback type not yet implemented ' + event.function
);
return false;
}
}
}

handlePreUpdates(event) {
// console.log('preUpdates not yet implemented.');
}

metaCallback(event) {
switch (event.metaEvent) {
case EventTypes.PRE_UPDATE: {
this.handlePreUpdates(event);
handlePostUpdates(event, this);
break;
}
case EventTypes.POST_UPDATE: {
this.handlePostUpdates(event);
handlePostUpdates(event, this);
break;
}
default: {
Expand Down Expand Up @@ -138,4 +115,16 @@ class Main extends React.Component {
}
}

export default withStyles(styles)(Main);
function mapStateToProps (state) {
return {
instanceSelected: state.selected
}
}

function mapDispatchToProps (dispatch) {
return {
selectInstance: (node) => dispatch(select(node)),
}
}

export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef : true } )(withStyles(styles)(Main));
34 changes: 34 additions & 0 deletions src/components/graph/eventsHandler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { CallbackTypes } from '@metacell/meta-diagram';

export function handlePostUpdates(event, context) {
const node = event.entity;
switch (event.function) {
case CallbackTypes.POSITION_CHANGED: {
context.metaGraph.updateGraph(
node,
context.mousePos.x,
context.mousePos.y,
event?.extraCondition === CallbackTypes.CHILD_POSITION_CHANGED
);
context.interpreter.updateModel(node);
return true;
}
case CallbackTypes.SELECTION_CHANGED: {
const newInstance = node.getID();
if (context.props.instanceSelected !== newInstance) {
context.props.selectInstance(newInstance);
}
break;
}
default: {
console.log(
'Function callback type not yet implemented ' + event.function
);
return false;
}
}
}

export function handlePreUpdates(event, context) {
// console.log('preUpdates not yet implemented.');
}
5 changes: 5 additions & 0 deletions src/redux/middleware/pnlmiddleware.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const pnlMiddleware = store => next => action => {
next(action);
}

export default pnlMiddleware;
60 changes: 59 additions & 1 deletion src/redux/reducers/general.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { GUIStates } from "../../constants"
import { GUIStates } from '../../constants';
import * as Actions from '../actions/general';

export const GENERAL_DEFAULT_STATE = {
error: undefined,
Expand All @@ -9,3 +10,60 @@ export const GENERAL_DEFAULT_STATE = {
composition_opened: undefined
}

const reducer = ( state = {}, action ) => ({
...state,
...generalReducer(state, action)
});

function generalReducer (state, action) {
switch (action.type) {
case Actions.OPEN_FILE: {
// TODO: to be implemented
return state;
}
case Actions.LOAD_MODEL: {
// TODO: to be implemented
return state;
}
case Actions.SAVE_MODEL: {
// TODO: to be implemented
return state;
}
case Actions.UPDATE_MODEL: {
// TODO: to be implemented
return state;
}
case Actions.SIMULATE_MODEL: {
// TODO: to be implemented
return state;
}
case Actions.CHANGE_VIEW: {
// TODO: to be implemented
return state;
}
case Actions.SELECT: {
return {
...state,
selected: action.data,
};
}
case Actions.OPEN_COMPOSITION: {
return {
...state,
composition_opened: action.data,
};
}
case Actions.CLOSE_COMPOSITION: {
return {
...state,
composition_opened: undefined,
};
}
default: {
return state;
}
}
}


export default reducer;
60 changes: 26 additions & 34 deletions src/redux/store.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
export const GENERAL_DEFAULT_STATE = {
error: undefined,
idsMap: {},
idsList: [],
idsLoaded: 0,
idsToLoad: 0,
stepsToLoad: 1,
stepsLoaded: 0,
loading: false,
instanceOnFocus : {},
ui : {
canvas : {
instanceSelection : {},
instanceDeleted : {},
instanceVisibilityChanged : false
},
graph : {
graphQueryIndex : -1,
visible : true,
sync : false
},
termInfo : { termInfoVisible : false },
layers : { listViewerInfoVisible : true },
circuitBrowser : {
circuitQuerySelected : [{ id : "", label : "" } , { id : "", label : "" }],
visible : true
},
layout: {
"ThreeDViewer": true,
"StackViewer": true,
"TermInfo": true
}
}
}
import _ from 'lodash';
import logger from 'redux-logger';
import reducer from "./reducers/general";
import { configureStore } from '@reduxjs/toolkit'
import pnlMiddleware from "./middleware/pnlmiddleware";
import { GENERAL_DEFAULT_STATE } from "./reducers/general";
// And use redux-batched-subscribe as an example of adding enhancers
import { batchedSubscribe } from 'redux-batched-subscribe';


const INIT_STATE = { generals: GENERAL_DEFAULT_STATE };
const debounceNotify = _.debounce(notify => notify());

function initStore (state = INIT_STATE) {
return configureStore({
reducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(pnlMiddleware).concat(logger),
devTools: process.env.NODE_ENV !== 'production',
state,
enhancers: [batchedSubscribe(debounceNotify)],
});
}

const pnlStore = initStore(INIT_STATE);

export default pnlStore;

0 comments on commit 1e7e8c6

Please sign in to comment.