From 8108caeebb4234b2d31a1e9e40ce55b490ad6335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Ostrowi=C5=84ski?=
 <p.ostrowinski@gmail.com>
Date: Mon, 8 May 2023 17:21:05 +0200
Subject: [PATCH] Add warning info about too many relations (#791)

---
 mwdb/web/src/components/RelationsPlot.jsx | 84 ++++++++++++++++++++---
 1 file changed, 75 insertions(+), 9 deletions(-)

diff --git a/mwdb/web/src/components/RelationsPlot.jsx b/mwdb/web/src/components/RelationsPlot.jsx
index 8e6e0511c..16049b41a 100644
--- a/mwdb/web/src/components/RelationsPlot.jsx
+++ b/mwdb/web/src/components/RelationsPlot.jsx
@@ -1,4 +1,11 @@
-import React, { Suspense, useState, useLayoutEffect, useContext } from "react";
+import React, {
+    Suspense,
+    useState,
+    useLayoutEffect,
+    useContext,
+    useEffect,
+} from "react";
+import { isEmpty } from "lodash";
 import { useSearchParams } from "react-router-dom";
 
 import { APIContext } from "@mwdb-web/commons/api";
@@ -8,6 +15,12 @@ import { Tag } from "@mwdb-web/commons/ui";
 
 const DagreD3Plot = React.lazy(() => import("./DagreD3Plot"));
 
+const nodeStatuses = {
+    initial: "initial",
+    showGraph: "showGraph",
+    showWarning: "showWarning",
+};
+
 function RelationsNode(props) {
     const typeMapping = {
         file: "file",
@@ -66,6 +79,31 @@ function RelationsNode(props) {
     );
 }
 
+function RelationToManyNode({ setNodesStatus, nodesLength }) {
+    console.log({ setNodesStatus, nodesLength });
+    return (
+        <>
+            <div
+                className="alert alert-warning"
+                style={{ margin: "10px 20px", fontSize: 18 }}
+            >
+                The relationships for a given object will amount to{" "}
+                <span className="font-weight-bold">{nodesLength}</span>{" "}
+                elements, displaying such a quantity of connections may affect
+                the application's performance.
+            </div>
+            <div class="text-center mb-2">
+                <button
+                    className="btn btn-warning"
+                    onClick={() => setNodesStatus(nodeStatuses.showGraph)}
+                >
+                    Show relations anyway
+                </button>
+            </div>
+        </>
+    );
+}
+
 function RelationsPlot(props) {
     const api = useContext(APIContext);
     const [searchParams, setSearchParams] = useSearchParams();
@@ -75,6 +113,8 @@ function RelationsPlot(props) {
         width: "100%",
     };
 
+    const [nodesStatus, setNodesStatus] = useState("initial");
+
     const [nodes, setNodes] = useState({
         nodes: [],
         edges: [],
@@ -187,16 +227,42 @@ function RelationsPlot(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        const limit = 500;
+        if (!isEmpty(nodes.nodes) || !isEmpty(nodes.edges)) {
+            const elementsLength = Math.max(
+                nodes.nodes.length,
+                nodes.edges.length
+            );
+            setNodesStatus(
+                elementsLength < limit
+                    ? nodeStatuses.showGraph
+                    : nodeStatuses.showWarning
+            );
+        }
+    }, [nodes]);
+
     return (
         <Suspense fallback={<div />}>
-            <DagreD3Plot
-                width={defaultProps.width}
-                height={height ? height : defaultProps.height}
-                nodes={nodes.nodes}
-                edges={nodes.edges}
-                onNodeClick={onNodeClick}
-                nodeComponent={RelationsNode}
-            />
+            {nodesStatus === nodeStatuses.showGraph && (
+                <DagreD3Plot
+                    width={defaultProps.width}
+                    height={height ? height : defaultProps.height}
+                    nodes={nodes.nodes}
+                    edges={nodes.edges}
+                    onNodeClick={onNodeClick}
+                    nodeComponent={RelationsNode}
+                />
+            )}
+            {nodesStatus === nodeStatuses.showWarning && (
+                <RelationToManyNode
+                    setNodesStatus={setNodesStatus}
+                    nodesLength={Math.max(
+                        nodes.nodes.length,
+                        nodes.edges.length
+                    )}
+                />
+            )}
         </Suspense>
     );
 }