feat(brain): particles list

src/components/search/Spark/Meta/Meta.module.scss

@@ -5,15 +5,10 @@
 
   // temp
   z-index: 1;
-
   font-size: 14px;
 
   & > :first-child {
     position: relative;
     top: 4px;
   }
 }
-
-.size {
-  white-space: nowrap;
-}

src/components/search/Spark/Meta/Meta.tsx

@@ -1,10 +1,7 @@
-import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
-import { formatCurrency } from 'src/utils/utils';
-import { PREFIXES } from 'src/containers/ipfs/components/metaInfo';
 import { useNavigate } from 'react-router-dom';
 import { routes } from 'src/routes';
-import { useEffect } from 'react';
 import useCyberlinksCount from 'src/features/cyberlinks/hooks/useCyberlinksCount';
+import ParticleSize from 'src/features/particle/ParticleSize/ParticleSize';
 import Links from './Links/Links';
 import styles from './Meta.module.scss';
 
@@ -13,18 +10,10 @@ type Props = {
 };
 
 function Meta({ cid }: Props) {
-  const { content, fetchParticle } = useQueueIpfsContent(cid);
-
   const { data: count } = useCyberlinksCount(cid);
 
-  useEffect(() => {
-    fetchParticle && (async () => fetchParticle(cid))();
-  }, [cid, fetchParticle]);
-
   const navigate = useNavigate();
 
-  const size = content?.meta?.size;
-
   return (
     <div className={styles.meta}>
       <Links
@@ -35,11 +24,7 @@ function Meta({ cid }: Props) {
         }}
       />
 
-      {size && (
-        <span className={styles.size}>
-          🟥 {formatCurrency(size, 'B', 0, PREFIXES)}
-        </span>
-      )}
+      <ParticleSize cid={cid} />
     </div>
   );
 }

src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx

@@ -1,23 +1,22 @@
 import { Account } from 'src/components';
-import { timeSince, formatCurrency } from 'src/utils/utils';
+import { timeSince } from 'src/utils/utils';
 import useRank from 'src/features/cyberlinks/rank/useRank';
 import { Link } from 'react-router-dom';
 import { routes } from 'src/routes';
+import ParticleSize from 'src/features/particle/ParticleSize/ParticleSize';
 import {
   LLMAvatar,
   useIsLLMPageParam,
 } from 'src/containers/Search/LLMSpark/LLMSpark';
 import useGetCreator from '../../hooks/useGetCreator';
-import { PREFIXES } from '../metaInfo';
 import styles from './AdviserMeta.module.scss';
 
 type Props = {
   cid: string;
   type: string | undefined;
-  size: number | bigint | undefined;
 };
 
