limit schema size (#588)

* limit schema size * change limit * Update styling package (#589) * update styling system * update * change font weight
graphql-editor · Jan 12, 2024 · a93f36c · a93f36c
1 parent 183c4ed
commit a93f36c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@aexol-studio/hooks": "^0.1.28",
-    "@aexol-studio/styling-system": "^0.1.28",
+    "@aexol-studio/styling-system": "^0.2.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "color2k": "^1.2.4",
@@ -64,4 +64,4 @@
     "@types/d3": "^7.4.0",
     "@types/diff": "^5.0.2"
   }
-}
+}
diff --git a/packages/editor/src/Relation/PanZoom/ControlsBar.tsx b/packages/editor/src/Relation/PanZoom/ControlsBar.tsx
@@ -57,6 +57,7 @@ export const ControlsBar: React.FC<{
           labelPosition="start"
           onChange={() => setCtrlToZoom(!ctrlToZoom)}
           checked={ctrlToZoom}
+          wrapperCss={{ fontWeight: 300 }}
         />
         <ZoomWrapper>
           <IconWrapper
@@ -83,26 +84,30 @@ export const ControlsBar: React.FC<{
             labelPosition="start"
             onChange={() => setLibraryNodesOn(!libraryNodesOn)}
             checked={libraryNodesOn}
+            wrapperCss={{ fontWeight: 300 }}
           />
         )}
         <Checkbox
           label="fields"
           labelPosition="start"
           onChange={() => setFieldsOn(!fieldsOn)}
           checked={fieldsOn}
+          wrapperCss={{ fontWeight: 300 }}
         />
         <Checkbox
           label="scalars"
           disabled={!fieldsOn}
           labelPosition="start"
           onChange={() => setBaseTypesOn(!baseTypesOn)}
           checked={fieldsOn ? baseTypesOn : false}
+          wrapperCss={{ fontWeight: 300 }}
         />
         <Checkbox
           label="inputs"
           labelPosition="start"
           onChange={() => setInputsOn(!inputsOn)}
           checked={inputsOn}
+          wrapperCss={{ fontWeight: 300 }}
         />
         <Tooltip title="Export to png" position="left-bottom">
           <IconWrapper onClick={() => downloadPng()}>

diff --git a/packages/editor/src/Relation/PanZoom/PanZoom.tsx b/packages/editor/src/Relation/PanZoom/PanZoom.tsx
@@ -26,6 +26,9 @@ import {
 } from "@/Relation/PanZoom/LinesDiagram/LinesDiagram";
 import { nodeFilter } from "@/Relation/shared/nodeFilter";
 import { useClickDetector } from "@/shared/hooks/useClickDetector";
+
+const MAX_SCHEMA_SIZE = 20000 * 20000;
+
 export const PanZoom: React.FC<{
   nodes: ParserField[];
   hide?: boolean;
@@ -74,7 +77,18 @@ export const PanZoom: React.FC<{
   }, [nodes, baseTypesOn, inputsOn, libraryNodesOn]);
 
   const downloadPng = useCallback(() => {
-    if (viewportParams?.height) {
+    if (viewportParams?.height && viewportParams?.width) {
+      if (viewportParams.height * viewportParams.width > MAX_SCHEMA_SIZE) {
+        createToast({
+          message:
+            "Schema is too big to be printed as a whole. Please focus some nodes or hide part of them before printing.",
+          variant: "error",
+          closeMethod: {
+            method: "closeManually",
+          },
+        });
+        return;
+      }
       setLoading(true);
       const ctx = getContext();
       setParamsBeforeExport({

diff --git a/packages/editor/src/shared/dialogs/ImportSchema.tsx b/packages/editor/src/shared/dialogs/ImportSchema.tsx
@@ -67,7 +67,7 @@ export const ImportSchema: React.FC<{
     try {
       if (!url.startsWith("http://") && !url.startsWith("https://")) {
         createToast({
-          message: `Please add https:// or http:// at the beggining of your URL we don't want to guess it.`,
+          message: `Please add https:// or http:// at the beginning of your URL we don't want to guess it.`,
           variant: "error",
         });
         return false;
@@ -149,7 +149,7 @@ export const ImportSchema: React.FC<{
                           variant: "error",
                         })
                       : createToast({
-                          message: "Unkown import error",
+                          message: "Unknown import error",
                           variant: "error",
                         });
                   });
@@ -184,7 +184,7 @@ export const ImportSchema: React.FC<{
                           variant: "error",
                         })
                       : createToast({
-                          message: "Unkown import error",
+                          message: "Unknown import error",
                           variant: "error",
                         });
                   });
@@ -210,6 +210,7 @@ export const ImportSchema: React.FC<{
             label="Proxy to avoid CORS"
             checked={proxyImport}
             onChange={() => setProxyImport(!proxyImport)}
+            wrapperCss={{ fontWeight: 300 }}
           />
           <Typography variant="caption">Headers</Typography>
         </Stack>