diff --git a/public/aoscan.svg b/public/aoscan.svg new file mode 100644 index 0000000..5dfab07 --- /dev/null +++ b/public/aoscan.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/src/app/entity/[slug]/ProcessPage.tsx b/src/app/entity/[slug]/ProcessPage.tsx index b4723d4..ed0c38f 100644 --- a/src/app/entity/[slug]/ProcessPage.tsx +++ b/src/app/entity/[slug]/ProcessPage.tsx @@ -1,7 +1,14 @@ "use client" -import { CircularProgress, Grid, Paper, Stack, Typography } from "@mui/material" +import { + Button, + CircularProgress, + Grid, + Paper, + Stack, + Typography, +} from "@mui/material" -import { useEffect, useState } from "react" +import { useCallback, useEffect, useState } from "react" import { ChartDataItem, Graph } from "@/components/Graph" import { IdBlock } from "@/components/IdBlock" @@ -69,6 +76,16 @@ export function ProcessPage(props: ProcessPageProps) { }) }, [processId]) + const [tableFilter, setTableFilter] = useState<{ + from: string + to: string + } | null>(null) + + const handleLinkClick = useCallback((from: string, to: string) => { + console.log("📜 LOG > handleLinkClick > { from, to }:", { from, to }) + setTableFilter({ from, to }) + }, []) + return (
@@ -89,7 +106,7 @@ export function ProcessPage(props: ProcessPageProps) { ) : ( - + )} @@ -158,13 +175,28 @@ export function ProcessPage(props: ProcessPageProps) { {linkedMessages.length > 0 && ( <> - - Linked messages - - + + Linked messages + + {tableFilter && ( + + )} + + )}
diff --git a/src/app/message/[slug]/MessagePage.tsx b/src/app/message/[slug]/MessagePage.tsx index f2c35d0..9067ba5 100644 --- a/src/app/message/[slug]/MessagePage.tsx +++ b/src/app/message/[slug]/MessagePage.tsx @@ -1,8 +1,15 @@ "use client" -import { CircularProgress, Grid, Paper, Stack, Typography } from "@mui/material" +import { + Button, + CircularProgress, + Grid, + Paper, + Stack, + Typography, +} from "@mui/material" -import { useEffect, useMemo, useState } from "react" +import { useCallback, useEffect, useMemo, useState } from "react" import { ChartDataItem, Graph } from "@/components/Graph" import { IdBlock } from "@/components/IdBlock" @@ -75,6 +82,16 @@ export function MessagePage(props: MessagePageProps) { }) }, [messageId]) + const [tableFilter, setTableFilter] = useState<{ + from: string + to: string + } | null>(null) + + const handleLinkClick = useCallback((from: string, to: string) => { + console.log("📜 LOG > handleLinkClick > { from, to }:", { from, to }) + setTableFilter({ from, to }) + }, []) + return ( <>
@@ -96,7 +113,7 @@ export function MessagePage(props: MessagePageProps) { ) : ( - + )} @@ -198,13 +215,32 @@ export function MessagePage(props: MessagePageProps) { {linkedMessages.length > 0 && ( <> - - Linked messages - - + + Linked messages + + {tableFilter && ( + + )} + + )}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 590463d..a7dd1ea 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,35 +1,151 @@ -import { Container, Link, Stack, Typography } from "@mui/material" +import { Box, Container, Link, Stack, Typography } from "@mui/material" import React from "react" +import { PoweredBy } from "./PoweredBy" + export function Footer() { return ( - <> - + + - - SPEC - - - © 2023{" "} - - DataOS - {" "} - Technologies. All rights reserved - + + HOME + + + / + + + SPEC + + + / + + + GITHUB + + + / + + + AO + + + / + + + X + + + / + + + ARWEAVE STATS + + + - + ) } diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx index ad40aa9..37715de 100644 --- a/src/components/Graph.tsx +++ b/src/components/Graph.tsx @@ -73,10 +73,11 @@ interface CustomLink extends SimulationNodeDatum { interface GraphProps { data: ChartDataItem[] + onLinkClick: (from: string, to: string) => void } function BaseGraph(props: GraphProps) { - const { data: chartData } = props + const { data: chartData, onLinkClick } = props const svgRef = useRef(null) const router = useRouter() @@ -169,10 +170,12 @@ function BaseGraph(props: GraphProps) { "marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location.href)})`, ) - .on("mouseclick", function (event, d) { - svg - .select(`#${CSS.escape(`#link-text-${d.source.id}-${d.target.id}`)}`) - .attr("visibility", "visible") + .style("cursor", "pointer") + .on("click", function (event, d) { + onLinkClick(d.source.id, d.target.id) + // svg + // .select(`#${CSS.escape(`#link-text-${d.source.id}-${d.target.id}`)}`) + // .attr("visibility", "visible") }) .on("mouseout", function (event, d) { svg diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 7d40382..f519a24 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -4,14 +4,16 @@ import { AppBar, Container, IconButton, - Link as MuiLink, Stack, + Button, Toolbar, useColorScheme, } from "@mui/material" import { Moon, Sun } from "@phosphor-icons/react" import Link from "next/link" +import { Logo } from "./Logo" + const Header = () => { const { mode = "dark", setMode } = useColorScheme() @@ -34,44 +36,9 @@ const Header = () => { sx={{ width: "100%" }} > - - - - - - - Scan - + ) { + return ( + + + + + + + + + + + ) +} diff --git a/src/components/PoweredBy.tsx b/src/components/PoweredBy.tsx new file mode 100644 index 0000000..5bb1a32 --- /dev/null +++ b/src/components/PoweredBy.tsx @@ -0,0 +1,75 @@ +import React, { SVGProps } from "react" + +export function PoweredBy(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/page-components/ProcessPage/MessagesTable.tsx b/src/page-components/ProcessPage/MessagesTable.tsx index 6aa5749..b59aa59 100644 --- a/src/page-components/ProcessPage/MessagesTable.tsx +++ b/src/page-components/ProcessPage/MessagesTable.tsx @@ -1,7 +1,7 @@ "use client" import { CircularProgress, Stack, Typography } from "@mui/material" import { useRouter } from "next/navigation" -import React, { useEffect, useRef, useState } from "react" +import React, { useEffect, useMemo, useRef, useState } from "react" import { MonoFontFF } from "@/components/RootLayout/fonts" import { TypeBadge } from "@/components/TypeBadge" @@ -17,12 +17,16 @@ import { IdBlock } from "../../components/IdBlock" type MessagesTableProps = { data: NormalizedAoEvent[] + tableFilter: { + from: string + to: string + } | null } const pageSize = 30 const MessagesTable = (props: MessagesTableProps) => { - const { data } = props + const { data, tableFilter } = props const router = useRouter() const loaderRef = useRef(null) @@ -58,6 +62,18 @@ const MessagesTable = (props: MessagesTableProps) => { return () => observer.disconnect() }, []) + const filteredData = useMemo(() => { + if (tableFilter) { + return data.filter( + (item) => + item.from.toLowerCase() === tableFilter.from.toLowerCase() && + item.to.toLowerCase() === tableFilter.to.toLowerCase(), + ) + } else { + return data + } + }, [data, tableFilter]) + return ( <> {data.length ? ( @@ -75,7 +91,7 @@ const MessagesTable = (props: MessagesTableProps) => { - {data.slice(0, listSize).map((item) => ( + {filteredData.slice(0, listSize).map((item) => (