How to use the golden-layout function in golden-layout

componentDidMount() {
        if (this.container) {
            // create the layout
            this.composerLayout = new GoldenLayout(this.props.layout, this.container);
            this.composerLayout.registerComponent('testComponent', (container, componentState) => {
                container.getElement().html('<h2>' + componentState.label + '</h2>');
            });
            this.composerLayout.init();
        }
    }

} else {
      $timeout(() => { $scope.loadingScreenClass = 'hide-first-time'; }, 4000);
    }
    const storedLayouts = localStorage.getItem('mt2-layouts');
    if (storedLayouts) {
      this.layouts = JSON.parse(storedLayouts);
      migrateLayouts(this.layouts);
    }

    // temp "fix" for https://github.com/WolframHempel/golden-layout/issues/418
    _.each(this.layouts, layout => this.fixActiveIndexes(layout));
    const currentProfile = localStorage.getItem('mt2-currentProfile');
    if (currentProfile) this.selectedProfile = parseInt(currentProfile, 10);
    else this.selectedProfile = 0;

    const layout = new GoldenLayout(this.getCurrentLayout(), $('#layout-container'));
    this.layout = layout;

    const AngularModuleComponent = (container, state) => {
      const html = windowTemplates[state.templateId];
      const element = container.getElement();

      element.html(html);

      const linkFun = $compile(element);
      const newScope = $scope.$new(true, $scope);
      newScope.container = container;
      if (state.templateId === 'chatTemplate') {
        if (!_.find(this.config.settings.chatPresets, preset => preset.id === state.preset)) {
          if (this.config.settings.chatPresets.length > 0) {
            state.preset = this.config.settings.chatPresets[0].id;
          } else {

createGoldenLayoutInstance(config, container, onModified) {
        dashboardLayout = new GoldenLayout(config, container);
        // TODO identify an event which invokes when a component gets manipulated
        return dashboardLayout;
    }

};

        function wrapComponent(Component, store) {
            class Wrapped extends React.Component {
                render() {
                    return (
                        
                            
                        
                    );
                }
            }
            return Wrapped;
        };

        var layout = new GoldenLayout(config, this.layout);
        layout.registerComponent('IncrementButtonContainer', 
                                 wrapComponent(IncrementButtonContainer, this.context.store)
        );
        layout.registerComponent('DecrementButtonContainer',
                                 wrapComponent(DecrementButtonContainer, this.context.store)
        );
        layout.registerComponent('TestComponentContainer',
                                 wrapComponent(TestComponentContainer, this.context.store)
        );
        layout.init();

        window.addEventListener('resize', () => {
            layout.updateSize();
        });
    }

__gotDiv(div : ?HTMLElement) {
        if (div && !this.state.goldenLayout) {
            const layout = new GoldenLayout({ content: [] }, div);
            layout.init();
            layout.on('initialised', () => {
                if (this.state.goldenLayout === layout) return;

                const goldenLayoutResizer = () => {
                    layout.updateSize();
                };

                window.addEventListener('resize', goldenLayoutResizer);
                this.setState({
                    goldenLayout: layout,
                    goldenLayoutResizer
                });
                if (this.props.goldenLayoutRef)
                    this.props.goldenLayoutRef(layout);
            });

componentDidMount() {
    this.goldenLayoutInstance = new GoldenLayout(
      this.props.config || {},
      this.containerRef.current
    );

    eventService.initialize(this.goldenLayoutInstance.eventHub);

    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions);
    if (this.props.registerComponents instanceof Function) {
      this.props.registerComponents(this.goldenLayoutInstance);
    }

    this.goldenLayoutInstance.reactContainer = this;
    this.goldenLayoutInstance.init();
    this.goldenLayoutInstance.on("tabCreated", this.props.onTabCreated);
    this.goldenLayoutInstance.on("itemDestroyed", () => this.updateDimensions());

initLayout(coreLayouts) {
    if (!findDOMNode(this)) return;
    if (this.layout) {
      this.layout.destroy();
    }
    let config = JSON.parse(
      coreLayouts.find(s => s.name === this.state.layout).config
    );
    config = this.traverseConfig(config);
    this.layout = new GoldenLayout(
      config,
      findDOMNode(this).querySelector("#core-layout")
    );
    this.layout.registerComponent("core-wrapper", CoreWrapper);

    this.layout.on("stateChanged", evt => {
      const mutation = gql`
        mutation UpdateCoreLayout($layout: CoreLayoutInput) {
          updateCoreLayout(layout: $layout)
        }
      `;
      const variables = {
        layout: {
          id: coreLayouts.find(c => c.name === this.state.layout).id,
          config: JSON.stringify(this.layout.toConfig())
        }

*  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing,
 *  software distributed under the License is distributed on an
 *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 *  KIND, either express or implied.  See the License for the
 *  specific language governing permissions and limitations
 *  under the License.
 *
 */

import GoldenLayout from 'golden-layout';

let dashboardLayout = new GoldenLayout();
let registeredWidgetsCount = 0;
let widgets = new Map();
let widgetCount = 0;
let finishedRegisteringCallback;

function registerWidget(widgetId, widgetObj) {

    if (!widgets.get(widgetId)) {
        widgets.set(widgetId, widgetObj);
        dashboardLayout.registerComponent(widgetId, widgets.get(widgetId));
        registeredWidgetsCount++;
        if (registeredWidgetsCount === widgetCount) {
            finishedRegisteringCallback ? finishedRegisteringCallback(true) : "";
            global.dashboard.universalWidgetList.map(universalWidget => {
                if (widgets.get("UniversalGadget")) {
                    dashboardLayout.registerComponent(universalWidget, widgets.get("UniversalGadget"));

const goldenLayoutSetup = function(root) {
  var config = {
    content: [{
      type: "row",
      content: [{
        title: "Help",
        type: "component",
        componentName: "help-text",
        componentState: {text: "Component 1"}
      }]
    }]
  };

  myLayout = new GoldenLayout(config, root);

  myLayout.registerComponent("help-text", function(container, state) {
    registerComponentWithCallback(container, state, createReactHelp);
  });

  myLayout.registerComponent("react-counter", function(container, state) {
    registerComponentWithCallback(container, state, createReactCounter);
  });

  myLayout.registerComponent("named-react-counter", function(container, state) {
    registerComponentWithCallback(container, state, createNamedReactCounter);
  });

  myLayout.on("beforeItemDestroyed", function(event) {
    if (event.isComponent) {
      var state = event.config.componentState;

componentWillMount() {
        this.layout = new GoldenLayout({
            content: [{
                type: 'row',
                content:[{
                    type: 'column',
                    content:[{
                        type:'react-component',
                        component: 'NodeEditor',
                        id: 'NodeEditor',
                        props: {}
                    }]
                }]
            }]
        });

        this.layout.registerComponent( 'NodeEditor', NodeEditor);