-function AdviserMeta({ cid, type, size }: Props) {
+function AdviserMeta({ cid, type }: Props) {
   const { creator } = useGetCreator(cid);
   const rank = useRank(cid);
 
@@ -62,9 +61,7 @@ function AdviserMeta({ cid, type, size }: Props) {
       )}
 
       <div className={styles.right}>
-        <span>
-          🟥 {size ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
-        </span>
+        <ParticleSize cid={cid} />
         <Link to={routes.robot.routes.soul.path}>🌓</Link>
       </div>
     </div>

src/containers/ipfs/ipfs.tsx

@@ -26,6 +26,7 @@ function Ipfs() {
   const { setAdviser } = useAdviser();
 
   const isText = useMemo(() => !query.match(PATTERN_IPFS_HASH), [query]);
+
   useEffect(() => {
     if (!isReady) {
       return;
@@ -41,7 +42,7 @@ function Ipfs() {
       })();
     }
   }, [isText, isReady, query, ipfsApi, isIpfsInitialized]);
-  useEffect(() => {}, [details]);
+
   useEffect(() => {
     if (!status) {
       return;
@@ -61,14 +62,7 @@ function Ipfs() {
         'yellow'
       );
     } else if (status === 'completed') {
-      setAdviser(
-        <AdviserMeta
-          cid={cid}
-          type={details?.type}
-          size={content?.meta?.size || details?.content?.length}
-        />,
-        'purple'
-      );
+      setAdviser(<AdviserMeta cid={cid} type={details?.type} />, 'purple');
     }
   }, [details, setAdviser, cid, content, status]);
 

src/features/cyberlinks/hooks/useCyberlinksCount.ts

@@ -4,7 +4,7 @@ const getVar = (type: 'from' | 'to', cid: string, neuron) => {
   return { [`particle_${type}`]: { _eq: cid }, neuron: { _eq: neuron } };
 };
 
-function useCyberlinksCount(cid: string, neuron) {
+function useCyberlinksCount(cid: string, neuron?: string) {
   const toCountQuery = useCyberlinksCountByParticleQuery({
     variables: { where: getVar('to', cid, neuron) },
   });

src/features/particle/ParticleSize/ParticleSize.module.scss

@@ -0,0 +1,3 @@
+.size {
+  white-space: nowrap;
+}

src/features/particle/ParticleSize/ParticleSize.tsx

@@ -0,0 +1,36 @@
+import { formatCurrency } from 'src/utils/utils';
+import { PREFIXES } from 'src/containers/ipfs/components/metaInfo';
+import useParticle from '../../../hooks/useParticle';
+import styles from './ParticleSize.module.scss';
+
+// for future use if no UI needed
+// eslint-disable-next-line import/no-unused-modules
+export function useParticleSize(cid: string) {
+  const { content, details, status } = useParticle(cid);
+
+  const size = content?.meta?.size || details?.content?.length;
+
+  return {
+    size,
+    isLoading: status === 'pending' || status === 'executing',
+  };
+}
+
+function ParticleSize({ cid }: { cid: string }) {
+  const { isLoading, size } = useParticleSize(cid);
+
+  let content;
+
+  if (isLoading) {
+    // use Loading component
+    content = 'loading...';
+  } else if (size) {
+    content = formatCurrency(size, 'B', 0, PREFIXES);
+  } else {
+    content = 'unknown';
+  }
+
+  return <span className={styles.size}>🟥 {content}</span>;
+}
+
+export default ParticleSize;

src/generated/graphql.ts

@@ -8843,6 +8843,13 @@ export type CyberlinksCountByNeuronQueryVariables = Exact<{
 
 export type CyberlinksCountByNeuronQuery = { cyberlinks_aggregate: { aggregate?: { count: number } | null } };
 
+export type CyberlinksCountByNeuron2QueryVariables = Exact<{
+  address?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type CyberlinksCountByNeuron2Query = { cyberlinks_aggregate: { aggregate?: { count: number } | null } };
+
 export type CyberlinksCountByParticleQueryVariables = Exact<{
   cid?: InputMaybe<Scalars['String']['input']>;
   where?: InputMaybe<Cyberlinks_Bool_Exp>;
@@ -8883,6 +8890,22 @@ export type MessagesByAddressSenseWsSubscriptionVariables = Exact<{
 
 export type MessagesByAddressSenseWsSubscription = { messages_by_address: Array<{ transaction_hash: string, index: any, value: any, type: string, transaction?: { success: boolean, memo?: string | null, block: { timestamp: any, height: any } } | null }> };
 
+export type ParticlesQueryVariables = Exact<{
+  neuron?: InputMaybe<Scalars['String']['input']>;
+  limit?: InputMaybe<Scalars['Int']['input']>;
+  offset?: InputMaybe<Scalars['Int']['input']>;
+}>;
+
+
+export type ParticlesQuery = { particles: Array<{ id: number, particle: string, timestamp: any, transaction_hash: string }> };
+
+export type ParticlesAggregateQueryVariables = Exact<{
+  neuron?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type ParticlesAggregateQuery = { particles_aggregate: { aggregate?: { count: number } | null } };
+
 export type TransactionCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -9213,6 +9236,48 @@ export type CyberlinksCountByNeuronQueryHookResult = ReturnType<typeof useCyberl
 export type CyberlinksCountByNeuronLazyQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuronLazyQuery>;
 export type CyberlinksCountByNeuronSuspenseQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuronSuspenseQuery>;
 export type CyberlinksCountByNeuronQueryResult = Apollo.QueryResult<CyberlinksCountByNeuronQuery, CyberlinksCountByNeuronQueryVariables>;
+export const CyberlinksCountByNeuron2Document = gql`
+    query CyberlinksCountByNeuron2($address: String) {
+  cyberlinks_aggregate(where: {neuron: {_eq: $address}}) {
+    aggregate {
+      count
+    }
+  }
+}
+    `;
+
+/**
+ * __useCyberlinksCountByNeuron2Query__
+ *
+ * To run a query within a React component, call `useCyberlinksCountByNeuron2Query` and pass it any options that fit your needs.
+ * When your component renders, `useCyberlinksCountByNeuron2Query` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCyberlinksCountByNeuron2Query({
+ *   variables: {
+ *      address: // value for 'address'
+ *   },
+ * });
+ */
+export function useCyberlinksCountByNeuron2Query(baseOptions?: Apollo.QueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+      }
+export function useCyberlinksCountByNeuron2LazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+        }
+export function useCyberlinksCountByNeuron2SuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+        }
+export type CyberlinksCountByNeuron2QueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2Query>;
+export type CyberlinksCountByNeuron2LazyQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2LazyQuery>;
+export type CyberlinksCountByNeuron2SuspenseQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2SuspenseQuery>;
+export type CyberlinksCountByNeuron2QueryResult = Apollo.QueryResult<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>;
 export const CyberlinksCountByParticleDocument = gql`
     query cyberlinksCountByParticle($cid: String, $where: cyberlinks_bool_exp) {
   cyberlinks_aggregate(where: $where) {
@@ -9412,6 +9477,93 @@ export function useMessagesByAddressSenseWsSubscription(baseOptions?: Apollo.Sub
       }
 export type MessagesByAddressSenseWsSubscriptionHookResult = ReturnType<typeof useMessagesByAddressSenseWsSubscription>;
 export type MessagesByAddressSenseWsSubscriptionResult = Apollo.SubscriptionResult<MessagesByAddressSenseWsSubscription>;
+export const ParticlesDocument = gql`
+    query particles($neuron: String, $limit: Int = 10, $offset: Int = 0) {
+  particles(where: {neuron: {_eq: $neuron}}, limit: $limit, offset: $offset) {
+    id
+    particle
+    timestamp
+    transaction_hash
+  }
+}
+    `;
+
+/**
+ * __useParticlesQuery__
+ *
+ * To run a query within a React component, call `useParticlesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useParticlesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useParticlesQuery({
+ *   variables: {
+ *      neuron: // value for 'neuron'
+ *      limit: // value for 'limit'
+ *      offset: // value for 'offset'
+ *   },
+ * });
+ */
+export function useParticlesQuery(baseOptions?: Apollo.QueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+      }
+export function useParticlesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+        }
+export function useParticlesSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+        }
+export type ParticlesQueryHookResult = ReturnType<typeof useParticlesQuery>;
+export type ParticlesLazyQueryHookResult = ReturnType<typeof useParticlesLazyQuery>;
+export type ParticlesSuspenseQueryHookResult = ReturnType<typeof useParticlesSuspenseQuery>;
+export type ParticlesQueryResult = Apollo.QueryResult<ParticlesQuery, ParticlesQueryVariables>;
+export const ParticlesAggregateDocument = gql`
+    query particlesAggregate($neuron: String) {
+  particles_aggregate(where: {neuron: {_eq: $neuron}}) {
+    aggregate {
+      count
+    }
+  }
+}
+    `;
+
+/**
+ * __useParticlesAggregateQuery__
+ *
+ * To run a query within a React component, call `useParticlesAggregateQuery` and pass it any options that fit your needs.
+ * When your component renders, `useParticlesAggregateQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useParticlesAggregateQuery({
+ *   variables: {
+ *      neuron: // value for 'neuron'
+ *   },
+ * });
+ */
+export function useParticlesAggregateQuery(baseOptions?: Apollo.QueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+      }
+export function useParticlesAggregateLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+        }
+export function useParticlesAggregateSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+        }
+export type ParticlesAggregateQueryHookResult = ReturnType<typeof useParticlesAggregateQuery>;
+export type ParticlesAggregateLazyQueryHookResult = ReturnType<typeof useParticlesAggregateLazyQuery>;
+export type ParticlesAggregateSuspenseQueryHookResult = ReturnType<typeof useParticlesAggregateSuspenseQuery>;
+export type ParticlesAggregateQueryResult = Apollo.QueryResult<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>;
 export const TransactionCountDocument = gql`
     query transactionCount {
   transaction_aggregate {

src/pages/robot/Brain/Brain.tsx

@@ -8,6 +8,7 @@ import TreedView from './ui/TreedView';
 import styles from './Brain.module.scss';
 import GraphView from './ui/GraphView';
 import useGraphLimit from './useGraphLimit';
+import Particles from './ui/Particles/Particles';
 
 enum TabsKey {
   graph3d = 'graph3d',
@@ -56,6 +57,11 @@ function Brain() {
               to: './list',
               text: 'last cyberlinks',
             },
+            {
+              key: TabsKey.list,
+              to: './particles',
+              text: 'particles',
+            },
           ]}
           selected={selected}
         />
@@ -71,6 +77,7 @@ function Brain() {
         ))}
 
         <Route path="list" element={<TreedView address={address} />} />
+        <Route path="particles" element={<Particles />} />
 
         <Route path="graph3d" element={<GraphView address={address} />} />
       </Routes>

src/pages/robot/Brain/ui/Particles/Particles.module.scss

@@ -0,0 +1,5 @@
+.particleContent {
+  max-height: 60px;
+  display: block;
+  overflow: auto;
+}