Circuits format number with comma (#353)

* Removed the component of search bar and filter options

* Formatted numbers in detail view and table

---------

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

Author: loris-olivier-obi

src/components/explore-section/Circuit/DetailView/header/CircuitParameters.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { CircuitSchemaProps } from '../../type';
+import formatNumberWithComma from '../../utils/format-number-with-comma';
 import ParameterBox from '../global/ParameterBox';
 
 export default function CircuitParameters({ content }: { content: CircuitSchemaProps }) {
@@ -19,9 +20,18 @@ export default function CircuitParameters({ content }: { content: CircuitSchemaP
         />
       </div>
       <div className="relative flex flex-col gap-y-4">
-        <ParameterBox name="Number of neurons" value={content.numberOfNeurons} />
-        <ParameterBox name="Number of connections" value={content.numberOfConnections} />
-        <ParameterBox name="Number of synapses" value={content.numberOfSynapses} />
+        <ParameterBox
+          name="Number of neurons"
+          value={formatNumberWithComma(content.numberOfNeurons)}
+        />
+        <ParameterBox
+          name="Number of connections"
+          value={formatNumberWithComma(content.numberOfConnections)}
+        />
+        <ParameterBox
+          name="Number of synapses"
+          value={formatNumberWithComma(content.numberOfSynapses)}
+        />
       </div>
     </div>
   );

src/components/explore-section/Circuit/global/Columns.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { Key, SyntheticEvent } from 'react';
 import { ResizeCallbackData } from 'react-resizable';
 import { CircuitSchemaProps } from '../type';
+import formatNumberWithComma from '../utils/format-number-with-comma';
 
 import { ChevronRight, DownloadIcon } from '@/components/icons';
 import { classNames } from '@/util/utils';
@@ -108,9 +109,31 @@ const columns = (
     {
       title: '# Neurons',
       key: 'numberOfNeurons',
-      width: 130,
+      width: 150,
+      render: (_value: any, record: CircuitSchemaProps, _index: number) => (
+        <div className="whitespace-nowrap font-normal">
+          {formatNumberWithComma(record.numberOfNeurons)}
+        </div>
+      ),
+    },
+    {
+      title: '# Connections',
+      key: 'numberOfConnections',
+      width: 150,
+      render: (_value: any, record: CircuitSchemaProps, _index: number) => (
+        <div className="whitespace-nowrap font-normal">
+          {formatNumberWithComma(record.numberOfConnections)}
+        </div>
+      ),
+    },
+    {
+      title: '# Synapses',
+      key: 'numberOfSynapses',
+      width: 150,
       render: (_value: any, record: CircuitSchemaProps, _index: number) => (
-        <div className="whitespace-nowrap font-normal">{record.numberOfNeurons}</div>
+        <div className="whitespace-nowrap font-normal">
+          {formatNumberWithComma(record.numberOfSynapses)}
+        </div>
       ),
     },
     {

src/components/explore-section/Circuit/utils/format-number-with-comma.ts

@@ -0,0 +1,7 @@
+const formatNumberWithComma = (num: number) => {
+  const formattedValue = new Intl.NumberFormat('en-US').format(num);
+
+  return formattedValue;
+};
+
+export default formatNumberWithComma;