From 228c3a6127092c9af6f39d0e9ab3864190124e0d Mon Sep 17 00:00:00 2001 From: Daniel Constantin Date: Mon, 26 Feb 2024 20:10:21 +0200 Subject: [PATCH 1/3] Make graph links clickable + refresh design --- public/aoscan.svg | 19 +++++ src/app/entity/[slug]/ProcessPage.tsx | 49 +++++++++--- src/app/message/[slug]/MessagePage.tsx | 53 ++++++++++--- src/components/Footer.tsx | 38 ++++++---- src/components/Graph.tsx | 13 ++-- src/components/Header.tsx | 45 ++--------- src/components/Logo.tsx | 54 +++++++++++++ src/components/PoweredBy.tsx | 75 +++++++++++++++++++ .../ProcessPage/MessagesTable.tsx | 20 ++++- 9 files changed, 288 insertions(+), 78 deletions(-) create mode 100644 public/aoscan.svg create mode 100644 src/components/Logo.tsx create mode 100644 src/components/PoweredBy.tsx 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..bb52187 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,15 @@ export function ProcessPage(props: ProcessPageProps) { }) }, [processId]) + const [tableFilter, setTableFilter] = useState<{ + from: string + to: string + } | null>(null) + + const handleLinkClick = useCallback((from: string, to: string) => { + setTableFilter({ from, to }) + }, []) + return (
@@ -89,7 +105,7 @@ export function ProcessPage(props: ProcessPageProps) { ) : ( - + )} @@ -158,13 +174,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..32a667e 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,15 @@ export function MessagePage(props: MessagePageProps) { }) }, [messageId]) + const [tableFilter, setTableFilter] = useState<{ + from: string + to: string + } | null>(null) + + const handleLinkClick = useCallback((from: string, to: string) => { + setTableFilter({ from, to }) + }, []) + return ( <>
@@ -96,7 +112,7 @@ export function MessagePage(props: MessagePageProps) { ) : ( - + )} @@ -198,13 +214,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..3c71c0c 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,18 +1,36 @@ -import { Container, Link, Stack, Typography } from "@mui/material" +import { Box, Container, Link, Stack } from "@mui/material" import React from "react" +import { PoweredBy } from "./PoweredBy" + export function Footer() { return ( - <> - + + SPEC - - © 2023{" "} - - DataOS - {" "} - Technologies. All rights reserved - + - + ) } 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..1065f2d --- /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..48b8d52 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,16 @@ const MessagesTable = (props: MessagesTableProps) => { return () => observer.disconnect() }, []) + const filteredData = useMemo(() => { + if (tableFilter) { + return data.filter( + (item) => item.from === tableFilter.from && item.to === tableFilter.to, + ) + } else { + return data + } + }, [data, tableFilter]) + return ( <> {data.length ? ( @@ -75,7 +89,7 @@ const MessagesTable = (props: MessagesTableProps) => { - {data.slice(0, listSize).map((item) => ( + {filteredData.slice(0, listSize).map((item) => ( Date: Mon, 26 Feb 2024 20:17:38 +0200 Subject: [PATCH 2/3] Attempt to fix filtering --- src/app/entity/[slug]/ProcessPage.tsx | 1 + src/app/message/[slug]/MessagePage.tsx | 1 + src/components/PoweredBy.tsx | 2 +- src/page-components/ProcessPage/MessagesTable.tsx | 4 +++- 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/entity/[slug]/ProcessPage.tsx b/src/app/entity/[slug]/ProcessPage.tsx index bb52187..ed0c38f 100644 --- a/src/app/entity/[slug]/ProcessPage.tsx +++ b/src/app/entity/[slug]/ProcessPage.tsx @@ -82,6 +82,7 @@ export function ProcessPage(props: ProcessPageProps) { } | null>(null) const handleLinkClick = useCallback((from: string, to: string) => { + console.log("📜 LOG > handleLinkClick > { from, to }:", { from, to }) setTableFilter({ from, to }) }, []) diff --git a/src/app/message/[slug]/MessagePage.tsx b/src/app/message/[slug]/MessagePage.tsx index 32a667e..9067ba5 100644 --- a/src/app/message/[slug]/MessagePage.tsx +++ b/src/app/message/[slug]/MessagePage.tsx @@ -88,6 +88,7 @@ export function MessagePage(props: MessagePageProps) { } | null>(null) const handleLinkClick = useCallback((from: string, to: string) => { + console.log("📜 LOG > handleLinkClick > { from, to }:", { from, to }) setTableFilter({ from, to }) }, []) diff --git a/src/components/PoweredBy.tsx b/src/components/PoweredBy.tsx index 1065f2d..5bb1a32 100644 --- a/src/components/PoweredBy.tsx +++ b/src/components/PoweredBy.tsx @@ -14,7 +14,7 @@ export function PoweredBy(props: SVGProps) { d="M0.888 14.5V6.1H3.648C4.304 6.1 4.844 6.208 5.268 6.424C5.692 6.64 6.004 6.932 6.204 7.3C6.412 7.668 6.516 8.084 6.516 8.548C6.516 9.004 6.416 9.416 6.216 9.784C6.016 10.152 5.704 10.448 5.28 10.672C4.856 10.888 4.312 10.996 3.648 10.996H1.896V14.5H0.888ZM1.896 10.144H3.624C4.296 10.144 4.772 10.004 5.052 9.724C5.34 9.436 5.484 9.044 5.484 8.548C5.484 8.044 5.34 7.652 5.052 7.372C4.772 7.084 4.296 6.94 3.624 6.94H1.896V10.144ZM10.1377 14.644C9.57766 14.644 9.07366 14.516 8.62566 14.26C8.17766 14.004 7.82166 13.644 7.55766 13.18C7.30166 12.708 7.17366 12.156 7.17366 11.524C7.17366 10.892 7.30566 10.344 7.56966 9.88C7.83366 9.408 8.18966 9.044 8.63766 8.788C9.09366 8.532 9.60166 8.404 10.1617 8.404C10.7217 8.404 11.2257 8.532 11.6737 8.788C12.1217 9.044 12.4737 9.408 12.7297 9.88C12.9937 10.344 13.1257 10.892 13.1257 11.524C13.1257 12.156 12.9937 12.708 12.7297 13.18C12.4657 13.644 12.1057 14.004 11.6497 14.26C11.2017 14.516 10.6977 14.644 10.1377 14.644ZM10.1377 13.78C10.4817 13.78 10.8017 13.696 11.0977 13.528C11.3937 13.36 11.6337 13.108 11.8177 12.772C12.0017 12.436 12.0937 12.02 12.0937 11.524C12.0937 11.028 12.0017 10.612 11.8177 10.276C11.6417 9.94 11.4057 9.688 11.1097 9.52C10.8137 9.352 10.4977 9.268 10.1617 9.268C9.81766 9.268 9.49766 9.352 9.20166 9.52C8.90566 9.688 8.66566 9.94 8.48166 10.276C8.29766 10.612 8.20566 11.028 8.20566 11.524C8.20566 12.02 8.29766 12.436 8.48166 12.772C8.66566 13.108 8.90166 13.36 9.18966 13.528C9.48566 13.696 9.80166 13.78 10.1377 13.78ZM15.5046 14.5L13.7646 8.548H14.7726L16.0326 13.216L17.4246 8.548H18.5646L19.9686 13.216L21.2166 8.548H22.2366L20.4966 14.5H19.4646L18.0006 9.592L16.5366 14.5H15.5046ZM25.8048 14.644C25.2368 14.644 24.7328 14.516 24.2928 14.26C23.8528 13.996 23.5048 13.632 23.2488 13.168C23.0008 12.704 22.8768 12.156 22.8768 11.524C22.8768 10.9 23.0008 10.356 23.2488 9.892C23.4968 9.42 23.8408 9.056 24.2808 8.8C24.7288 8.536 25.2448 8.404 25.8288 8.404C26.4048 8.404 26.9008 8.536 27.3168 8.8C27.7408 9.056 28.0648 9.396 28.2888 9.82C28.5128 10.244 28.6248 10.7 28.6248 11.188C28.6248 11.276 28.6208 11.364 28.6128 11.452C28.6128 11.54 28.6128 11.64 28.6128 11.752H23.8728C23.8968 12.208 24.0008 12.588 24.1848 12.892C24.3768 13.188 24.6128 13.412 24.8928 13.564C25.1808 13.716 25.4848 13.792 25.8048 13.792C26.2208 13.792 26.5688 13.696 26.8488 13.504C27.1288 13.312 27.3328 13.052 27.4608 12.724H28.4568C28.2968 13.276 27.9888 13.736 27.5328 14.104C27.0848 14.464 26.5088 14.644 25.8048 14.644ZM25.8048 9.256C25.3248 9.256 24.8968 9.404 24.5208 9.7C24.1528 9.988 23.9408 10.412 23.8848 10.972H27.6288C27.6048 10.436 27.4208 10.016 27.0768 9.712C26.7328 9.408 26.3088 9.256 25.8048 9.256ZM29.9608 14.5V8.548H30.8728L30.9568 9.688C31.1408 9.296 31.4208 8.984 31.7968 8.752C32.1728 8.52 32.6368 8.404 33.1888 8.404V9.46H32.9128C32.5608 9.46 32.2368 9.524 31.9408 9.652C31.6448 9.772 31.4088 9.98 31.2328 10.276C31.0568 10.572 30.9688 10.98 30.9688 11.5V14.5H29.9608ZM36.7735 14.644C36.2055 14.644 35.7015 14.516 35.2615 14.26C34.8215 13.996 34.4735 13.632 34.2175 13.168C33.9695 12.704 33.8455 12.156 33.8455 11.524C33.8455 10.9 33.9695 10.356 34.2175 9.892C34.4655 9.42 34.8095 9.056 35.2495 8.8C35.6975 8.536 36.2135 8.404 36.7975 8.404C37.3735 8.404 37.8695 8.536 38.2855 8.8C38.7095 9.056 39.0335 9.396 39.2575 9.82C39.4815 10.244 39.5935 10.7 39.5935 11.188C39.5935 11.276 39.5895 11.364 39.5815 11.452C39.5815 11.54 39.5815 11.64 39.5815 11.752H34.8415C34.8655 12.208 34.9695 12.588 35.1535 12.892C35.3455 13.188 35.5815 13.412 35.8615 13.564C36.1495 13.716 36.4535 13.792 36.7735 13.792C37.1895 13.792 37.5375 13.696 37.8175 13.504C38.0975 13.312 38.3015 13.052 38.4295 12.724H39.4255C39.2655 13.276 38.9575 13.736 38.5015 14.104C38.0535 14.464 37.4775 14.644 36.7735 14.644ZM36.7735 9.256C36.2935 9.256 35.8655 9.404 35.4895 9.7C35.1215 9.988 34.9095 10.412 34.8535 10.972H38.5975C38.5735 10.436 38.3895 10.016 38.0455 9.712C37.7015 9.408 37.2775 9.256 36.7735 9.256ZM43.6296 14.644C43.0376 14.644 42.5176 14.508 42.0696 14.236C41.6296 13.964 41.2856 13.592 41.0376 13.12C40.7976 12.648 40.6776 12.112 40.6776 11.512C40.6776 10.912 40.8016 10.38 41.0496 9.916C41.2976 9.444 41.6416 9.076 42.0816 8.812C42.5216 8.54 43.0416 8.404 43.6416 8.404C44.1296 8.404 44.5616 8.504 44.9376 8.704C45.3136 8.904 45.6056 9.184 45.8136 9.544V5.86H46.8216V14.5H45.9096L45.8136 13.516C45.6216 13.804 45.3456 14.064 44.9856 14.296C44.6256 14.528 44.1736 14.644 43.6296 14.644ZM43.7376 13.768C44.1376 13.768 44.4896 13.676 44.7936 13.492C45.1056 13.3 45.3456 13.036 45.5136 12.7C45.6896 12.364 45.7776 11.972 45.7776 11.524C45.7776 11.076 45.6896 10.684 45.5136 10.348C45.3456 10.012 45.1056 9.752 44.7936 9.568C44.4896 9.376 44.1376 9.28 43.7376 9.28C43.3456 9.28 42.9936 9.376 42.6816 9.568C42.3776 9.752 42.1376 10.012 41.9616 10.348C41.7936 10.684 41.7096 11.076 41.7096 11.524C41.7096 11.972 41.7936 12.364 41.9616 12.7C42.1376 13.036 42.3776 13.3 42.6816 13.492C42.9936 13.676 43.3456 13.768 43.7376 13.768ZM54.8205 14.644C54.3325 14.644 53.8965 14.544 53.5125 14.344C53.1365 14.144 52.8485 13.864 52.6485 13.504L52.5525 14.5H51.6405V5.86H52.6485V9.532C52.8405 9.244 53.1125 8.984 53.4645 8.752C53.8245 8.52 54.2805 8.404 54.8325 8.404C55.4245 8.404 55.9405 8.54 56.3805 8.812C56.8205 9.084 57.1605 9.456 57.4005 9.928C57.6485 10.4 57.7725 10.936 57.7725 11.536C57.7725 12.136 57.6485 12.672 57.4005 13.144C57.1605 13.608 56.8165 13.976 56.3685 14.248C55.9285 14.512 55.4125 14.644 54.8205 14.644ZM54.7125 13.768C55.1125 13.768 55.4645 13.676 55.7685 13.492C56.0725 13.3 56.3125 13.036 56.4885 12.7C56.6645 12.364 56.7525 11.972 56.7525 11.524C56.7525 11.076 56.6645 10.684 56.4885 10.348C56.3125 10.012 56.0725 9.752 55.7685 9.568C55.4645 9.376 55.1125 9.28 54.7125 9.28C54.3125 9.28 53.9605 9.376 53.6565 9.568C53.3525 9.752 53.1125 10.012 52.9365 10.348C52.7605 10.684 52.6725 11.076 52.6725 11.524C52.6725 11.972 52.7605 12.364 52.9365 12.7C53.1125 13.036 53.3525 13.3 53.6565 13.492C53.9605 13.676 54.3125 13.768 54.7125 13.768ZM59.3432 17.14L60.8192 13.924H60.4712L58.1072 8.548H59.1992L61.1672 13.18L63.2552 8.548H64.2992L60.3992 17.14H59.3432Z" fill="#F3F3F3" /> - + { const filteredData = useMemo(() => { if (tableFilter) { return data.filter( - (item) => item.from === tableFilter.from && item.to === tableFilter.to, + (item) => + item.from.toLowerCase() === tableFilter.from.toLowerCase() && + item.to.toLowerCase() === tableFilter.to.toLowerCase(), ) } else { return data From d70a1a9a8c9e7dbff30e3b7ab86d5ada6e67d74e Mon Sep 17 00:00:00 2001 From: Daniel Constantin Date: Tue, 27 Feb 2024 11:35:33 +0200 Subject: [PATCH 3/3] Add more links to the footer --- src/components/Footer.tsx | 136 +++++++++++++++++++++++++++++++++----- 1 file changed, 120 insertions(+), 16 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 3c71c0c..a7dd1ea 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,4 @@ -import { Box, Container, Link, Stack } from "@mui/material" +import { Box, Container, Link, Stack, Typography } from "@mui/material" import React from "react" import { PoweredBy } from "./PoweredBy" @@ -23,22 +23,126 @@ export function Footer() { }} > - - SPEC - + + HOME + + + / + + + SPEC + + + / + + + GITHUB + + + / + + + AO + + + / + + + X + + + / + + + ARWEAVE STATS + +