code cleanup

admin/src/components/CustomNode.js

@@ -18,7 +18,7 @@ import { RelationIcon } from "./RelationIcon";
 import { getIcon } from "../utils/themeUtils";
 import "./CustomNode.css";
 
-export default function CustomNode({ data }) {
+export function CustomNode({ data }) {
   let attributesToShow = Object.entries(data.attributes);
 
   if (data.options.showRelationsOnly) {

admin/src/components/OptionsBar.js

@@ -6,7 +6,7 @@ import {
 import React from "react";
 import { useDigramStore } from "../store";
 
-export default function OptionsBar() {
+export function OptionsBar() {
   const { options, toggleOption } = useDigramStore();
   return (
     <div

admin/src/pages/HomePage/index.js

@@ -1,3 +1,5 @@
+import "reactflow/dist/style.css";
+import "./styles.css";
 import React, { useEffect, useMemo, useRef } from "react";
 import { useFetchClient } from "@strapi/helper-plugin";
 import { HeaderLayout, Icon, Button } from "@strapi/design-system";
@@ -8,13 +10,11 @@ import {
   SmartStepEdge,
   SmartStraightEdge,
 } from "@tisoap/react-flow-smart-edge";
-import CustomNode from "../../components/CustomNode";
 import { Background, ControlButton, Controls, ReactFlow } from "reactflow";
 import { getBackgroundColor } from "../../utils/themeUtils";
-import OptionsBar from "../../components/OptionsBar";
-import "reactflow/dist/style.css";
-import "./styles.css";
 import { useDigramStore } from "../../store";
+import { CustomNode } from "../../components/CustomNode";
+import { OptionsBar } from "../../components/OptionsBar";
 import { ExportModal } from "../../components/ExportModal";
 
 const useEffectSkipInitial = (func, deps) => {
@@ -86,7 +86,7 @@ const HomePage = () => {
         title="Content-Type Explorer"
         primaryAction={
           <Button
-            variant="secondary"
+            variant="primary"
             startIcon={<Download />}
             onClick={() => setShowModal(true)}
           >
@@ -94,7 +94,11 @@ const HomePage = () => {
           </Button>
         }
         secondaryAction={
-          <Button variant="primary" startIcon={<Refresh />} onClick={regenrate}>
+          <Button
+            variant="secondary"
+            startIcon={<Refresh />}
+            onClick={regenrate}
+          >
             Regenrate
           </Button>
         }
@@ -113,7 +117,6 @@ const HomePage = () => {
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
-          // onInit={fetchData}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
           fitView
@@ -121,7 +124,6 @@ const HomePage = () => {
           preventScrolling={!options.scrollMode}
           snapGrid={[20, 20]}
           snapToGrid={options.snapToGrid}
-          // viewport={diagram.viewport}
           fitViewOptions={{
             maxZoom: 1,
           }}

admin/src/utils/dataUtils.js

@@ -10,7 +10,9 @@ export function createNodes(contentTypes, options) {
           id: node.key,
           position: {
             x: (index % CARDS_PER_ROW) * 320,
-            y: ((index - (index % CARDS_PER_ROW)) / CARDS_PER_ROW) * 560,
+            y:
+              ((index - (index % CARDS_PER_ROW)) / CARDS_PER_ROW) * 560 +
+              (index % 2) * 48,
           },
           type: "special",
 
@@ -38,7 +40,11 @@ export function createEdegs(contentTypes, options) {
     Object.keys(contentType.attributes).map((attr) => {
       if (contentType.attributes[attr].type == "relation") {
         // only add edge if target node is not excluded (not hidden)
-        if (contentTypes.some((node) => node.key === contentType.attributes[attr].target)) {
+        if (
+          contentTypes.some(
+            (node) => node.key === contentType.attributes[attr].target
+          )
+        ) {
           newEdges = [
             ...newEdges,
             {

package.json

@@ -35,8 +35,8 @@
     }
   ],
   "engines": {
-    "node": ">=14.19.1 <=18.x.x",
+    "node": ">=14.19.1 <=20.x.x",
     "npm": ">=6.0.0"
   },
   "license": "MIT"
-}
+}