Add search for relationships

src/components/control_panel.jsx

@@ -319,7 +319,7 @@ export default function ControlPanel() {
                         </Dropdown.Menu>
                       }
                     >
-                      <div className="px-3 py-1 hover:bg-gray-100 rounded-md">
+                      <div className="px-3 py-1 hover:bg-gray-100 rounded">
                         {category}
                       </div>
                     </Dropdown>
@@ -363,7 +363,7 @@ export default function ControlPanel() {
           </div>
         </nav>
       )}
-      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700">
+      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
         <div className="flex justify-start items-center">
           <Dropdown
             position="bottomLeft"
@@ -396,7 +396,7 @@ export default function ControlPanel() {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
               <i className="fa-solid fa-table-list"></i> <IconCaretdown />
             </div>
           </Dropdown>
@@ -435,33 +435,27 @@ export default function ControlPanel() {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
               zoom <IconCaretdown />
             </div>
           </Dropdown>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
             title="Zoom in"
           >
             <i className="fa-solid fa-magnifying-glass-plus"></i>
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
             title="Zoom out"
           >
             <i className="fa-solid fa-magnifying-glass-minus"></i>
           </button>
           <Divider layout="vertical" margin="8px" />
-          <button
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Undo">
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Undo"
-          >
             <i className="fa-solid fa-rotate-left "></i>
           </button>
-          <button
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Redo">
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Redo"
-          >
             <i className="fa-solid fa-rotate-right"></i>
           </button>
           <Divider layout="vertical" margin="8px" />
@@ -478,31 +472,25 @@ export default function ControlPanel() {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
               <i className="fa-solid fa-plus"></i> <IconCaretdown />
             </div>
           </Dropdown>
-          <button
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Edit"
-          >
             <i className="fa-solid fa-pen-to-square"></i>
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
             title="Delete"
           >
             <i className="fa-solid fa-trash"></i>
           </button>
           <Divider layout="vertical" margin="8px" />
-          <button
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Save">
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Save"
-          >
             <i className="fa-regular fa-floppy-disk"></i>
           </button>
           <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
             title="Commit"
           >
             <i className="fa-solid fa-code-branch"></i>

src/components/editor_panel.jsx

@@ -30,25 +30,18 @@ const EditorPanel = (props) => {
 
   const tabList = [
     { tab: "Tables", itemKey: "1" },
-    { tab: "References", itemKey: "2" },
+    { tab: "Relationships", itemKey: "2" },
     { tab: "Shapes", itemKey: "3" },
     { tab: "Editor", itemKey: "4" },
   ];
   const contentList = [
-    <div>
+    <TableOverview tables={props.tables} setTables={props.setTables} />,
-      <TableOverview tables={props.tables} setTables={props.setTables} />
-    </div>,
-    <div>
     <ReferenceOverview
       relationships={props.relationships}
       setRelationships={props.setRelationships}
       tables={props.tables}
-      />
+    />,
-    </div>,
+    <Shape />,
-    <div>
-      <Shape />
-    </div>,
-    <div>
     <CodeMirror
       value={props.code}
       height="100%"
@@ -57,13 +50,12 @@ const EditorPanel = (props) => {
       onChange={(e) => {
         props.setCode(e);
       }}
-      />
+    />,
-    </div>,
   ];
 
   return (
     <div className="h-screen flex overflow-clip relative">
-      <div className="mt-2" style={{ width: `${props.width}px` }}>
+      <div style={{ width: `${props.width}px` }}>
         <Tabs
           type="card"
           tabList={tabList}
@@ -72,7 +64,7 @@ const EditorPanel = (props) => {
           }}
           collapsible
         >
-          {contentList[parseInt(tab) - 1]}
+          <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
         </Tabs>
         <button
           onClick={() => {
@@ -151,7 +143,9 @@ const EditorPanel = (props) => {
         </button>
       </div>
       <div
-        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${props.resize? "bg-slate-300": ""}`}
+        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${
+          props.resize ? "bg-slate-300" : ""
+        }`}
         onMouseDown={() => props.setResize(true)}
       >
         <div className="w-1 border-x border-white h-1/6" />

src/components/reference_overview.jsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import {
+  AutoComplete,
   Collapse,
+  Empty,
   Form,
   Row,
   Col,
@@ -14,7 +16,12 @@ import {
   IconDeleteStroked,
   IconLoopTextStroked,
   IconMore,
+  IconSearch,
 } from "@douyinfe/semi-icons";
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from "@douyinfe/semi-illustrations";
 import { Cardinality, Constraint } from "../data/data";
 
 export default function ReferenceOverview(props) {
@@ -28,10 +35,67 @@ export default function ReferenceOverview(props) {
       dataIndex: "foreign",
     },
   ];
+  const [refActiveIndex, setRefActiveIndex] = useState("");
+  const [value, setValue] = useState("");
+  const [filteredResult, setFilteredResult] = useState(
+    props.relationships.map((t) => {
+      return t.name;
+    })
+  );
+
+  const handleStringSearch = (value) => {
+    setFilteredResult(
+      props.relationships
+        .map((t) => {
+          return t.name;
+        })
+        .filter((i) => i.includes(value))
+    );
+  };
   return (
-    <Collapse>
+    <>
-      {props.relationships.map((r, i) => (
+      <AutoComplete
-        <Collapse.Panel key={i} header={<div>{r.name}</div>} itemKey={`${i}`}>
+        data={filteredResult}
+        value={value}
+        showClear
+        prefix={<IconSearch />}
+        placeholder="Search..."
+        emptyContent={<div className="p-3">No relationships found</div>}
+        onSearch={(v) => handleStringSearch(v)}
+        onChange={(v) => setValue(v)}
+        onSelect={(v) => {
+          const { id } = props.relationships.find((t) => t.name === v);
+          setRefActiveIndex(`${id}`);
+          document
+            .getElementById(`scroll_ref_${id}`)
+            .scrollIntoView({ behavior: "smooth" });
+        }}
+        className="w-full"
+      />
+      <Collapse
+        activeKey={refActiveIndex}
+        onChange={(k) => setRefActiveIndex(k)}
+        accordion
+      >
+        {props.relationships.length <= 0 ? (
+          <div className="select-none">
+            <Empty
+              image={
+                <IllustrationNoContent style={{ width: 160, height: 160 }} />
+              }
+              darkModeImage={
+                <IllustrationNoContentDark
+                  style={{ width: 160, height: 160 }}
+                />
+              }
+              title="No relationships"
+              description="Drag to connect fields and form relationships!"
+            />
+          </div>
+        ) : (
+          props.relationships.map((r, i) => (
+            <div id={`scroll_ref_${r.id}`} key={i}>
+              <Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
                 <Form
                   onChange={(value) =>
                     props.setRelationships((prev) =>
@@ -69,8 +133,9 @@ export default function ReferenceOverview(props) {
                                       r.startFieldId
                                     ].name,
                                   primary:
-                              props.tables[r.endTableId].fields[r.endFieldId]
+                                    props.tables[r.endTableId].fields[
-                                .name,
+                                      r.endFieldId
+                                    ].name,
                                 },
                               ]}
                               pagination={false}
@@ -179,7 +244,10 @@ export default function ReferenceOverview(props) {
                   </Col>
                 </Row>
               </Collapse.Panel>
-      ))}
+            </div>
+          ))
+        )}
       </Collapse>
+    </>
   );
 }

src/components/table_overview.jsx

@@ -80,7 +80,6 @@ export default function TableOverview(props) {
 
   return (
     <>
-      <div className="p-2">
       <Row gutter={6}>
         <Col span={16}>
           <AutoComplete
@@ -93,10 +92,10 @@ export default function TableOverview(props) {
             onSearch={(v) => handleStringSearch(v)}
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
-                const { id, name } = props.tables.find((t) => t.name === v);
+              const { id } = props.tables.find((t) => t.name === v);
               setTableActiveKey(`${id}`);
               document
-                  .getElementById(`${name}_scroll_id`)
+                .getElementById(`scroll_table_${id}`)
                 .scrollIntoView({ behavior: "smooth" });
             }}
             className="w-full"
@@ -140,7 +139,6 @@ export default function TableOverview(props) {
           </Button>
         </Col>
       </Row>
-      </div>
       <Collapse
         activeKey={tableActiveKey}
         onChange={(k) => setTableActiveKey(k)}
@@ -163,7 +161,7 @@ export default function TableOverview(props) {
           </div>
         ) : (
           props.tables.map((t, i) => (
-            <div id={`${t.name}_scroll_id`} key={t.id}>
+            <div id={`scroll_table_${t.id}`} key={t.id}>
               <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
                 {t.fields.map((f, j) => (
                   <Form

src/pages/editor.jsx

@@ -12,12 +12,12 @@ export default function Editor(props) {
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
   const [resize, setResize] = useState(false);
-  const [width, setWidth] = useState(320);
+  const [width, setWidth] = useState(340);
 
   const dragHandler = (e) => {
     if (!resize) return;
     const w = e.clientX;
-    if (w > 320) setWidth(w);
+    if (w > 340) setWidth(w);
   };
 
   return (