Componisation of circuit table (#308)

* Added the component CircuitTable

* Added columns and installed react-resizable

* Added subcircuit, button and resizable columns

* Added utils to filter

* Added use-filtered-data

* Added the filter for circuits

* Style for the circuit table

* Corrected the api path with circuits plural

* Remove console log

* Integrated the CircuitTable component in list view

* Ran linter and prettier

* Component for circuit page in both free and paid account + fixed some feedbacks from Pavlo

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>

Author: loris-olivier-obi

package-lock.json

@@ -103,6 +103,7 @@
     "react-markdown": "^9.0.3",
     "react-pdf": "^7.7.0",
     "react-plotly.js": "^2.6.0",
+    "react-resizable": "^3.0.5",
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.6.1",
     "sharp": "^0.33.5",
@@ -125,6 +126,7 @@
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.3",
     "@types/react-plotly.js": "^2.6.0",
+    "@types/react-resizable": "^3.0.8",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/three": "^0.152.1",
     "@typescript-eslint/eslint-plugin": "^7.7.0",

package.json

@@ -13,7 +13,7 @@ export default function CircuitDetailPage() {
   const [error, setError] = useState<string | null>(null);
 
   const params = useParams();
-  const circuitKey = params?.key as string | undefined;
+  const circuitKey = params.key as string | undefined;
 
   useEffect(() => {
     const fetchCircuit = async () => {
@@ -25,7 +25,7 @@ export default function CircuitDetailPage() {
 
       try {
         setLoading(true);
-        const response = await fetch('/api/circuit/data', {
+        const response = await fetch('/api/circuits/data', {
           cache: 'no-store',
         });
 

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

@@ -1,14 +1,5 @@
-import ExploreCircuitTable from '@/components/explore-section/Circuit/ListView/ExploreCircuitTable';
-
-export type ColumnType = {
-  name: string;
-  description: string;
-  brainRegion: string;
-  createdBy: string;
-  creationDate: string;
-  hasSubcircuits: boolean;
-};
+import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/CircuitsListingPageComponent';
 
 export default function ExploreModelCircuitListingPage() {
-  return <ExploreCircuitTable />;
+  <CircuitsListingPageComponent />;
 }

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

@@ -1,14 +1,5 @@
-import ExploreCircuitTable from '@/components/explore-section/Circuit/ListView/ExploreCircuitTable';
-
-export type ColumnType = {
-  name: string;
-  description: string;
-  brainRegion: string;
-  createdBy: string;
-  creationDate: string;
-  hasSubcircuits: boolean;
-};
+import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/CircuitsListingPageComponent';
 
 export default function ExploreModelCircuitListingPage() {
-  return <ExploreCircuitTable />;
+  <CircuitsListingPageComponent />;
 }