Feat/clickable graph links

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 (
     <main className="min-h-screen mb-6">
       <div className="flex gap-2 items-center text-sm mt-12 mb-11">
@@ -89,7 +106,7 @@ export function ProcessPage(props: ProcessPageProps) {
                   <CircularProgress size={24} color="primary" />
                 </Stack>
               ) : (
-                <Graph data={graphData} />
+                <Graph data={graphData} onLinkClick={handleLinkClick} />
               )}
             </Paper>
             <SectionInfoWithChip title="Type" value={type} />
@@ -158,13 +175,28 @@ export function ProcessPage(props: ProcessPageProps) {
       </Grid>
       {linkedMessages.length > 0 && (
         <>
-          <Typography
-            variant="subtitle1"
-            sx={{ textTransform: "uppercase", marginBottom: 3, marginTop: 6 }}
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
           >
-            Linked messages
-          </Typography>
-          <MessagesTable data={linkedMessages} />
+            <Typography
+              variant="subtitle1"
+              sx={{ textTransform: "uppercase", marginBottom: 3, marginTop: 6 }}
+            >
+              Linked messages
+            </Typography>
+            {tableFilter && (
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={() => setTableFilter(null)}
+              >
+                Clear filter
+              </Button>
+            )}
+          </Stack>
+          <MessagesTable data={linkedMessages} tableFilter={tableFilter} />
         </>
       )}
     </main>

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 (
     <>
       <main className="min-h-screen mb-6">
@@ -96,7 +113,7 @@ export function MessagePage(props: MessagePageProps) {
                     <CircularProgress size={24} color="primary" />
                   </Stack>
                 ) : (
-                  <Graph data={graphData} />
+                  <Graph data={graphData} onLinkClick={handleLinkClick} />
                 )}
               </Paper>
               <SectionInfoWithChip title="Type" value={type} />
@@ -198,13 +215,32 @@ export function MessagePage(props: MessagePageProps) {
         </Grid>
         {linkedMessages.length > 0 && (
           <>
-            <Typography
-              variant="subtitle1"
-              sx={{ textTransform: "uppercase", marginBottom: 3, marginTop: 6 }}
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
             >
-              Linked messages
-            </Typography>
-            <MessagesTable data={linkedMessages} />
+              <Typography
+                variant="subtitle1"
+                sx={{
+                  textTransform: "uppercase",
+                  marginBottom: 3,
+                  marginTop: 6,
+                }}
+              >
+                Linked messages
+              </Typography>
+              {tableFilter && (
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onClick={() => setTableFilter(null)}
+                >
+                  Clear filter
+                </Button>
+              )}
+            </Stack>
+            <MessagesTable data={linkedMessages} tableFilter={tableFilter} />
           </>
         )}
       </main>

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 (
-    <>
-      <Container maxWidth="xl" sx={{ paddingX: 2, paddingY: 4 }}>
+    <Box
+      sx={{
+        position: "sticky",
+        bottom: 0,
+        width: "100%",
+      }}
+    >
+      <Container
+        maxWidth="xl"
+        sx={{
+          paddingX: 2,
+          paddingY: 1,
+          background: "#242629",
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+        }}
+      >
         <Stack justifyContent="space-between" direction="row">
-          <Link
-            href="https://6t4x4xx75j3ovjugzicw7wx7bogigt4sz3pnbh43dqdua6pa56wa.arweave.net/9Pl-Xv_qduqmhsoFb9r_C4yDT5LO3tCfmxwHQHng76w/#/spec"
-            color="text.secondary"
-            sx={{
-              textTransform: "uppercase",
-              "&:hover": {
-                color: "text.primary",
-              },
-            }}
-            fontWeight={500}
-            underline="none"
-            variant="body2"
+          <Stack
+            direction="row"
+            sx={{ color: "#D4D5D9" }}
+            gap={1.5}
+            alignItems="center"
           >
-            SPEC
-          </Link>
-          <Typography variant="caption">
-            © 2023{" "}
-            <Link href="https://dataos.so" color="text.primary">
-              DataOS
-            </Link>{" "}
-            Technologies. All rights reserved
-          </Typography>
+            <Link
+              href="/"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              HOME
+            </Link>
+            <Typography
+              component="span"
+              sx={{ opacity: 0.4 }}
+              variant="caption"
+            >
+              /
+            </Typography>
+            <Link
+              href="https://6t4x4xx75j3ovjugzicw7wx7bogigt4sz3pnbh43dqdua6pa56wa.arweave.net/9Pl-Xv_qduqmhsoFb9r_C4yDT5LO3tCfmxwHQHng76w/#/spec"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              SPEC
+            </Link>
+            <Typography
+              component="span"
+              sx={{ opacity: 0.4 }}
+              variant="caption"
+            >
+              /
+            </Typography>
+            <Link
+              href="https://github.com/permaweb/aos"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              GITHUB
+            </Link>
+            <Typography
+              component="span"
+              sx={{ opacity: 0.4 }}
+              variant="caption"
+            >
+              /
+            </Typography>
+            <Link
+              href="http://arweave.net/9Pl-Xv_qduqmhsoFb9r_C4yDT5LO3tCfmxwHQHng76w/"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              AO
+            </Link>
+            <Typography
+              component="span"
+              sx={{ opacity: 0.4 }}
+              variant="caption"
+            >
+              /
+            </Typography>
+            <Link
+              href="https://twitter.com/TheDataOS"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              X
+            </Link>
+            <Typography
+              component="span"
+              sx={{ opacity: 0.4 }}
+              variant="caption"
+            >
+              /
+            </Typography>
+            <Link
+              href="https://stats.dataos.so/"
+              sx={{
+                "&:hover": {
+                  color: "#FFF",
+                },
+              }}
+              fontWeight={500}
+              underline="none"
+              variant="body2"
+            >
+              ARWEAVE STATS
+            </Link>
+          </Stack>
+          <PoweredBy />
         </Stack>
       </Container>
-    </>
+    </Box>
   )
 }

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