(feat): implement new graph endpoint for rendering hyperboards (#53)

* (feat): implement new graph endpoint for rendering hyperboards

* (feat): implement new graph endpoint for rendering hyperboards

* (feat): fix rerendering issues

* (feat): remove section header if only single section is present

components/hyperboard-renderer-with-ui.tsx

@@ -8,7 +8,7 @@ import { OwnershipTable } from "@/components/hyperboard/ownership-table";
 import { MdOutlineFullscreen, MdOutlineFullscreenExit } from "react-icons/md";
 import { useRouter } from "next/router";
 import { HyperboardRenderer } from "@/components/hyperboard-renderer";
-import { useFetchHyperboardData } from "@/hooks/useFetchHyperboardData";
+import { useFetchHyperboardById } from "@/hooks/useFetchHyperboardContents2";
 import { HypercertClientProvider } from "@/components/providers";
 
 const HyperboardRendererWithUiInternal = ({
@@ -129,7 +129,7 @@ export const HyperboardRendererWithUi = ({
 }: {
   hyperboardId: string;
 }) => {
-  const { data, isLoading } = useFetchHyperboardData(hyperboardId);
+  const { data, isLoading } = useFetchHyperboardById(hyperboardId);
 
   if (isLoading) {
     return (
@@ -143,8 +143,14 @@ export const HyperboardRendererWithUi = ({
     return null;
   }
 
+  const chainId = data.chain_ids?.[0];
+
+  if (!chainId) {
+    return null;
+  }
+
   return (
-    <HypercertClientProvider chainOverride={data.chain_id}>
+    <HypercertClientProvider chainOverride={Number(chainId)}>
       <HyperboardRendererWithUiInternal hyperboardId={hyperboardId} />
     </HypercertClientProvider>
   );

components/hyperboard-renderer.tsx

@@ -1,13 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-import { useSize } from "@chakra-ui/react-use-size";
-import {
-  registryContentItemToHyperboardEntry,
-  useFetchHyperboardContents,
-} from "@/hooks/useFetchHyperboardContents";
+import { useEffect, useState } from "react";
+import { registryContentItemToHyperboardEntry } from "@/hooks/useFetchHyperboardContents";
 import { Center, Flex, Spinner } from "@chakra-ui/react";
 import { Hyperboard } from "@/components/hyperboard";
 import * as React from "react";
 import { OwnershipTable } from "@/components/hyperboard/ownership-table";
+import { useFetchHyperboardById } from "@/hooks/useFetchHyperboardContents2";
+import { useMeasure } from "react-use";
 
 export const HyperboardRenderer = ({
   hyperboardId,
@@ -24,8 +22,7 @@ export const HyperboardRenderer = ({
   onSelectedRegistryChange?: (registryId?: string) => void;
   showTable?: boolean;
 }) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const dimensions = useSize(containerRef);
+  const [containerRef, dimensions] = useMeasure<HTMLDivElement>();
 
   const [selectedRegistry, setSelectedRegistry] = useState<string>();
 
@@ -35,21 +32,26 @@ export const HyperboardRenderer = ({
     }
   }, [selectedRegistryParent]);
 
-  const { data, isLoading, isLoadingError } = useFetchHyperboardContents(
-    hyperboardId,
-    {
-      disableToast,
-    },
-  );
-  const results = data?.results;
-  console.log("results", results);
+  const { data, isLoading, isLoadingError } =
+    useFetchHyperboardById(hyperboardId);
+
+  useEffect(() => {
+    if (!selectedRegistry && data?.sections.data.length === 1) {
+      setSelectedRegistry(data.sections.data[0].collection.id);
+    }
+  }, [selectedRegistry, data]);
+
+  if (!data) {
+    return null;
+  }
+  const sections = data.sections.data;
 
   const height = ((dimensions?.width || 1) / 16) * 9;
-  const widthPerBoard = `${100 / (results?.length || 1)}%`;
+  const widthPerBoard = `${100 / (sections?.length || 1)}%`;
 
-  const backgroundImageUrl = data?.hyperboard.background_image;
-  const grayscaleImages = !!data?.hyperboard.grayscale_images;
-  const borderColor = data?.hyperboard.tile_border_color || undefined;
+  const backgroundImageUrl = data?.background_image;
+  const grayscaleImages = !!data?.grayscale_images;
+  const borderColor = data?.tile_border_color || undefined;
 
   const getWidth = (registryId: string) => {
     if (selectedRegistry === registryId) {
@@ -116,27 +118,27 @@ export const HyperboardRenderer = ({
             <Spinner color="white" />
           </Center>
         )}
-        {!isLoading && !isLoadingError && results && (
+        {!isLoading && !isLoadingError && sections && (
           <>
-            {results.map((x) => (
+            {sections.map((section) => (
               <Flex
-                key={x.registry.id}
-                width={getWidth(x.registry.id)}
-                minWidth={getWidth(x.registry.id)}
+                key={section.collection.id}
+                width={getWidth(section.collection.id)}
+                minWidth={getWidth(section.collection.id)}
                 transition={"all 0.5s ease-out"}
                 overflow={"hidden"}
               >
                 <Hyperboard
                   onClickLabel={() =>
-                    onSelectedRegistryChangeHandler(x.registry.id)
+                    onSelectedRegistryChangeHandler(section.collection.id)
                   }
-                  label={x.label || "Unlabelled"}
+                  label={section.label || "Unlabelled"}
                   height={height}
                   grayscaleImages={grayscaleImages}
                   borderColor={borderColor}
                   data={
-                    (Object.values(x.content) || {}).map((x) =>
-                      registryContentItemToHyperboardEntry(x),
+                    (Object.values(section.owners) || {}).map((owner) =>
+                      registryContentItemToHyperboardEntry(owner),
                     ) || []
                   }
                 />

components/hyperboard/index.tsx

@@ -2,9 +2,9 @@ import * as d3 from "d3";
 import React, { useEffect, useRef, useState } from "react";
 import { HyperboardEntry } from "@/types/Hyperboard";
 import { Tile } from "@/components/hyperboard/Tile";
-import { useSize } from "@chakra-ui/react-use-size";
 import { Flex, Text } from "@chakra-ui/react";
 import _ from "lodash";
+import { useMeasure } from "react-use";
 
 export interface HyperboardProps {
   data: HyperboardEntry[];
@@ -23,9 +23,8 @@ type Leaf = {
 } & d3.HierarchyNode<HyperboardEntry>;
 
 export const Hyperboard = (props: HyperboardProps) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerRef, dimensions] = useMeasure<HTMLDivElement>();
   const ref = useRef<string>("");
-  const dimensions = useSize(containerRef);
 
   const [leaves, setLeaves] = useState<Leaf[]>([]);
 
@@ -42,7 +41,7 @@ export const Hyperboard = (props: HyperboardProps) => {
 
   const { height, width } = dimensions || {};
   useEffect(() => {
-    if (!containerRef.current) {
+    if (!containerRef) {
       return;
     }
     if (!dimensions) {
@@ -54,7 +53,7 @@ export const Hyperboard = (props: HyperboardProps) => {
       .attr("height", props.height)
       .attr("viewBox", `0 0 ${props.height} ${props.height}`);
     draw();
-  }, [containerRef.current, width, height]);
+  }, [containerRef, width, height, props.data.length]);
 
   const draw = () => {
     if (!dimensions) {