this.setTabIndex(tabIndex)} />
+ );
+ }
+}
+
+class UIContainer extends UISection {
+ constructor(parent, horizontal = true, weight, visible) {
+ super(parent, weight, visible);
+ this.horizontal = horizontal;
+ this.sections = [];
+ }
+
+ setHorizontal(horizontal) {
+ this.horizontal = horizontal;
+ this.change();
+ }
+
+ addBasicSection(Component, weight) {
+ const section = new UIBasicSection(this, Component, weight);
+ this.sections.push(section);
+ this.change();
+ return section;
+ }
+
+ addTabSection(weight) {
+ const section = new UITabSection(this, weight);
+ this.sections.push(section);
+ this.change();
+ return section;
+ }
+
+ addContainer(horizontal, weight) {
+ const container = new UIContainer(this, horizontal, weight);
+ this.sections.push(container);
+ this.change();
+ return container;
+ }
+
+ render(props) {
+ const visibleSections = this.sections.filter(section => section.visible);
+ const weights = visibleSections.map(section => section.weight);
+ const totalWeight = weights.reduce((sumWeight, weight) => sumWeight + weight, 0);
+ return (
+
+ {
+ visibleSections.map(section => {
+ const relativeWeight = section.weight / totalWeight;
+ return [
+ section.render({
+ key: section.id,
+ style: { flex: relativeWeight },
+ relativeWeight,
+ }),
+ section.renderDivider({ key: `divider-${section.id}`, horizontal: this.horizontal }),
+ ];
+ }).reduce((flat, toFlatten) => flat.concat(toFlatten), [])
+ }
+
+ );
+ }
+}
+
+class Workspace {
+ constructor(horizontal) {
+ this.rootContainer = new UIContainer(this, horizontal);
+ this.onChange = null;
+ }
+
+ getRootContainer() {
+ return this.rootContainer;
+ }
+
+ setHorizontal(horizontal) {
+ this.rootContainer.setHorizontal(horizontal);
+ }
+
+ addBasicSection(Component, weight) {
+ return this.rootContainer.addBasicSection(Component, weight);
+ }
+
+ addTabSection(weight) {
+ return this.rootContainer.addTabSection(weight);
+ }
+
+ addContainer(horizontal, weight) {
+ return this.rootContainer.addContainer(horizontal, weight);
+ }
+
+ render(props) {
+ return this.rootContainer.render(props);
+ }
+
+ setOnChange(onChange) {
+ this.onChange = onChange;
+ this.change();
+ }
+
+ change() {
+ if (this.onChange) this.onChange(this.rootContainer);
+ }
+}
+
+export default Workspace;
\ No newline at end of file
diff --git a/src/frontend/core/index.js b/src/frontend/core/index.js
index 5b2afadc280c741333c26ee2824f7ed9b14c6d32..2f4d4404d5213a9cdc49f62f356f7bbdb77c464f 100644
--- a/src/frontend/core/index.js
+++ b/src/frontend/core/index.js
@@ -2,4 +2,5 @@ export { default as datas } from './datas';
export { default as tracers } from './tracers';
export { default as renderers } from './renderers';
export { default as Seed } from './Seed';
-export { default as tracerManager } from './tracerManager';
\ No newline at end of file
+export { default as tracerManager } from './tracerManager';
+export { default as Workspace } from './Workspace';
\ No newline at end of file
diff --git a/src/frontend/core/renderers/Renderer/index.jsx b/src/frontend/core/renderers/Renderer/index.jsx
index f78895fdea3a73e4f1b84d6b0a88037c89ca1a45..6fbc6574d2558d70d037f313292ff3cdaec7cb74 100644
--- a/src/frontend/core/renderers/Renderer/index.jsx
+++ b/src/frontend/core/renderers/Renderer/index.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import styles from './stylesheet.scss';
+import { Ellipsis } from '/components';
class Renderer extends React.Component {
constructor(props) {
@@ -100,7 +101,7 @@ class Renderer extends React.Component {
return (
- {title}
+ {title}
{
this.renderData()
}
diff --git a/src/frontend/core/renderers/Renderer/stylesheet.scss b/src/frontend/core/renderers/Renderer/stylesheet.scss
index 9380026685a1fffad0d9ddb41b0b645067517fa5..79f8382a2e86ecf17ab9c6bf1607ef7e4720f34b 100644
--- a/src/frontend/core/renderers/Renderer/stylesheet.scss
+++ b/src/frontend/core/renderers/Renderer/stylesheet.scss
@@ -8,11 +8,11 @@
align-items: center;
justify-content: center;
overflow: hidden;
- border-bottom: 1px solid $theme-light;
+ border-top: 1px solid $theme-light;
font-family: 'Roboto Mono', monospace;
- &:last-child {
- border-bottom: none;
+ &:first-child {
+ border-top: none;
}
.title {
diff --git a/src/frontend/index.jsx b/src/frontend/index.jsx
index 74c0d5e42b26705affa1b3453cf3ce606163cb48..85aea1a8e92575e652ae540e026f4602b3873ef1 100644
--- a/src/frontend/index.jsx
+++ b/src/frontend/index.jsx
@@ -17,6 +17,7 @@ const render = (Component) => {
+
diff --git a/src/frontend/reducers/env.js b/src/frontend/reducers/env.js
index 88b36ad9506b97b6cfec56ec82b49077dd5eadd2..a0bc138f74e15caf11b2b9b0de6e9d91e0f528bb 100644
--- a/src/frontend/reducers/env.js
+++ b/src/frontend/reducers/env.js
@@ -13,9 +13,7 @@ export const actions = {
setDirectory,
};
-const immutables = {};
-
-const mutables = {
+const defaultState = {
categories: null,
categoryKey: null,
algorithmKey: null,
@@ -29,7 +27,4 @@ export default handleActions({
...state,
...payload,
}),
-}, {
- ...immutables,
- ...mutables,
-});
+}, defaultState);
diff --git a/src/frontend/reducers/toast.js b/src/frontend/reducers/toast.js
index 4a994c940c3914f52e542272ad1ba46d4a8d82ca..830417390ec87b5aefa6ce65ac510af82b9ff89f 100644
--- a/src/frontend/reducers/toast.js
+++ b/src/frontend/reducers/toast.js
@@ -13,9 +13,7 @@ export const actions = {
hideToast,
};
-const immutables = {};
-
-const mutables = {
+const defaultState = {
toasts: [],
};
@@ -38,9 +36,7 @@ export default handleActions({
toasts,
};
},
- [combineActions(
- hideToast,
- )]: (state, { payload }) => {
+ [hideToast]: (state, { payload }) => {
const { id } = payload;
const toasts = state.toasts.filter(toast => toast.id !== id);
return {
@@ -48,7 +44,4 @@ export default handleActions({
toasts,
};
},
-}, {
- ...immutables,
- ...mutables,
-});
+}, defaultState);