feat: attempted performance improvements powerbi (#624)

* feat: attempted performance improvements powerbi * Prettified Code! * add preload * Prettified Code! * testing bootstrap (hacky code) * Prettified Code! * refactor * Prettified Code! * fix typings * refactor styled components * Prettified Code! * bump versions --------- Co-authored-by: Gustav-Eikaas <Gustav-Eikaas@users.noreply.github.com>
equinor · May 23, 2024 · 8ac254e · 8ac254e
1 parent 4f536ec
commit 8ac254e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 10 deletions.
diff --git a/packages/power-bi/package.json b/packages/power-bi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-powerbi",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/power-bi/src/lib/components/PowerBi.tsx b/packages/power-bi/src/lib/components/PowerBi.tsx
@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';
 import { Loading } from './loading';
 import { chevron_down, chevron_up } from '@equinor/eds-icons';
 import { Icon } from '@equinor/eds-core-react';
@@ -10,7 +10,9 @@ import { PowerBiController } from '../classes';
 import { Report } from './report/Report';
 
 import React from 'react';
-import { models } from 'powerbi-client';
+import { models, factories, service } from 'powerbi-client';
+import styled from 'styled-components';
+import { StyledLoadingWrapper } from './loading/loading.styles';
 
 Icon.add({ chevron_down, chevron_up });
 
@@ -34,6 +36,7 @@ export const PowerBi = (props: PowerBiProps) => {
   const { reportUri, ErrorComponent } = props;
   return (
     <QueryClientProvider client={client}>
+      <PowerBiBootstrap />
       <Suspense fallback={<Loading />}>
         <QueryErrorResetBoundary>
           {({ reset }) => (
@@ -49,3 +52,45 @@ export const PowerBi = (props: PowerBiProps) => {
     </QueryClientProvider>
   );
 };
+
+const StyledPowerBiBootstrap = styled.div`
+  visbility: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+`;
+
+/**
+ * Initializes preloading of iframe javascript resources
+ */
+function PowerBiBootstrap() {
+  const isBootstrapped = useRef(false);
+
+  return (
+    <StyledPowerBiBootstrap
+      id="pbi-bootstrap"
+      ref={(ref) => {
+        if (!ref || isBootstrapped.current == true) return;
+        new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory).bootstrap(ref, {
+          embedUrl: 'https://app.powerbi.com/reportEmbed',
+          type: 'report',
+          settings: {
+            panes: {
+              filters: {
+                expanded: false,
+                visible: false,
+              },
+              pageNavigation: {
+                visible: false,
+              },
+            },
+          },
+          tokenType: 1,
+        });
+        isBootstrapped.current = true;
+      }}
+    />
+  );
+}
diff --git a/packages/power-bi/src/lib/components/report/Report.tsx b/packages/power-bi/src/lib/components/report/Report.tsx
@@ -1,34 +1,59 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { FusionPowerBiToken, FusionEmbedConfig } from '../../types';
 
 import { IReportEmbedConfiguration, models } from 'powerbi-client';
 import { LoadedReport } from '../loadedReport/LoadedReport';
 import { PowerBiProps } from '../PowerBi';
+import { CircularProgress } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+
+const StyledLoadingWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`;
 
 export function Report({ getEmbedInfo, getToken, reportUri, controller, filters, bookmark }: PowerBiProps) {
-  const { data: token } = useSuspenseQuery<FusionPowerBiToken>({
+  const { data: token, isLoading: isTokenLoading } = useQuery<FusionPowerBiToken>({
     queryKey: [reportUri, 'token'],
     queryFn: ({ signal }) => getToken(reportUri, signal),
     refetchInterval: (query) => generateRefetchInterval(query.state.data),
     retry: false,
     refetchOnWindowFocus: true,
   });
 
-  const { data: embed } = useSuspenseQuery({
+  const { data: embed, isLoading: isEmbedLoading } = useQuery({
     queryKey: [reportUri, 'embed'],
     queryFn: async ({ signal }) => {
-      const { embedUrl, reportId } = await getEmbedInfo(reportUri, token!.token, signal);
-      return generateEmbedConfig({ embedUrl, reportId }, token!.token, filters);
+      const { embedUrl, reportId } = await getEmbedInfo(reportUri, '', signal);
+      return {
+        embedUrl,
+        reportId,
+      };
     },
   });
 
+  if (isTokenLoading || isEmbedLoading) {
+    return (
+      <StyledLoadingWrapper>
+        <CircularProgress size={48} />
+      </StyledLoadingWrapper>
+    );
+  }
+
   if (!embed) {
     throw new Error('No embed');
   }
 
+  if (!token) {
+    throw new Error('No token');
+  }
+
   return (
     <LoadedReport
-      config={embed}
+      config={generateEmbedConfig(embed, token.token, filters)}
       onReportReady={(rep) => {
         if (bookmark) {
           rep.bookmarksManager.applyState(bookmark);

diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "9.0.6",
+  "version": "9.0.7",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",