@xyo-network/react-archivist 2.49.7 → 2.49.9

package/src/components/Card/components/ArchivistParents.tsx

@@ -0,0 +1,43 @@
+import ArrowRightRoundedIcon from '@mui/icons-material/ArrowRightRounded'
+import { Collapse, IconButton, List, Paper, Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { ArchivistConfig } from '@xyo-network/archivist'
+import { useState } from 'react'
+
+import { ArchivistParent } from './ArchivistParent'
+
+export interface ArchivistParentsProps extends FlexBoxProps {
+  config?: ArchivistConfig
+}
+
+export const ArchivistParents: React.FC<ArchivistParentsProps> = ({ config, ...props }) => {
+  const [parentArchivistCollapse, setParentArchivistCollapse] = useState(false)
+
+  const { commit, read, write } = config?.parents ?? {}
+
+  return (
+    <>
+      {commit || read || write ? (
+        <FlexCol alignItems="start" {...props}>
+          <span onClick={() => setParentArchivistCollapse(!parentArchivistCollapse)}>
+            <Typography variant="subtitle2" sx={{ cursor: 'pointer', display: 'inline-block' }}>
+              Parents
+            </Typography>
+            <IconButton size="small">
+              <ArrowRightRoundedIcon sx={{ rotate: parentArchivistCollapse ? '90deg' : '0deg', transition: 'all .25s' }} />
+            </IconButton>
+          </span>
+          <Collapse in={parentArchivistCollapse}>
+            <Paper elevation={2}>
+              <List>
+                <ArchivistParent archivistType="Commit" parentArchivists={commit} />
+                <ArchivistParent archivistType="Read" parentArchivists={read} />
+                <ArchivistParent archivistType="Write" parentArchivists={write} />
+              </List>
+            </Paper>
+          </Collapse>
+        </FlexCol>
+      ) : null}
+    </>
+  )
+}

package/src/components/Card/components/Stats/ArchivistStats.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { Account } from '@xyo-network/account'
+import { BoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
+import { Payload } from '@xyo-network/payload-model'
+
+import { ArchivistStats } from './ArchivistStats'
+
+const account = new Account()
+const payload = () => ({ schema: 'network.xyo.payload', timestamp: Date.now() })
+const boundWitness = () => new BoundWitnessBuilder().payload(payload()).witness(account).build()
+
+const StorybookEntry = {
+  component: ArchivistStats,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'modules/archivist/ArchivistStats',
+} as Meta<typeof ArchivistStats>
+
+const Template: StoryFn<typeof ArchivistStats> = (props) => <ArchivistStats {...props} />
+
+const Default = Template.bind({})
+const WithStats = Template.bind({})
+WithStats.args = {
+  addresses: { [account.addressValue.hex]: 1 },
+  boundWitnesses: [boundWitness() as unknown as Payload],
+  payloads: [payload(), boundWitness() as unknown as Payload],
+  schemas: { 'network.xyo.boundwitness': 1, 'network.xyo.payload': 1 },
+}
+
+export { Default, WithStats }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Card/components/Stats/ArchivistStats.tsx

@@ -0,0 +1,47 @@
+import { Badge, Tooltip } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { Payload } from '@xyo-network/payload-model'
+import { BsFileEarmarkCode } from 'react-icons/bs'
+import { VscOrganization, VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
+
+export interface ArchivistStatsProps {
+  addresses?: Record<string, number>
+  boundWitnesses?: Payload[] | null
+  payloads?: Payload[] | null
+  schemas?: Record<string, number>
+}
+
+export const ArchivistStats: React.FC<ArchivistStatsProps> = ({ addresses = {}, boundWitnesses, payloads, schemas = {} }) => {
+  return (
+    <FlexRow gap={2} mr={0.5}>
+      {payloads?.length ? (
+        <Tooltip title="Payloads">
+          <Badge badgeContent={payloads?.length} color="primary">
+            <VscSymbolNamespace size={20} />
+          </Badge>
+        </Tooltip>
+      ) : null}
+      {boundWitnesses?.length ? (
+        <Tooltip title="Blocks">
+          <Badge badgeContent={boundWitnesses?.length} color="primary">
+            <VscSymbolMethod size={20} />
+          </Badge>
+        </Tooltip>
+      ) : null}
+      {Object.entries(schemas).length ? (
+        <Tooltip title="Schemas">
+          <Badge badgeContent={Object.entries(schemas).length} color="primary">
+            <BsFileEarmarkCode size={20} />
+          </Badge>
+        </Tooltip>
+      ) : null}
+      {Object.entries(addresses).length ? (
+        <Tooltip title="Addresses">
+          <Badge badgeContent={Object.entries(addresses).length} color="primary">
+            <VscOrganization size={20} />
+          </Badge>
+        </Tooltip>
+      ) : null}
+    </FlexRow>
+  )
+}

package/src/components/Card/components/Stats/MemoryArchivistStats.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
+import { Account } from '@xyo-network/account'
+import { ArchivistInsertQuerySchema, ArchivistModule, ArchivistWrapper, MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
+import { QueryBoundWitnessBuilder } from '@xyo-network/module'
+import { useState } from 'react'
+
+import { MemoryArchivistsStats } from './MemoryArchivistStats'
+
+const StorybookEntry = {
+  component: MemoryArchivistsStats,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'modules/archivist/MemoryArchivistsStats',
+} as Meta<typeof MemoryArchivistsStats>
+
+const Template: StoryFn<typeof MemoryArchivistsStats> = () => {
+  const [module, setModule] = useState<ArchivistModule>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (!module) {
+        const newParentModule = await MemoryArchivist.create()
+        const newModule = await MemoryArchivist.create({
+          config: {
+            name: 'MemoryArchivist',
+            parents: { commit: [newParentModule.address], read: [newParentModule.address], write: [newParentModule.address] },
+            schema: MemoryArchivistConfigSchema,
+          },
+        })
+        const payload = { schema: 'network.xyo.payload' }
+        const insertQuery = { schema: ArchivistInsertQuerySchema }
+        const account = new Account()
+        const [insertQueryBoundWitness, payloads] = new QueryBoundWitnessBuilder({ inlinePayloads: true })
+          .payloads([insertQuery, payload])
+          .witness(account)
+          .query(insertQuery)
+          .build()
+        const wrapper = ArchivistWrapper.wrap(newModule, account)
+        await wrapper.insert([insertQueryBoundWitness, ...payloads])
+        if (mounted()) {
+          setModule(newModule)
+        }
+      }
+    },
+    [module],
+  )
+
+  return <MemoryArchivistsStats archivist={module} />
+}
+
+const Default = Template.bind({})
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Card/components/Stats/MemoryArchivistStats.tsx

@@ -0,0 +1,70 @@
+import { useAsyncEffect } from '@xylabs/react-async-effect'
+import { ArchivistAllQuerySchema, ArchivistModule } from '@xyo-network/archivist'
+import { BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import { BoundWitnessWrapper } from '@xyo-network/boundwitness-wrapper'
+import { EventUnsubscribeFunction } from '@xyo-network/module'
+import { Payload } from '@xyo-network/payload-model'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { ArchivistStats } from './ArchivistStats'
+
+export interface MemoryArchivistStatsProps {
+  archivist?: ArchivistModule
+}
+
+export const MemoryArchivistsStats: React.FC<MemoryArchivistStatsProps> = ({ archivist }) => {
+  const [all, setAll] = useState<Payload[] | null>()
+
+  const getAll = useCallback(async (archivist?: ArchivistModule) => {
+    const all = await archivist?.all?.()
+    setAll(all)
+  }, [])
+
+  useEffect(() => {
+    let listener: EventUnsubscribeFunction
+
+    if (archivist?.queries.includes(ArchivistAllQuerySchema)) {
+      listener = archivist.on('inserted', async () => {
+        await getAll(archivist)
+      })
+    }
+
+    return () => listener?.()
+  }, [archivist, getAll])
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (archivist?.queries.includes(ArchivistAllQuerySchema)) {
+        await getAll(archivist)
+      } else {
+        setAll(null)
+      }
+    },
+    [archivist, getAll],
+  )
+
+  const payloads = useMemo(() => (all === null ? [] : all?.filter((payload) => payload.schema !== BoundWitnessSchema)), [all])
+  const boundWitnesses = useMemo(() => (all === null ? [] : all?.filter((payload) => payload.schema === BoundWitnessSchema)), [all])
+  const addresses = useMemo(
+    () =>
+      all?.reduce((prev, payload) => {
+        const w = BoundWitnessWrapper.tryParse(payload) as BoundWitnessWrapper | undefined
+        w?.addresses?.forEach((address) => {
+          prev[address] = (prev[address] ?? 0) + 1
+        })
+        return prev
+      }, {} as Record<string, number>) ?? {},
+    [all],
+  )
+  const schemas = useMemo(
+    () =>
+      all?.reduce((prev, payload) => {
+        prev[payload.schema] = (prev[payload.schema] ?? 0) + 1
+        return prev
+      }, {} as Record<string, number>) ?? {},
+    [all],
+  )
+
+  return <ArchivistStats addresses={addresses} boundWitnesses={boundWitnesses} payloads={payloads} schemas={schemas} />
+}

package/src/components/Card/components/Stats/index.ts

@@ -0,0 +1,2 @@
+export * from './ArchivistStats'
+export * from './MemoryArchivistStats'

package/src/components/Card/components/index.ts

@@ -1 +1,3 @@
 export * from './ArchivistParent'
+export * from './ArchivistParents'
+export * from './Stats'