Persistent unused panels (always keep alive)

[p3yman]

Is your feature request related to a problem? Please describe. Hello 👋 I'm working on a project that changes the layout using dockviewApi.fromJSON to load different layouts but from a fixed list of panels. So, in one layout I could have only one panel visible and in another, I have 2 columns of 3 and 2 panels side by side. These panels show iframes which is important to be kept alive on changing the layout. The current state of DockView to my understanding is that using fromJSON will cause removing all the extra panels. Is there any way around it?

Describe the solution you'd like I'm not sure what's the best solution here. I saw #397 but it seems it's not available anymore.

Describe alternatives you've considered I'm trying to see if using portals and mirroring (somehow) could work here. Or maybe move the extra ones to a floating group and hide that.

[mathuo]

You can render a panel as always visible which will prevent the element being unmounted and instead this element will be absolutly positions and hidden as required (which prevents things like iframe unload issues). Some docs on that are here

That state is persisted when calling toJSON() however fromJSON() will entirely replace the layout, is that the point you are trying to make? That you are interested in keeping state alive when calling fromJSON() if those panels already exist?

[p3yman]

Hi @mathuo , My exact problem is that I need to re-call the fromJSON but it'll kill everything. I tried implementing a manual algo to first make everything floating (adding panels, moving them to a floating group, and hide using CSS) and then parse the tree and whenever see a panel use moveTo instead of addPanel and it works. Just not the prettiest thing. Maybe a helper like rearrangeFromJSON that does the same thing in a better way.

[artaommahe]

@mathuo we have the similar issue. We have the set of panels, some of them are terminals (xtermjs) or iframes to some stuff inside a sandbox (like a web application), and we want to add a 'Reset layout' button so when user messed up with it they can return back to the initial state (we don't allow to remove panels btw). With the current implementation of the dockview all panels are destroyed and then re-created (fromJSON call), so the state of iframes is lost.

[p3yman]

@mathuo any thoughts on this?

[artaommahe]

just in case, i've ended up with this copy of dockviewApi.fromJSON implementation that just moves panels around without re-creating them. But we're not shipping it cause it relies too much on dockview's internal api and will break frequently on lib's updates

export const setDockviewLayout = (dockviewApi: DockviewApi, layout: SerializedDockview) => {
  const { width, height } = dockviewApi;

  // move all current panels to a float group
  const [firstPanel, ...restPanels] = dockviewApi.panels;
  dockviewApi.addFloatingGroup(firstPanel);
  const floatingGroup = firstPanel.group;
  restPanels.forEach(panel => panel.api.moveTo({ group: floatingGroup }));

  (dockviewApi['component']['gridview'] as Gridview).deserialize(layout.grid, {
    fromJSON: (node: ISerializedLeafNode<GroupPanelViewState>) => {
      const { id, views, activeView } = node.data;

      if (typeof id !== 'string') {
        throw new Error('group id must be of type string');
      }

      const group = dockviewApi['component'].createGroup({ id });

      dockviewApi['component']._onDidAddGroup.fire(group);

      let activePanel: IDockviewPanel | undefined;

      for (const child of views) {
        const panel = dockviewApi.getPanel(child);

        if (!panel) {
          return;
        }

        panel.api.moveTo({ group });

        if (activeView === panel.id) {
          activePanel = panel;
        }
      }

      activePanel?.api.setActive();

      if (!group.activePanel && group.panels.length > 0) {
        const panel = group.panels[group.panels.length - 1];
        panel.api.setActive();
      }

      return group;
    },
  });

  dockviewApi.layout(width, height, true);

  dockviewApi['component']._onDidLayoutFromJSON.fire();
};

[mathuo]

Let me try a couple of approaches, I think we can integrate such behaviours into the deserialization methods.

[p3yman]

@mathuo really appreciate it

[tsaiDavid]

Let me try a couple of approaches, I think we can integrate such behaviours into the deserialization methods.

Hi @mathuo - really great library, I'm wondering if you've been able to make any progress or experiment with this further, curious how we could help you push this forward, this is an important feature for us. I'd love to be able to effectively "merge" updates and update with declarative presets of sorts as opposed to managing things manually.

I'd love to be able to take it a step further - not only have a fixed set of panels to work with, but dynamically being able to add/remove panels that are detected as part of a diff w/ the current layout.

cc: @crubier

[mathuo]

I have this PR from a while back when I was messing around with the idea. The fromJson method takes an optional second parameter of {keepExistingPanels: true}. Is this along the lines of what you are thinking?

https://github.com/mathuo/dockview/pull/778