diff --git a/.changeset/dirty-sloths-crash.md b/.changeset/dirty-sloths-crash.md new file mode 100644 index 00000000..f67a33ef --- /dev/null +++ b/.changeset/dirty-sloths-crash.md @@ -0,0 +1,5 @@ +--- +"@eventcatalog/core": patch +--- + +refactor(core): reduced amount of data the discover table needs diff --git a/eventcatalog/src/components/Tables/Table.tsx b/eventcatalog/src/components/Tables/Table.tsx index 07ce7b81..9a609c05 100644 --- a/eventcatalog/src/components/Tables/Table.tsx +++ b/eventcatalog/src/components/Tables/Table.tsx @@ -9,34 +9,100 @@ import { useReactTable, type Column, type ColumnFiltersState, - type Row, } from '@tanstack/react-table'; -import type { CollectionEntry } from 'astro:content'; import DebouncedInput from './DebouncedInput'; import { getColumnsByCollection } from './columns'; -import { useEffect, useMemo, useState, type EventHandler } from 'react'; -import type { CollectionTypes } from '@types'; +import { useEffect, useMemo, useState } from 'react'; +import type { CollectionMessageTypes } from '@types'; import { isSameVersion } from '@utils/collections/util'; declare module '@tanstack/react-table' { // @ts-ignore interface ColumnMeta { filterVariant?: 'collection' | 'name' | 'badges'; - collectionFilterKey?: string; + collectionFilterKey?: 'producers' | 'consumers' | 'sends' | 'receives' | 'services'; showFilter?: boolean; className?: string; } } -export const Table = ({ +export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows'; + +export type TData = { + collection: T; + data: { + id: string; + name: string; + summary: string; + version: string; + latestVersion?: string; // Defined on getter collection utility + badges?: Array<{ + id: string; // Where is it defined? + content: string; + backgroundColor: string; + textColor: string; + icon: any; // Where is it defined? + }>; + // --------------------------------------------------------------------------- + // Domains + services?: Array<{ + collection: string; // Be more specific; + data: { + id: string; + name: string; + version: string; + }; + }>; + // --------------------------------------------------------------------------- + // Services + receives?: Array<{ + collection: string; // Be more specific; + data: { + id: string; + name: string; + version: string; + }; + }>; + sends?: Array<{ + collection: string; // Be more specific; + data: { + id: string; + name: string; + version: string; + }; + }>; + // --------------------------------------------------------------------------- + // Messages + producers?: Array<{ + collection: string; // Specify only 'services'? + data: { + id: string; + name: string; + version: string; + }; + }>; + // Only for messages + consumers?: Array<{ + collection: string; // Specify only 'services'? + data: { + id: string; + name: string; + version: string; + }; + }>; + // --------------------------------------------------------------------------- + }; +}; + +export const Table = ({ data: initialData, collection, mode = 'simple', checkboxLatestId, }: { - data: CollectionEntry<'events'>[]; - collection: string; + data: TData[]; + collection: T; checkboxLatestId: string; mode?: 'simple' | 'full'; }) => { @@ -68,7 +134,6 @@ export const Table = ({ const columns = useMemo(() => getColumnsByCollection(collection), [collection]); const table = useReactTable({ - // @ts-ignore data, columns, onColumnFiltersChange: setColumnFilters, @@ -106,7 +171,6 @@ export const Table = ({
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
- {/* @ts-ignore */}
{header.column.columnDef.meta?.showFilter !== false && } {header.column.columnDef.meta?.showFilter == false &&
} @@ -201,23 +265,17 @@ export const Table = ({ ); }; -function Filter({ column }: { column: Column }) { - const { filterVariant, collectionFilterKey = '' } = column.columnDef.meta ?? {}; +function Filter({ column }: { column: Column, unknown> }) { + const { filterVariant, collectionFilterKey } = column.columnDef.meta ?? {}; const columnFilterValue = column.getFilterValue(); const sortedUniqueValues = useMemo(() => { - if (filterVariant === 'collection') { + if (filterVariant === 'collection' && collectionFilterKey) { const rows = column.getFacetedRowModel().rows; - const data = rows - .map((row: Row>) => { - // @ts-ignore - const items = row.original.data[collectionFilterKey]; - return items as CollectionEntry[]; - }) - .flat(); + const data = rows.map((row) => row.original.data?.[collectionFilterKey] ?? []).flat(); - const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`); + const allItems = data.map((item) => `${item?.data.name} (v${item?.data.version})`); const uniqueItemsInList = Array.from(new Set(allItems)); return uniqueItemsInList.sort().slice(0, 2000); @@ -225,10 +283,9 @@ function Filter({ column }: { column: Column }) { if (filterVariant === 'name') { const rows = column.getFacetedRowModel().rows; const data = rows - .map((row: Row>) => { - // @ts-ignore + .map((row) => { const data = row.original; - return data as CollectionEntry; + return data; }) .flat(); diff --git a/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx b/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx index 0235040d..fba40b4a 100644 --- a/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx +++ b/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx @@ -1,13 +1,12 @@ import { ServerIcon } from '@heroicons/react/20/solid'; import { RectangleGroupIcon } from '@heroicons/react/20/solid'; import { createColumnHelper } from '@tanstack/react-table'; -import type { CollectionEntry } from 'astro:content'; -import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters'; +import { filterByName, filterCollectionByName } from '../filters/custom-filters'; import { buildUrl } from '@utils/url-builder'; -import { Tag } from 'lucide-react'; import { createBadgesColumn } from './SharedColumns'; +import type { TData } from '../Table'; -const columnHelper = createColumnHelper>(); +const columnHelper = createColumnHelper>(); export const columns = () => [ columnHelper.accessor('data.name', { @@ -65,7 +64,7 @@ export const columns = () => [ return (