diff --git a/example/app/data/DemoDataSource/apps/MySignalApp/signalApp.entity.json b/example/app/data/DemoDataSource/apps/MySignalApp/signalApp.entity.json index a15f55fc3..8f1d0571e 100644 --- a/example/app/data/DemoDataSource/apps/MySignalApp/signalApp.entity.json +++ b/example/app/data/DemoDataSource/apps/MySignalApp/signalApp.entity.json @@ -3,7 +3,7 @@ "name": "signalApp", "type": "AppModels:SignalApp", "description": "This is an app for generating and plotting sin signals.", - "label": "", + "label": "Signal App", "dataSources": [ "AppStorage" ], diff --git a/packages/dm-core-plugins/package.json b/packages/dm-core-plugins/package.json index 844f7814f..0356c1b46 100644 --- a/packages/dm-core-plugins/package.json +++ b/packages/dm-core-plugins/package.json @@ -9,7 +9,6 @@ "@equinor/eds-icons": "^0.19.3", "@equinor/eds-tokens": "^0.9.0", "axios": "^1.4.0", - "golden-layout": "1.5.9", "highlight.js": "^11.8.0", "js-yaml": "^4.1.0", "mermaid": "^10.0.0", diff --git a/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx b/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx index cea165811..dcf9625d7 100644 --- a/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx +++ b/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx @@ -1,16 +1,7 @@ -import React, { useContext } from 'react' -import { - ELayoutComponents, - ILayout, - useLayout, -} from './context/dashboard/useLayout' -import { ModalProvider } from './context/modal/ModalContext' -import { GoldenLayoutComponent } from './components/golden-layout/GoldenLayoutComponent' -import GoldenLayoutPanel from './components/golden-layout/GoldenLayoutPanel' +import React, { useContext, useState } from 'react' import styled from 'styled-components' import { FSTreeContext, - TreeNode, TreeView, EntityView, } from '@development-framework/dm-core' @@ -29,84 +20,32 @@ export const TreeWrapper = styled.div` overflow: auto; ` -function wrapComponent(Component: any) { - class Wrapped extends React.Component { - render() { - return ( - // @ts-ignore - - - - ) - } - } - - return Wrapped -} - -const LAYOUT_CONFIG = { - dimensions: { - headerHeight: 46, - }, - content: [ - { - type: 'stack', - isClosable: false, - }, - ], -} - export default () => { const { treeNodes, loading } = useContext(FSTreeContext) - const layout: ILayout = useLayout() - - const open = (node: TreeNode) => { - if (Array.isArray(node.entity)) { - return - } - layout.operations.add( - node.nodeId, - node?.name || 'None', - ELayoutComponents.blueprint, - { - idReference: node.nodeId, - type: node.entity.type, - } - ) - layout.operations.focus(node.nodeId) - } + const [selectedType, setSelectedType] = useState() + const [selectedEntity, setSelectedEntity] = useState() return ( - -
- - {loading ? ( -
- -
- ) : ( - open(node)} - NodeWrapper={NodeRightClickMenu} - /> - )} - - {/*@ts-ignore*/} - { - myLayout.registerComponent( - ELayoutComponents.blueprint, - wrapComponent(EntityView) - ) - layout.operations.registerLayout({ - myLayout, - }) - }} - /> -
- +
+ + {loading ? ( +
+ +
+ ) : ( + { + setSelectedType(node.type) + setSelectedEntity(node.nodeId) + }} + NodeWrapper={NodeRightClickMenu} + /> + )} + + {selectedType && selectedEntity && ( + + )} +
) } diff --git a/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutComponent.jsx b/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutComponent.jsx deleted file mode 100644 index 6b79da23a..000000000 --- a/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutComponent.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import './goldenLayout-dependencies' -import GoldenLayout from 'golden-layout' -import 'golden-layout/src/css/goldenlayout-base.css' -import 'golden-layout/src/css/goldenlayout-light-theme.css' -import $ from 'jquery' - -export class GoldenLayoutComponent extends React.Component { - state = {} - containerRef = React.createRef() - - render() { - let panels = Array.from(this.state.renderPanels || []) - return ( - // eslint-disable-next-line react/prop-types -
- {panels.map(panel => { - return ReactDOM.createPortal( - panel._getReactComponent(), - panel._container.getElement()[0] - ) - })} -
- ) - } - - componentRender(reactComponentHandler) { - this.setState(state => { - let newRenderPanels = new Set(state.renderPanels) - newRenderPanels.add(reactComponentHandler) - return { renderPanels: newRenderPanels } - }) - } - componentDestroy(reactComponentHandler) { - this.setState(state => { - let newRenderPanels = new Set(state.renderPanels) - newRenderPanels.delete(reactComponentHandler) - return { renderPanels: newRenderPanels } - }) - } - - componentDidUpdate(nextProps) { - this.goldenLayoutInstance.eventHub.emit('props-updated', nextProps) - } - - goldenLayoutInstance = undefined - - componentDidMount() { - // eslint-disable-next-line react/prop-types - this.goldenLayoutInstance = new GoldenLayout( - // eslint-disable-next-line react/prop-types - this.props.config || {}, - // eslint-disable-next-line react/prop-types - this.containerRef.current - ) - // eslint-disable-next-line react/prop-types - if (this.props.registerComponents instanceof Function) - // eslint-disable-next-line react/prop-types - this.props.registerComponents(this.goldenLayoutInstance) - this.goldenLayoutInstance.reactContainer = this - this.goldenLayoutInstance.init() - window.addEventListener('resize', () => { - this.goldenLayoutInstance.updateSize() - }) - } -} - -//Patching internal GoldenLayout.__lm.utils.ReactComponentHandler: - -const ReactComponentHandler = GoldenLayout['__lm'].utils.ReactComponentHandler - -class ReactComponentHandlerPatched extends ReactComponentHandler { - _render() { - var reactContainer = this._container.layoutManager.reactContainer //Instance of GoldenLayoutComponent class - if (reactContainer && reactContainer.componentRender) - reactContainer.componentRender(this) - } - _destroy() { - //ReactDOM.unmountComponentAtNode( this._container.getElement()[ 0 ] ); - this._container.off('open', this._render, this) - this._container.off('destroy', this._destroy, this) - } - - _getReactComponent() { - //the following method is absolute copy of the original, provided to prevent depenency on window.React - var defaultProps = { - glEventHub: this._container.layoutManager.eventHub, - glContainer: this._container, - } - var props = $.extend(defaultProps, this._container._config.props) - return React.createElement(this._reactClass, props) - } -} - -GoldenLayout['__lm'].utils.ReactComponentHandler = ReactComponentHandlerPatched diff --git a/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutPanel.tsx b/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutPanel.tsx deleted file mode 100644 index e36e5c521..000000000 --- a/packages/dm-core-plugins/src/explorer/components/golden-layout/GoldenLayoutPanel.tsx +++ /dev/null @@ -1,56 +0,0 @@ -// @ts-nocheck -import React from 'react' - -class GoldenLayoutPanel extends React.Component { - constructor(props: any) { - super(props) - - this.setProps = this.setProps.bind(this) - this.propsUpdated = this.propsUpdated.bind(this) - } - - state = { - globalState: {}, - updates: 1, - } - - componentDidMount() { - this.props.glEventHub.on('props-updated', this.propsUpdated) - } - - propsUpdated(id: any) { - const { glContainer } = this.props - // @ts-ignore - if (glContainer['_config'].id === id) { - this.setState({ updates: this.state.updates + 1 }) - this.forceUpdate() - } - } - - // componentWillUnmount() { - // this.props.glEventHub.off('props-updated', this.setProps) - // } - - setProps(globalState: any) { - this.setState(globalState) - } - - render() { - const { children } = this.props - - const props = { - ...this.props, - updates: this.state.updates, - } - - return ( - <> - {React.Children.map(children, (child: any) => { - return React.cloneElement(child, props) - })} - - ) - } -} - -export default GoldenLayoutPanel diff --git a/packages/dm-core-plugins/src/explorer/components/golden-layout/LayoutContext.tsx b/packages/dm-core-plugins/src/explorer/components/golden-layout/LayoutContext.tsx deleted file mode 100644 index 3199e7152..000000000 --- a/packages/dm-core-plugins/src/explorer/components/golden-layout/LayoutContext.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react' - -export const LayoutContext = React.createContext({}) - -export enum ELayoutComponents { - blueprint = 'blueprint', - document = 'document', -} - -type Props = { - children: any - layout: any -} - -const isOpen = (layout: any, id: string) => { - return layout.myLayout.root.getItemsById(id).length > 0 -} - -export const LayoutProvider = ({ children, layout }: Props) => { - // TODO: Store layout in local storage? - - const add = ( - id: string, - title: string, - component: ELayoutComponents, - data: object - ) => { - const config = { - title: title, - id: id, - type: 'react-component', - component: component, - props: data, - } - if (!isOpen(layout, id)) { - layout.myLayout.root.contentItems[0].addChild(config) - } - } - - const remove = (id: string) => { - if (isOpen(layout, id)) { - const components = layout.myLayout.root.getItemsById(id) - components.forEach((component: any) => component.remove()) - } - } - - const focus = (id: string) => { - if (isOpen(layout, id)) { - const window = layout.myLayout.root.getItemsById(id)[0] - window.parent.setActiveContentItem(window) - } - } - - const update = (id: string, title: string) => { - if (isOpen(layout, id)) { - const components = layout.myLayout.root.getItemsById(id) - components.forEach((component: any) => component.setTitle(title)) - } - } - - const refresh = (id: string) => { - // TODO: Can this be done better? - if (!id) console.log('An empty ID was given. This will likely break') - if (isOpen(layout, id)) { - const components = layout.myLayout.root.getItemsById(id) - layout.myLayout.eventHub.emit('props-updated', components[0].config.id) - //components[0].remove() - //layout.myLayout.root.contentItems[0].addChild(components[0].config) - } - } - - const refreshByFilter = (filter: string) => { - const components = layout.myLayout.root.getItemsByFilter((item: any) => { - if ('id' in item.config) { - return item.config.id.startsWith(filter) - } else { - return false - } - }) - components.forEach((component: any) => refresh(component.config.id)) - } - - return ( - - {children} - - ) -} diff --git a/packages/dm-core-plugins/src/explorer/components/golden-layout/goldenLayout-dependencies.js b/packages/dm-core-plugins/src/explorer/components/golden-layout/goldenLayout-dependencies.js deleted file mode 100644 index f5a11cf1b..000000000 --- a/packages/dm-core-plugins/src/explorer/components/golden-layout/goldenLayout-dependencies.js +++ /dev/null @@ -1,9 +0,0 @@ -import $ from 'jquery' -import React from 'react' -import ReactDOM from 'react-dom' -window.$ = $ -window.jQuery = $ -window.jquery = $ - -window.ReactDOM = ReactDOM -window.React = React