Fix detailed view scroll and top level layout

src/app/app/virtual-lab/(free)/explore/(interactive)/interactive/(data)/model/circuit/[id]/page.tsx

@@ -1,114 +1,5 @@
-'use client';
-
-import { useSetAtom } from 'jotai';
-import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
-import MainDetailViewCore from '@/components/explore-section/Circuit/DetailView/MainDetailViewCore';
-import { CircuitSchemaProps } from '@/components/explore-section/Circuit/type';
-import { buildCircuitMap } from '@/components/explore-section/Circuit/utils/circuits-map';
-import { brainRegionSidebarIsCollapsedAtom } from '@/state/brain-regions';
+import CircuitDetails from '@/components/explore-section/Circuit/DetailView/MainDetailViewCore';
 
 export default function CircuitDetailPage() {
-  const setBrainRegionSidebarIsCollapsed = useSetAtom(brainRegionSidebarIsCollapsedAtom);
-  const params = useParams();
-
-  const [circuitData, setCircuitData] = useState<CircuitSchemaProps | null>(null);
-  const [parentCircuitData, setParentCircuitData] = useState<CircuitSchemaProps | null>(null);
-  const [derivedCircuitsData, setDerivedCircuitsData] = useState<CircuitSchemaProps[] | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const circuitKey = params.id as string | undefined;
-
-  useEffect(() => {
-    const fetchCircuit = async () => {
-      if (!circuitKey) {
-        setError('No existing circuit');
-        setLoading(false);
-        return;
-      }
-
-      setBrainRegionSidebarIsCollapsed(true);
-
-      try {
-        setLoading(true);
-        const response = await fetch('/api/explore-circuits/data', {
-          cache: 'no-store',
-        });
-
-        if (!response.ok) {
-          throw new Error(`Error: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        if (data.error || !Array.isArray(data.circuits)) {
-          throw new Error(data.error || 'Invalid response from API');
-        }
-
-        const { circuits } = data;
-        const circuitMap = buildCircuitMap(circuits);
-
-        // Current Circuit content
-        const matchingCircuit = circuitMap.get(circuitKey);
-        if (!matchingCircuit) {
-          throw new Error(`Circuit with key ${circuitKey} not found!`);
-        }
-
-        // Parent Circuit content
-        let parentCircuit: CircuitSchemaProps | null = null;
-        if (matchingCircuit.parent) {
-          parentCircuit = circuitMap.get(matchingCircuit.parent) || null;
-        }
-
-        // Derived Circuit content
-        const derivedCircuits: CircuitSchemaProps[] = matchingCircuit.derivedFrom
-          .map((key: string) => circuitMap.get(key))
-          .filter(
-            (circuit: CircuitSchemaProps | undefined): circuit is CircuitSchemaProps => !!circuit
-          );
-
-        setCircuitData(matchingCircuit);
-        setParentCircuitData(parentCircuit);
-        setDerivedCircuitsData(derivedCircuits);
-      } catch (er) {
-        setError(
-          er instanceof Error ? er.message : 'An error occurred while fetching the circuit data'
-        );
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchCircuit();
-  }, [circuitKey]);
-
-  if (loading) {
-    return (
-      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-primary-9">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-red-600">
-        {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative flex w-full flex-col bg-white p-10">
-      {circuitData && (
-        <MainDetailViewCore
-          content={circuitData}
-          parentCircuit={parentCircuitData}
-          derivedCircuits={derivedCircuitsData}
-        />
-      )}
-    </div>
-  );
+  return <CircuitDetails />;
 }

src/app/app/virtual-lab/lab/[virtualLabId]/project/[projectId]/explore/interactive/(data)/model/circuit/[id]/page.tsx

@@ -0,0 +1,5 @@
+import CircuitDetails from '@/components/explore-section/Circuit/DetailView/MainDetailViewCore';
+
+export default function CircuitDetailPage() {
+  return <CircuitDetails />;
+}

src/components/explore-section/Circuit/DetailView/HeaderDetailView.tsx

@@ -4,7 +4,7 @@ import Heading from './header/Heading';
 
 export default function HeaderDetailView({ content }: { content: CircuitSchemaProps }) {
   return (
-    <header className="relative flex w-full flex-col gap-y-16">
+    <header className="flex w-full flex-col gap-y-16">
       <Heading content={content} />
       <CircuitData content={content} />
     </header>

src/components/explore-section/Circuit/DetailView/MainDetailViewCore.tsx

@@ -1,9 +1,17 @@
-import { CircuitSchemaProps } from '../type';
+'use client';
+
+import { useSetAtom } from 'jotai';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
 import HeaderDetailView from './HeaderDetailView';
 import SectionMainContainer from './sections/SectionMainContainer';
 import Visualiser from './visualisation/Visualiser';
+import { CircuitSchemaProps } from '@/components/explore-section/Circuit/type';
+import { buildCircuitMap } from '@/components/explore-section/Circuit/utils/circuits-map';
+import { brainRegionSidebarIsCollapsedAtom } from '@/state/brain-regions';
 
-export default function MainDetailViewCore({
+function MainDetailViewCore({
   content,
   parentCircuit,
   derivedCircuits,
@@ -13,7 +21,7 @@ export default function MainDetailViewCore({
   derivedCircuits: CircuitSchemaProps[] | null;
 }) {
   return (
-    <div className="relative flex w-full flex-col text-primary-9">
+    <div className="text-primary-9">
       <HeaderDetailView content={content} />
       <Visualiser content={content} />
       <SectionMainContainer
@@ -24,3 +32,109 @@ export default function MainDetailViewCore({
     </div>
   );
 }
+
+export default function CircuitDetailPage() {
+  const setBrainRegionSidebarIsCollapsed = useSetAtom(brainRegionSidebarIsCollapsedAtom);
+  const params = useParams();
+
+  const [circuitData, setCircuitData] = useState<CircuitSchemaProps | null>(null);
+  const [parentCircuitData, setParentCircuitData] = useState<CircuitSchemaProps | null>(null);
+  const [derivedCircuitsData, setDerivedCircuitsData] = useState<CircuitSchemaProps[] | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const circuitKey = params.id as string | undefined;
+
+  useEffect(() => {
+    const fetchCircuit = async () => {
+      if (!circuitKey) {
+        setError('No existing circuit');
+        setLoading(false);
+        return;
+      }
+
+      setBrainRegionSidebarIsCollapsed(true);
+
+      try {
+        setLoading(true);
+        const response = await fetch('/api/explore-circuits/data', {
+          cache: 'no-store',
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (data.error || !Array.isArray(data.circuits)) {
+          throw new Error(data.error || 'Invalid response from API');
+        }
+
+        const { circuits } = data;
+        const circuitMap = buildCircuitMap(circuits);
+
+        // Current Circuit content
+        const matchingCircuit = circuitMap.get(circuitKey);
+        if (!matchingCircuit) {
+          throw new Error(`Circuit with key ${circuitKey} not found!`);
+        }
+
+        // Parent Circuit content
+        let parentCircuit: CircuitSchemaProps | null = null;
+        if (matchingCircuit.parent) {
+          parentCircuit = circuitMap.get(matchingCircuit.parent) || null;
+        }
+
+        // Derived Circuit content
+        const derivedCircuits: CircuitSchemaProps[] = matchingCircuit.derivedFrom
+          .map((key: string) => circuitMap.get(key))
+          .filter(
+            (circuit: CircuitSchemaProps | undefined): circuit is CircuitSchemaProps => !!circuit
+          );
+
+        setCircuitData(matchingCircuit);
+        setParentCircuitData(parentCircuit);
+        setDerivedCircuitsData(derivedCircuits);
+      } catch (er) {
+        setError(
+          er instanceof Error ? er.message : 'An error occurred while fetching the circuit data'
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCircuit();
+  }, [circuitKey]);
+
+  if (loading) {
+    return (
+      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-primary-9">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-red-600">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative overflow-y-scroll bg-white">
+      <div className="p-10">
+        {circuitData && (
+          <MainDetailViewCore
+            content={circuitData}
+            parentCircuit={parentCircuitData}
+            derivedCircuits={derivedCircuitsData}
+          />
+        )}
+      </div>
+    </div>
+  );
+}