Use separate entrypoints for report/survey to optimize report loading time

compendium-frontend/src/App.tsx

-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 import { createBrowserRouter, RouterProvider, Outlet, useLocation } from "react-router-dom";
 import Providers from "./Providers";
 import { ConnectivityPage, ServiceCategory } from "./Schema";
@@ -67,12 +67,6 @@ import NetworkWeatherMapPage from "./pages/Network/WeatherMap";
 // Services Matrix
 import ServicesPage from "./pages/Services/Services";
 
-// Survey pages
-import SurveyLanding from "./survey/Landing";
-import SurveyContainerComponent from "./survey/SurveyContainerComponent";
-import SurveyManagementComponent from "./survey/management/SurveyManagementComponent";
-import UserManagementComponent from "./survey/management/UserManagementComponent";
-
 const GlobalLayout = () => {
   // this component is needed to provide a global layout for the app, including the navbar and footer,
   // and make them part of the react-router-dom context
@@ -93,6 +87,21 @@ const GlobalLayout = () => {
   )
 }
 
+const RedirectToSurvey = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // Only redirect if we're not already on a survey path
+    if (!pathname.startsWith('/survey')) {
+      window.location.replace(`/survey${pathname}`);
+    } else {
+      window.location.replace(pathname);
+    }
+  }, [pathname]);
+
+  return <Landing />
+}
+
 const router = createBrowserRouter([
   {
     "path": "",
@@ -161,18 +170,12 @@ const router = createBrowserRouter([
       { path: "/service-management-framework", element: <ServiceManagementFrameworkPage /> },
       { path: "/service-level-targets", element: <ServiceLevelTargetsPage /> },
       { path: "/corporate-strategy", element: <CorporateStrategyPage /> },
-      { path: "survey/admin/surveys", element: <SurveyManagementComponent /> },
-      { path: "survey/admin/users", element: <UserManagementComponent /> },
-      { path: "survey/admin/inspect/:year", element: <SurveyContainerComponent loadFrom={"/api/response/inspect/"} /> },
-      { path: "survey/admin/try/:year", element: <SurveyContainerComponent loadFrom={"/api/response/try/"} /> },
-      { path: "survey/response/:year/:nren", element: <SurveyContainerComponent loadFrom={"/api/response/load/"} /> },
-      { path: "survey/*", element: <SurveyLanding /> },
+      { path: "/survey/*", element: <RedirectToSurvey /> },
       { path: "*", element: <Landing /> },
     ]
   }
 ]);
 
-
 function App(): ReactElement {
   return (
     <div className="app">

compendium-frontend/src/components/DataPage.tsx

@@ -9,7 +9,6 @@ import { Sections } from "../helpers/constants";
 import PolicySidebar from "./sidebar/PolicySidebar";
 
 import { Chart as ChartJS } from 'chart.js';
-import { usePreview } from "../helpers/usePreview";
 import NetworkSidebar from "./sidebar/NetworkSidebar";
 import ConnectedUsersSidebar from "./sidebar/ConnectedUsersSidebar";
 import ServicesSidebar from "./sidebar/ServicesSidebar";
@@ -34,8 +33,7 @@ interface inputProps {
 }
 
 function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement {
-    const { setPreview } = useContext(PreviewContext);
-    const preview = usePreview();
+    const { preview, setPreview } = useContext(PreviewContext);
     const locationWithoutPreview = window.location.origin + window.location.pathname;
 
     const { trackPageView } = useMatomo()

compendium-frontend/src/index.tsx

-
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from "./App";

compendium-frontend/src/survey/App.tsx

+import { useEffect } from "react";
+import { createBrowserRouter, RouterProvider, Outlet, useLocation } from "react-router-dom";
+import Providers from "../Providers";
+import ExternalPageNavBar from "../components/global/ExternalPageNavBar";
+import GeantFooter from "../components/global/GeantFooter";
+import PrivacyModal from "../matomo/PrivacyModal";
+
+import SurveyLanding from "./Landing";
+import SurveyContainerComponent from "./SurveyContainerComponent";
+import SurveyManagementComponent from "./management/SurveyManagementComponent";
+import UserManagementComponent from "./management/UserManagementComponent";
+
+const RedirectToReport = ({ pathname }) => {
+
+    useEffect(() => {
+        console.log(pathname)
+        // Only redirect if we're not already on a survey path
+        if (!pathname.startsWith('/survey')) {
+            window.location.replace(`${pathname}`);
+        }
+    }, [pathname]);
+
+    return null;
+}
+
+const GlobalLayout = () => {
+    // this component is needed to provide a global layout for the app, including the navbar and footer,
+    // and make them part of the react-router-dom context
+    const { pathname } = useLocation();
+    // hacky workaround for supporting a landing page on the root path, as well as any undefined path
+    const hasOutlet = pathname !== "/survey"
+    return (
+        <>
+            <Providers>
+                <RedirectToReport pathname={pathname} />
+                <ExternalPageNavBar />
+                <main className="grow">
+                    {hasOutlet ? <Outlet /> : <SurveyLanding />}
+                </main>
+                <PrivacyModal />
+            </Providers>
+            <GeantFooter />
+        </>
+    )
+}
+
+const router = createBrowserRouter([
+    {
+        "path": "",
+        "element": <GlobalLayout />,
+        "children": [
+            { path: "/survey/admin/surveys", element: <SurveyManagementComponent /> },
+            { path: "/survey/admin/users", element: <UserManagementComponent /> },
+            { path: "/survey/admin/inspect/:year", element: <SurveyContainerComponent loadFrom={"/api/response/inspect/"} /> },
+            { path: "/survey/admin/try/:year", element: <SurveyContainerComponent loadFrom={"/api/response/try/"} /> },
+            { path: "/survey/response/:year/:nren", element: <SurveyContainerComponent loadFrom={"/api/response/load/"} /> },
+            { path: "*", element: <SurveyLanding /> },
+        ]
+    }
+])
+
+function App() {
+    return (
+        <div className="app">
+            <RouterProvider router={router} />
+        </div>
+    );
+}
+
+export default App
+

compendium-frontend/src/survey/index.tsx

+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from "./App";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../main.scss';
+
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
\ No newline at end of file

compendium-frontend/survey.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Compendium Survey</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/survey/index.tsx"></script>
+</body>
+</html>
\ No newline at end of file

compendium-frontend/vite.config.ts

@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react'
 import license from 'rollup-plugin-license'
 import path from 'path'
 
-const ReactCompilerConfig = { 
+const ReactCompilerConfig = {
     target: "19"
 };
 const outDir = path.resolve(__dirname, '..', 'compendium_v2', 'static');
@@ -22,7 +22,7 @@ export default defineConfig({
             }
         }), license({
             thirdParty: {
-                output: path.join(outDir, 'bundle.js.LICENSE.txt')
+                output: path.resolve(__dirname, 'third-party-licenses.txt'),
             }
         })],
     base: isProduction ? '/static/' : '/',
@@ -53,22 +53,21 @@ export default defineConfig({
         outDir: outDir,
         sourcemap: process.env.NODE_ENV !== 'production',
         rollupOptions: {
+            input: {
+                report: path.resolve(__dirname, 'index.html'),
+                survey: path.resolve(__dirname, 'survey.html'),
+            },
             output: {
-                entryFileNames: "bundle.js",
+                entryFileNames: '[name].js',
                 assetFileNames: function (assetInfo) {
                     const names = assetInfo.names;
                     if (names.some(name => name.endsWith('.css'))) {
-                        // put all css into a single file
-                        return 'bundle.css';
+                        return '[name].[ext]';
                     }
                     return '[hash].[ext]';
 
                 },
-                //split surveyjs and chartjs into separate chunks, they are large and not always needed
-                manualChunks: {
-                    survey: ['survey-react-ui', 'survey-core'],
-                    report: ['chart.js', 'chartjs-plugin-datalabels', 'cartesian-product-multiple-arrays'],
-                },
+                manualChunks: undefined,
                 chunkFileNames: '[name]-[hash].js',
             },
         },

compendium_v2/routes/default.py

@@ -67,7 +67,7 @@ def survey_index(path):
 
     # fallback to serving the SPA through index.html for all other requests
     # https://flask.palletsprojects.com/en/2.0.x/patterns/singlepageapplications/
-    return current_app.send_static_file("index.html")
+    return current_app.send_static_file("survey.html")
 
 
 @routes.route('/version', methods=['GET', 'POST'])