conseqential fixes in type-graph-visualizer

hashintel · Oct 8, 2024 · 33c5aea · 33c5aea
1 parent c7c435a
commit 33c5aea
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 53 deletions.
diff --git a/...ash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx b/...ash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx
@@ -59,17 +59,17 @@ interface EditEntitySlideOverProps {
    */
   entityId?: EntityId;
   /**
-   * If a modal container ref is provided, the modal will be attached to it (defaults to the MUI default, the body)
+   * If a container ref is provided, the slide will be attached to it (defaults to the MUI default, the body)
    */
-  modalContainerRef?: RefObject<HTMLDivElement>;
+  slideContainerRef?: RefObject<HTMLDivElement>;
 }
 
 /**
  * @todo move this to a shared location (it's also used in the Flows output and draft entities views)
  */
 export const EditEntitySlideOver = ({
   hideOpenInNew,
-  modalContainerRef,
+  slideContainerRef,
   open,
   onClose,
   onSubmit,
@@ -284,7 +284,7 @@ export const EditEntitySlideOver = ({
       onClose={onClose}
       anchor="right"
       ModalProps={{
-        container: modalContainerRef?.current ?? undefined,
+        container: slideContainerRef?.current ?? undefined,
       }}
       PaperProps={{
         sx: (theme) => ({

diff --git a/apps/hash-frontend/src/pages/shared/entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-table.tsx
@@ -92,8 +92,10 @@ export const EntitiesTable: FunctionComponent<{
   });
   const [showSearch, setShowSearch] = useState<boolean>(false);
 
-  const [selectedEntityTypeId, setSelectedEntityTypeId] =
-    useState<VersionedUrl | null>(null);
+  const [selectedEntityType, setSelectedEntityType] = useState<{
+    entityTypeId: VersionedUrl;
+    slideContainerRef?: RefObject<HTMLDivElement>;
+  } | null>(null);
 
   const {
     entityTypeBaseUrl,
@@ -224,7 +226,7 @@ export const EntitiesTable: FunctionComponent<{
 
   const [selectedEntity, setSelectedEntity] = useState<{
     entityId: EntityId;
-    modalContainerRef?: RefObject<HTMLDivElement>;
+    slideContainerRef?: RefObject<HTMLDivElement>;
     subgraph: Subgraph<EntityRootType>;
   } | null>(null);
 
@@ -241,7 +243,7 @@ export const EntitiesTable: FunctionComponent<{
 
         setSelectedEntity({
           entityId,
-          modalContainerRef,
+          slideContainerRef: modalContainerRef,
           subgraph: entitySubgraph,
         });
       }
@@ -317,7 +319,7 @@ export const EntitiesTable: FunctionComponent<{
                   if (columnId === "web") {
                     void router.push(`/${cellValue}`);
                   } else {
-                    setSelectedEntityTypeId(row.entityTypeId);
+                    setSelectedEntityType({ entityTypeId: row.entityTypeId });
                   }
                 },
               },
@@ -680,10 +682,11 @@ export const EntitiesTable: FunctionComponent<{
 
   return (
     <>
-      {selectedEntityTypeId && (
+      {selectedEntityType && (
         <TypeSlideOverStack
-          rootTypeId={selectedEntityTypeId}
-          onClose={() => setSelectedEntityTypeId(null)}
+          rootTypeId={selectedEntityType.entityTypeId}
+          onClose={() => setSelectedEntityType(null)}
+          slideContainerRef={selectedEntityType.slideContainerRef}
         />
       )}
       {selectedEntity ? (
@@ -702,7 +705,7 @@ export const EntitiesTable: FunctionComponent<{
              If we've been given a specific DOM element to contain the modal, pass it here.
              This is for use when attaching to the body is not suitable (e.g. a specific DOM element is full-screened).
            */
-          modalContainerRef={selectedEntity.modalContainerRef}
+          slideContainerRef={selectedEntity.slideContainerRef}
           open
           onClose={() => setSelectedEntity(null)}
           readonly

diff --git a/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack.tsx b/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack.tsx
@@ -1,14 +1,18 @@
 import type { VersionedUrl } from "@blockprotocol/type-system";
 import { Backdrop } from "@mui/material";
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, RefObject } from "react";
 import { useCallback, useState } from "react";
 
 import { TypeSlideOverSlide } from "./type-slide-over-stack/type-slide-over-slide";
 
 export const TypeSlideOverStack: FunctionComponent<{
   rootTypeId: VersionedUrl;
   onClose: () => void;
-}> = ({ rootTypeId, onClose }) => {
+  /**
+   * If a container ref is provided, the slide will be attached to it (defaults to the MUI default, the body)
+   */
+  slideContainerRef?: RefObject<HTMLDivElement>;
+}> = ({ rootTypeId, onClose, slideContainerRef }) => {
   const [animateOut, setAnimateOut] = useState(false);
   const [items, setItems] = useState<VersionedUrl[]>([rootTypeId]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
@@ -59,6 +63,7 @@ export const TypeSlideOverStack: FunctionComponent<{
           onForward={index < items.length - 1 ? handleForward : undefined}
           onClose={handleClose}
           onNavigateToType={handleNavigateToType}
+          slideContainerRef={slideContainerRef}
           typeUrl={typeId}
           stackPosition={index}
         />

diff --git a/...rontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx b/...rontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx
@@ -19,7 +19,7 @@ import {
 import type { EntityTypeWithMetadata } from "@local/hash-graph-types/ontology";
 import { componentsFromVersionedUrl } from "@local/hash-subgraph/type-system-patch";
 import { Box, ButtonBase, Slide, Tooltip } from "@mui/material";
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
 
 import { useEntityTypesContextRequired } from "../../../../shared/entity-types-context/hooks/use-entity-types-context-required";
@@ -109,6 +109,10 @@ interface TypeSlideOverSlideProps {
   onForward?: () => void;
   onClose: () => void;
   onNavigateToType: (url: VersionedUrl) => void;
+  /**
+   * If a container ref is provided, the slide will be attached to it (defaults to the MUI default, the body)
+   */
+  slideContainerRef?: RefObject<HTMLDivElement>;
   typeUrl: VersionedUrl;
 }
 
@@ -120,6 +124,7 @@ export const TypeSlideOverSlide: FunctionComponent<TypeSlideOverSlideProps> = ({
   onBack,
   onClose,
   onForward,
+  slideContainerRef,
 }) => {
   const { loading: loadingNamespace, routeNamespace } = useRouteNamespace();
 
@@ -185,6 +190,7 @@ export const TypeSlideOverSlide: FunctionComponent<TypeSlideOverSlideProps> = ({
 
   return (
     <Slide
+      container={slideContainerRef?.current ?? undefined}
       in={open && !animateOut}
       direction="left"
       onClick={(event) => event.stopPropagation()}

diff --git a/apps/hash-frontend/src/pages/shared/type-graph-visualizer.tsx b/apps/hash-frontend/src/pages/shared/type-graph-visualizer.tsx
@@ -6,6 +6,7 @@ import type {
   PropertyTypeWithMetadata,
 } from "@local/hash-graph-types/ontology";
 import { useTheme } from "@mui/material";
+import type { RefObject } from "react";
 import { useCallback, useMemo } from "react";
 
 import { useEntityTypesContextRequired } from "../../shared/entity-types-context/hooks/use-entity-types-context-required";
@@ -18,11 +19,23 @@ import type {
 
 const anythingNodeId = "anything";
 
+const defaultConfig = {
+  graphKey: "type-graph",
+  nodeHighlighting: {
+    direction: "All",
+    depth: 1,
+  },
+  nodeSizing: { mode: "static" },
+} as const;
+
 export const TypeGraphVisualizer = ({
   onTypeClick,
   types,
 }: {
-  onTypeClick: (typeId: VersionedUrl) => void;
+  onTypeClick: (
+    typeId: VersionedUrl,
+    screenContainerRef?: RefObject<HTMLDivElement>,
+  ) => void;
   types: (
     | DataTypeWithMetadata
     | EntityTypeWithMetadata
@@ -38,6 +51,7 @@ export const TypeGraphVisualizer = ({
     const nodesToAdd: GraphVizNode[] = [];
 
     const addedNodeIds = new Set<string>();
+    const addedEdgeIds = new Set<string>();
 
     const anythingNode: GraphVizNode = {
       color: palette.gray[30],
@@ -109,7 +123,7 @@ export const TypeGraphVisualizer = ({
          * The id is therefore based on the link type and the destination types.
          */
         const linkNodeId = `${linkTypeId}~${
-          destinationTypeIds?.join("-") ?? "anything"
+          destinationTypeIds?.sort().join("-") ?? "anything"
         }`;
 
         if (!addedNodeIds.has(linkNodeId)) {
@@ -143,12 +157,16 @@ export const TypeGraphVisualizer = ({
                 continue;
               }
 
-              edgesToAdd.push({
-                edgeId: `${linkNodeId}~${destinationTypeId}`,
-                size: 3,
-                source: linkNodeId,
-                target: destinationTypeId,
-              });
+              const edgeId = `${linkNodeId}~${destinationTypeId}`;
+              if (!addedEdgeIds.has(edgeId)) {
+                edgesToAdd.push({
+                  edgeId: `${linkNodeId}~${destinationTypeId}`,
+                  size: 3,
+                  source: linkNodeId,
+                  target: destinationTypeId,
+                });
+                addedEdgeIds.add(edgeId);
+              }
             }
           } else {
             /**
@@ -184,12 +202,16 @@ export const TypeGraphVisualizer = ({
           linkNodesByEntityTypeId[linkTypeId].instanceIds.push(linkNodeId);
         }
 
-        edgesToAdd.push({
-          edgeId: `${entityTypeId}~${linkNodeId}`,
-          size: 3,
-          source: entityTypeId,
-          target: linkNodeId,
-        });
+        const edgeId = `${entityTypeId}~${linkNodeId}`;
+        if (!addedEdgeIds.has(edgeId)) {
+          edgesToAdd.push({
+            edgeId,
+            size: 3,
+            source: entityTypeId,
+            target: linkNodeId,
+          });
+          addedEdgeIds.add(edgeId);
+        }
       }
     }
 
@@ -220,33 +242,21 @@ export const TypeGraphVisualizer = ({
   const onNodeClick = useCallback<
     NonNullable<GraphVisualizerProps["onNodeSecondClick"]>
   >(
-    ({ nodeId, isFullScreen }) => {
+    ({ nodeId, screenContainerRef }) => {
       if (nodeId === anythingNodeId) {
         return;
       }
 
-      if (isFullScreen) {
-        return;
-      }
-
       const typeVersionedUrl = nodeId.split("~")[0] as VersionedUrl;
 
-      onTypeClick(typeVersionedUrl);
+      onTypeClick(typeVersionedUrl, screenContainerRef);
     },
     [onTypeClick],
   );
 
   return (
     <GraphVisualizer
-      defaultConfig={{
-        filters: {},
-        graphKey: "type-graph",
-        nodeHighlighting: {
-          direction: "All",
-          depth: 1,
-        },
-        nodeSizing: { mode: "static" },
-      }}
+      defaultConfig={defaultConfig}
       onNodeSecondClick={onNodeClick}
       edges={edges}
       nodes={nodes}

diff --git a/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx b/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx
@@ -15,7 +15,7 @@ import { isExternalOntologyElementMetadata } from "@local/hash-subgraph";
 import { Box, useTheme } from "@mui/material";
 import { format } from "date-fns";
 import { useRouter } from "next/router";
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, RefObject } from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
 
 import {
@@ -125,8 +125,10 @@ export const TypesTable: FunctionComponent<{
     limitToWebs: false,
   });
 
-  const [selectedEntityTypeId, setSelectedEntityTypeId] =
-    useState<VersionedUrl | null>(null);
+  const [selectedEntityType, setSelectedEntityType] = useState<{
+    entityTypeId: VersionedUrl;
+    slideContainerRef?: RefObject<HTMLDivElement>;
+  } | null>(null);
 
   const { isSpecialEntityTypeLookup } = useEntityTypesContextRequired();
 
@@ -355,7 +357,7 @@ export const TypesTable: FunctionComponent<{
                 value: row.title,
                 onClick: () => {
                   if (row.kind === "entity-type") {
-                    setSelectedEntityTypeId(row.typeId);
+                    setSelectedEntityType({ entityTypeId: row.typeId });
                   } else {
                     void router.push(generateLinkParameters(row.typeId).href);
                   }
@@ -456,12 +458,22 @@ export const TypesTable: FunctionComponent<{
 
   const currentlyDisplayedRowsRef = useRef<TypesTableRow[] | null>(null);
 
+  const onTypeClick = useCallback(
+    (typeId: VersionedUrl, slideContainerRef?: RefObject<HTMLDivElement>) =>
+      setSelectedEntityType({
+        entityTypeId: typeId,
+        slideContainerRef,
+      }),
+    [],
+  );
+
   return (
     <>
-      {selectedEntityTypeId && (
+      {selectedEntityType && (
         <TypeSlideOverStack
-          rootTypeId={selectedEntityTypeId}
-          onClose={() => setSelectedEntityTypeId(null)}
+          rootTypeId={selectedEntityType.entityTypeId}
+          onClose={() => setSelectedEntityType(null)}
+          slideContainerRef={selectedEntityType.slideContainerRef}
         />
       )}
       <Box>
@@ -530,7 +542,7 @@ export const TypesTable: FunctionComponent<{
         ) : (
           <Box height={maxTableHeight}>
             <TypeGraphVisualizer
-              onTypeClick={setSelectedEntityTypeId}
+              onTypeClick={onTypeClick}
               types={filteredTypes}
             />
           </Box>