https://www.gooddata.com/ logo
Join Slack
Powered by
Hello, I'm trying to manipulate the dashboard layo...
# gooddata-ui
b
Hello, I'm trying to manipulate the dashboard layout using 
removeLayoutSection
and 
addLayoutSection
through 
useDispatchDashboardCommand
inside a 
CustomDashboardWidgetComponent
While I'm able to remove/add dashboard sections, it takes ages to load (actually it take longer for 
addLayoutSection
to dispatch than it takes to initially load the complete dashboard with all sections). But once a section has been loaded once with 
addLayoutSection
, consecutive loads are almost instant (yet they are stashed after the initial complete dashboard loading so even the first switch should be instant). Now I tried various things with the dashboard stash, by passing identifiers to 
removeLayoutSection
but the results are inconsistent, I've managed to magically make it works once (as it: the very first switch toward an unseen yet section was instant), but I can't reproduce it (even though I can see the items in the dashboard stash thanks to the event listeners). The type description of 
StashedDashboardItemsId
states: > Identifier of a stashed dashboard items. When removing one or more item, the caller may decide to 'stash' these items under some identifier. This stashed items can then be used in subsequent command that places items on the layout by providing the stash identifier. But as far as I'm aware, none of the commands to add things to the dashboard layout accept a stashIdentifier as param (be it 
addLayoutSection
or 
addSectionItem
).
For reference here is the register function for the dashboard:
Copy code
register(
    _ctx: DashboardContext,
    customize: IDashboardCustomizer,
    _eventing: IDashboardEventHandling,
  ) {
    _eventing.subscribeToStateChanges((s) => {
      const stash = selectStash(s);
      console.log(stash);
    });
    customize
      .customWidgets()
      .addCustomWidget("sectionManager", SectionManagerWidget);
    customize.layout().customizeFluidLayout((layout, customizer) => {
      customizer.addSection(
        0,
        newDashboardSection(
          // "Section manager",
          undefined,
          newDashboardItem(
            newCustomWidget("sectionManager", "sectionManager", {
              sections: layout.sections,
            }),
            {
              xl: {
                gridWidth: 12,
                gridHeight: 2,
              },
            },
          ),
        ),
      );
    });
  }
And here is the CustomWidget:
Copy code
const SectionManagerWidget: CustomDashboardWidgetComponent = (
  props: React.PropsWithChildren<
    IDashboardWidgetProps & {
      widget?: ExtendedDashboardWidget & {
        sections?: IDashboardLayoutSection<ExtendedDashboardWidget>[];
      };
    }
  >,
) => {
  const allSections = props.widget?.sections;
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const addSection = useDispatchDashboardCommand(addLayoutSection);
  const removeSection = useDispatchDashboardCommand(removeLayoutSection);
  const toggleSection = (
    section: IDashboardLayoutSection<ExtendedDashboardWidget>,
  ) => {
    removeSection(1, `section-${currentIndex}`);
    addSection(1, section.header, section.items);
    setCurrentIndex(allSections?.indexOf(section) ?? 0);
  };

  useEffect(() => {
    if (allSections && allSections.length > 1) {
      allSections.forEach((section, i) => {
        if (i > 0) {
          removeSection(2, `section-${i}`);
        }
      });
    }
  }, []);

  if (!allSections || allSections.length <= 1) {
    return null;
  }
  return (
    <Box display="flex" alignItems="center" justifyContent="space-evenly">
      {allSections.map((section, i) => (
        <Button key={`section-${i}`} onClick={() => toggleSection(section)}>{`${
          section.header?.title || `Section ${i + 1}`
        }`}</Button>
      ))}
    </Box>
  );
};
Here's the network side of the dashboard loading (roughly 15s total, including backend boot, with charts starting to be displayed around 5s)
And here's what we get when removing & adding 1 section (40s to get something displayed)
r
Hi Bastien, Radek from the GoodData technical team here 🙂 Could you PM me a HAR file of the slow section add/remove? Many thanks!
b
Hello, sadly I didn't save the HAR back then and took a tangent for my problem and solved it by combining 
removeLayoutSection
and 
undoLayoutChanges
. So I don't have the old code anymore although it should be easily reproducible with the above sample. For anyone interested in the solution: instead of removing unwantend sections then trying to add previously removed ones, I use 
undoLayoutChanges
to cancel all removals up to the initial dashboard state, and then remove the "new" unwanted ones.
r
That's a really nice solution, glad you got it sorted Bastien 🙌
Open in Slack
PreviousNext
Powered by