Implement back to list in circuit detail

src/app/app/virtual-lab/(free)/explore/(interactive)/interactive/(data)/model/circuit/layout.tsx

@@ -15,9 +15,7 @@ export default function ExploreCircuitListingView({ children }: { children: Reac
   return (
     <div className="flex h-full w-full bg-primary-9" id="interactive-data-layout">
       <ErrorBoundary FallbackComponent={SimpleErrorComponent}>
-        <div className="h-full w-full overflow-x-scroll bg-[#F5F5F5] pb-20 text-white">
-          {children}
-        </div>
+        <div className="h-full w-full overflow-x-scroll bg-white pb-20 text-white">{children}</div>
       </ErrorBoundary>
     </div>
   );

src/components/explore-section/Circuit/DetailView/main-detail-view-core.tsx

@@ -4,6 +4,7 @@ import { useSetAtom } from 'jotai';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
+import { DetailsPageSideBackLink } from '../../Sidebar';
 import HeaderDetailView from './header-detail-view';
 import SectionMainContainer from './sections/section-main-container';
 import Visualiser from './visualisation/Visualiser';
@@ -22,7 +23,7 @@ function MainDetailViewCore({
   derivedCircuits: CircuitSchemaProps[] | null;
 }) {
   return (
-    <div className="text-primary-9">
+    <div className="py-10 pl-20 pr-10 text-primary-9">
       <HeaderDetailView content={content} />
       <Visualiser content={content} />
       <SectionMainContainer
@@ -127,15 +128,14 @@ export default function CircuitDetailPage() {
 
   return (
     <div className="relative overflow-y-scroll bg-white">
-      <div className="p-10">
-        {circuitData && (
-          <MainDetailViewCore
-            content={circuitData}
-            parentCircuit={parentCircuitData}
-            derivedCircuits={derivedCircuitsData}
-          />
-        )}
-      </div>
+      <DetailsPageSideBackLink />
+      {circuitData && (
+        <MainDetailViewCore
+          content={circuitData}
+          parentCircuit={parentCircuitData}
+          derivedCircuits={derivedCircuitsData}
+        />
+      )}
     </div>
   );
 }

src/components/explore-section/Circuit/ListView/ExploreCircuitTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useMemo, useEffect, useState } from 'react';
 import { useAtomValue } from 'jotai';
+import { useEffect, useMemo, useState } from 'react';
 import CircuitTable from '../global/circuit-table';
 import { CircuitSchemaProps } from '../type';
 
@@ -97,7 +97,7 @@ export function useFilteredCircuits() {
 
 export default function ExploreCircuitTable({ data }: { data: CircuitSchemaProps[] }) {
   return (
-    <div className="relative flex w-full flex-col bg-white pt-10">
+    <div className="relative flex w-full flex-col bg-white bg-white pt-10">
       <CircuitTable data={data} />
     </div>
   );

src/components/explore-section/Circuit/global/exploreCircuitTable.module.scss

@@ -1,111 +1,68 @@
 .circuitTable {
+  /* Row and cell styles */
   & .ant-table-row {
     display: table-row !important;
     min-height: 40px !important;
+    background: white;
   }
-  & .ant-table-cell {
-    padding: 8px !important; /* Ensure padding doesn’t collapse */
-  }
-}
-
-.nonMatchingRow {
-  opacity: 0.3;
-}
 
-.matchingRow {
-  opacity: 1;
-}
-
-.circuitTable th {
-  width: auto !important;
-}
-
-.circuitTable ant-table-cell:first-child {
-  display: hidden;
-}
-
-.circuitTable ant-table-tbody {
-  background: #fafafa;
-
-  & > tr:last-child > td {
-    border-bottom: 0;
+  /* Header styles */
+  & .ant-table-thead {
+    background: white !important;
   }
-}
-
-.circuitTable ant-table-row {
-  background: #fafafa;
-}
 
-.circuitTable ant-table-thead_th {
-  font-size: 14px;
-  font-weight: normal;
-  color: #8c8c8c;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
+  & .ant-table-thead > tr > th {
+    background: white !important;
+    color: #8c8c8c !important;
+    font-size: 14px !important;
+    font-weight: normal !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    padding: 0 !important;
+    border-bottom: 0 !important;
+    text-align: left !important;
+    white-space: nowrap !important;
+  }
 
-.ant-table-thead > tr > th {
-  border-bottom: 0;
-}
+  & .ant-table-thead > tr > th:hover {
+    background: #f5f5f5 !important;
+  }
 
-.ant-table-expand-icon-col {
-  width: 0 !important;
-  display: hidden !important;
-}
+  /* Cell styles */
+  & .ant-table-cell {
+    padding: 8px !important;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    background: transparent !important;
+  }
 
-// RESIZING
+  /* Table body */
 
-.resize-handle {
-  position: absolute;
-  right: -5px;
-  top: 0;
-  height: 12px;
-  width: 10px;
-  cursor: col-resize;
-  z-index: 1;
-  background: rgba(0, 0, 0, 0.4) !important;
-}
+  & .ant-table-tbody {
+    background: white;
 
-.resize-handle:hover {
-  background: rgba(0, 0, 0, 0.6);
-}
-.react-resizable {
-  position: relative;
-  background-clip: padding-box;
-}
+    & > tr:last-child > td {
+      border-bottom: 0;
+    }
+  }
 
-.react-resizable-handle {
-  position: absolute;
-  width: 10px;
-  height: 100%;
-  bottom: 0;
-  right: -5px;
-  cursor: col-resize;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.2);
+  /* Expand icon column */
+  & .ant-table-expand-icon-col {
+    width: 0 !important;
+    display: none !important;
+  }
 }
 
-.react-resizable-handle:hover {
-  background-color: rgba(0, 0, 0, 0.4);
+.nonMatchingRow {
+  opacity: 0.3;
 }
 
-.subcircuitButtonRow {
-  display: table-row !important;
-  min-height: 40px !important;
-  background-color: yellow !important;
+.matchingRow {
+  opacity: 1;
 }
 
-.expandButton {
-  display: block !important;
-  min-height: 32px !important;
-  width: 100%;
-  text-align: left;
-  color: #1890ff !important; /* Ant Design link color */
-  text-decoration: none !important;
-  padding: 8px 16px !important;
-  font-size: 14px !important;
-
-  &:hover {
-    color: #40a9ff !important;
-  }
+.boldName {
+  font-weight: bold;
 }

src/components/literature-suggestions/literature-suggestions.module.css

@@ -26,12 +26,13 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 1em;
+  border-left: 1px solid var(--color-neutral-4);
 }
 
 .literatureSuggestions[data-collapsed='true'] {
   padding: 0;
-  pading-top: 20px;
-  width: 48px;
+  padding-top: 20px;
+  width: 40px;
 }
 
 .literatureSuggestions > button.header {
@@ -52,8 +53,12 @@
 }
 
 .literatureSuggestions > button.header > h1 {
-  font-size: inherit;
+  position: relative;
+  left: -2px;
+  font-size: 18px;
   font-weight: bold;
+  transform: rotate(180deg);
+  transform-origin: center;
 }
 
 .literatureSuggestions[data-collapsed='true'] > button.header > h1 {

src/components/literature-suggestions/literature-suggestions.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React from 'react';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import React from 'react';
 
-import SuggestedQuestions from './suggested-questions';
+import ErrorPanel from './error';
 import MessageItem from './message-item';
 import Prompt from './prompt';
-import ErrorPanel from './error';
 import { Spinner } from './spinner';
+import SuggestedQuestions from './suggested-questions';
 import { classNames } from '@/util/utils';
 import { useServiceAiAgentChat, useServiceAiAgentThread } from '@/services/ai-agent';
 
@@ -57,7 +57,11 @@ export default function LiteratureSuggestions({ className }: LiteratureSuggestio
         onClick={() => setCollapsedPanel(!collapsedPanel)}
       >
         <h1 title={status}>AI Assistant</h1>
-        {collapsedPanel ? <PlusOutlined /> : <MinusOutlined />}
+        {collapsedPanel ? (
+          <PlusOutlined className="h-[1em] w-[1em]" />
+        ) : (
+          <MinusOutlined className="w-[1em]" />
+        )}
       </button>
       {!collapsedPanel && (
         <>