Circuit detail view hero image preview section

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

@@ -1,10 +1,12 @@
 import { CircuitSchemaProps } from '../type';
 import HeaderDetailView from './HeaderDetailView';
+import Visualiser from './visualisation/Visualiser';
 
 export default function MainDetailViewCore({ content }: { content: CircuitSchemaProps }) {
   return (
     <div className="relative flex w-full flex-col text-primary-9">
       <HeaderDetailView content={content} />
+      <Visualiser content={content} />
     </div>
   );
 }

src/components/explore-section/Circuit/DetailView/visualisation/Visualiser.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import { CircuitSchemaProps } from '../../type';
+import placeholderImage from './circuit-preview-image_01.jpg';
+
+export default function Visualiser({ content }: { content: CircuitSchemaProps }) {
+  const imageUrl = content.overview.mainDisplay[0].url;
+
+  return (
+    <div
+      id="visualiser"
+      className="relative my-24 flex w-full items-center justify-center overflow-hidden bg-white"
+    >
+      <Image
+        src={imageUrl || placeholderImage}
+        width={1920}
+        height={1080}
+        alt={`Image of the circuit ${content.name}`}
+        className="relative z-10 select-none transition-all duration-300 ease-out"
+        priority
+      />
+    </div>
+  );
+}

src/components/explore-section/Circuit/type/index.tsx

@@ -29,7 +29,8 @@ export type CircuitSchemaProps = {
   key: string;
   name: string;
   description: string;
-  parent?: string;
+  parent?: string | null;
+  derivedFrom: string[];
   hasSubcircuits: boolean;
   brainRegion: string;
   species: string;
@@ -38,11 +39,11 @@ export type CircuitSchemaProps = {
   numberOfSynapses: number;
   metadata: {
     contributorSimple?: string;
-    contributor?: string;
+    contributor?: string | null;
     contributingInstitution?: string;
     registrationDate?: string;
     revision: number | null;
-    createdBy: string;
+    createdBy: string | null;
     creationDate: string;
     license: {
       name: string;
@@ -55,24 +56,33 @@ export type CircuitSchemaProps = {
     key: string;
     isAvailable: boolean;
   }[];
-  subcircuits: CircuitSchemaProps[] | null;
+  subcircuits: CircuitSchemaProps[];
 
-  // TO BE REVISED
-  provenance: {
-    isASubcircuit: boolean;
-    subcircuitOf: string | null;
-    literature: PaperLitteratureProps[];
-  };
-  relatedPublications: PaperLitteratureProps[];
-  images: {
-    low?: string | null;
-    normal?: string | null;
-    high: string | null;
-  };
   overview: {
-    cellStatistics: GraphDataImageProps[];
-    networkStatistics: GraphDataImageProps[];
+    mainDisplay: {
+      name: string;
+      url: string;
+    }[];
+    cellStatistics: {
+      name: string;
+      url: string;
+    }[];
+    networkStatistics: {
+      name: string;
+      url: string;
+    }[];
   };
+
+  literature: {
+    category: string;
+    title: string;
+    authors: string;
+    doi: string;
+    url: string;
+    journal: string;
+    publicationDate: string;
+    abstract: string;
+  }[];
 };
 
 export type CircuitCellValue = {