feat(views): flatten view component hierarchy

Fix duplicate POST requests to /api/view/... caused by two independent
fetch paths for each section:

1. ViewSection had its own useQuery call to fetch section data for
   rendering.
2. useAggregatedViewVariables was already fetching the same sections
   via useQueries for variable aggregation.

Because the two query keys differed ("view-result" vs "view-variables"),
React Query could not deduplicate them, resulting in 2×N requests for
a view with N sections. The primary (non-aggregator) view also went
through ViewSection and triggered a redundant fetch even though
useViewData had already loaded that data via getViewDataById.

The fix centralises all section fetching inside
useAggregatedViewVariables, which now returns a sectionData Map
(data/isLoading/error per section). ViewSection no longer fetches
anything; it receives viewData as a prop. ViewContent renders the
primary view directly from viewResult via <View />, skipping the
extra fetch entirely.

Also replace the unstable object-based React Query key with a
deterministically sorted, URL-encoded effectiveVariablesKey string
to prevent spurious cache misses on re-renders.

Author: adityathebe

src/components/HomepageRedirect.tsx

@@ -17,8 +17,8 @@ import {
   UUID_REGEX
 } from "./dashboardViewConstants";
 
-const SingleView = React.lazy(
-  () => import("../pages/views/components/SingleView")
+const ViewContainer = React.lazy(
+  () => import("../pages/views/components/ViewContainer")
 );
 
 async function resolveViewId(value: string): Promise<string | undefined> {
@@ -59,7 +59,7 @@ export function HomepageRedirect() {
   if (resolvedViewId) {
     return (
       <Suspense fallback={<FullPageSkeletonLoader />}>
-        <SingleView id={resolvedViewId} />
+        <ViewContainer id={resolvedViewId} />
       </Suspense>
     );
   }

src/components/__tests__/HomepageRedirect.unit.test.tsx

@@ -20,7 +20,7 @@ jest.mock("../../api/services/views", () => ({
   getViewIdByNamespaceAndName: jest.fn()
 }));
 
-jest.mock("../../pages/views/components/SingleView", () => ({
+jest.mock("../../pages/views/components/ViewContainer", () => ({
   __esModule: true,
   default: ({ id }: { id: string }) => (
     <div data-testid="single-view" data-view-id={id}>

src/pages/config/details/ConfigDetailsViewPage.tsx

@@ -2,7 +2,7 @@ import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDeta
 import { useParams } from "react-router-dom";
 import { Loading } from "@flanksource-ui/ui/Loading";
 import { useViewData } from "@flanksource-ui/pages/views/hooks/useViewData";
-import ViewWithSections from "@flanksource-ui/pages/views/components/ViewWithSections";
+import ViewContent from "@flanksource-ui/pages/views/components/ViewContent";
 import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 
 export function ConfigDetailsViewPage() {
@@ -17,6 +17,7 @@ export function ConfigDetailsViewPage() {
     error,
     aggregatedVariables,
     currentVariables,
+    sectionData,
     handleForceRefresh
   } = useViewData({
     viewId: viewId!,
@@ -42,8 +43,9 @@ export function ConfigDetailsViewPage() {
             <ErrorViewer error={error} className="max-w-3xl" />
           </div>
         ) : viewResult ? (
-          <ViewWithSections
+          <ViewContent
             viewResult={viewResult}
+            sectionData={sectionData}
             aggregatedVariables={aggregatedVariables}
             currentVariables={currentVariables}
             hideVariables

src/pages/views/ViewPage.tsx

@@ -6,7 +6,7 @@ import {
   getViewIdByName
 } from "../../api/services/views";
 
-const SingleView = React.lazy(() => import("./components/SingleView"));
+const ViewContainer = React.lazy(() => import("./components/ViewContainer"));
 
 /**
  * ViewPage supports the following routes:
@@ -102,7 +102,7 @@ export function ViewPage() {
         </div>
       }
     >
-      <SingleView id={viewId} />
+      <ViewContainer id={viewId} />
     </Suspense>
   );
 }

src/pages/views/components/SingleView.tsx …pages/views/components/ViewContainer.tsxsrc/pages/views/components/SingleView.tsx renamed to src/pages/views/components/ViewContainer.tsx src/pages/views/components/SingleView.tsx renamed to src/pages/views/components/ViewContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Age from "../../../ui/Age/Age";
 import ViewLayout from "./ViewLayout";
-import ViewWithSections from "./ViewWithSections";
+import ViewContent from "./ViewContent";
 import { useViewData } from "../hooks/useViewData";
 import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 import {
@@ -12,18 +12,19 @@ import {
   DialogTitle
 } from "@flanksource-ui/components/ui/dialog";
 
-interface SingleViewProps {
+interface ViewContainerProps {
   id: string;
 }
 
-const SingleView: React.FC<SingleViewProps> = ({ id }) => {
+const ViewContainer: React.FC<ViewContainerProps> = ({ id }) => {
   const {
     viewResult,
     isLoading,
     isFetching,
     error,
     aggregatedVariables,
     currentVariables,
+    sectionData,
     handleForceRefresh
   } = useViewData({ viewId: id });
   const [refreshErrorOpen, setRefreshErrorOpen] = useState(false);
@@ -115,9 +116,10 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
           )
         }
       >
-        <ViewWithSections
+        <ViewContent
           className="flex h-full w-full flex-1 flex-col overflow-y-auto px-6"
           viewResult={viewResult}
+          sectionData={sectionData}
           aggregatedVariables={aggregatedVariables}
           currentVariables={currentVariables}
         />
@@ -126,4 +128,4 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   );
 };
 
-export default SingleView;
+export default ViewContainer;

…es/views/components/ViewWithSections.tsx …c/pages/views/components/ViewContent.tsxsrc/pages/views/components/ViewWithSections.tsx renamed to src/pages/views/components/ViewContent.tsx src/pages/views/components/ViewWithSections.tsx renamed to src/pages/views/components/ViewContent.tsx

@@ -2,41 +2,37 @@ import React from "react";
 import ViewSection from "./ViewSection";
 import GlobalFiltersForm from "../../audit-report/components/View/GlobalFiltersForm";
 import GlobalFilters from "../../audit-report/components/View/GlobalFilters";
+import View from "../../audit-report/components/View/View";
 import { VIEW_VAR_PREFIX } from "../constants";
 import type { ViewResult, ViewVariable } from "../../audit-report/types";
+import type { SectionDataEntry } from "../hooks/useAggregatedViewVariables";
 
-interface ViewWithSectionsProps {
+interface ViewContentProps {
   className?: string;
   viewResult: ViewResult;
+  sectionData?: Map<string, SectionDataEntry>;
   aggregatedVariables?: ViewVariable[];
   currentVariables?: Record<string, string>;
   hideVariables?: boolean;
 }
 
-const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
+const ViewContent: React.FC<ViewContentProps> = React.memo(
   ({
     viewResult,
     className,
+    sectionData,
     aggregatedVariables,
     currentVariables,
     hideVariables
   }) => {
-    const { namespace, name, panels, columns } = viewResult;
+    const { panels, columns } = viewResult;
 
     const isAggregatorView =
       viewResult.sections &&
       viewResult.sections.length > 0 &&
       !panels &&
       !columns;
 
-    const primaryViewSection = {
-      title: viewResult.title || name,
-      viewRef: {
-        namespace: namespace || "",
-        name: name
-      }
-    };
-
     const showVariables =
       !hideVariables && aggregatedVariables && aggregatedVariables.length > 0;
 
@@ -56,20 +52,26 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
 
         {!isAggregatorView && (
           <div className="mt-2">
-            <ViewSection
-              key={`${namespace || "default"}:${name}`}
-              section={primaryViewSection}
+            <View
+              title=""
+              namespace={viewResult.namespace}
+              name={viewResult.name}
+              columns={viewResult.columns}
+              columnOptions={viewResult.columnOptions}
+              panels={viewResult.panels}
+              table={viewResult.table}
+              variables={viewResult.variables}
+              card={viewResult.card}
+              requestFingerprint={viewResult.requestFingerprint}
+              currentVariables={currentVariables}
               hideVariables
-              variables={currentVariables}
-              sectionKeySuffix={`primary-${namespace || "default"}:${name}`}
             />
           </div>
         )}
 
         {viewResult?.sections && viewResult.sections.length > 0 && (
           <>
             {viewResult.sections.map((section, index) => {
-              // Generate a unique key based on section type
               const baseKey = section.viewRef
                 ? `${section.viewRef.namespace || "default"}:${section.viewRef.name}`
                 : section.uiRef?.changes
@@ -78,14 +80,21 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
                     ? `configs:${section.title}`
                     : `section:${section.title}`;
               const sectionKey = `${baseKey}:${index}`;
+              const viewRefKey = section.viewRef
+                ? `${section.viewRef.namespace || ""}:${section.viewRef.name}`
+                : undefined;
+              const sectionEntry = viewRefKey
+                ? sectionData?.get(viewRefKey)
+                : undefined;
 
               return (
                 <div key={sectionKey} className="mt-4">
                   <ViewSection
                     section={section}
-                    hideVariables
+                    viewData={sectionEntry?.data}
+                    isLoading={sectionEntry?.isLoading}
+                    error={sectionEntry?.error}
                     variables={currentVariables}
-                    sectionKeySuffix={sectionKey}
                   />
                 </div>
               );
@@ -97,4 +106,4 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
   }
 );
 
-export default ViewWithSections;
+export default ViewContent;