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
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Undo"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Undo">
             <i className="fa-solid fa-rotate-left "></i>
           </button>
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Redo"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" 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
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Edit"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" 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
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Save"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" 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,40 +30,32 @@ 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} />
-    </div>,
-    <div>
-      <ReferenceOverview
-        relationships={props.relationships}
-        setRelationships={props.setRelationships}
-        tables={props.tables}
-      />
-    </div>,
-    <div>
-      <Shape />
-    </div>,
-    <div>
-      <CodeMirror
-        value={props.code}
-        height="100%"
-        theme={myTheme}
-        extensions={[sql()]}
-        onChange={(e) => {
-          props.setCode(e);
-        }}
-      />
-    </div>,
+    <TableOverview tables={props.tables} setTables={props.setTables} />,
+    <ReferenceOverview
+      relationships={props.relationships}
+      setRelationships={props.setRelationships}
+      tables={props.tables}
+    />,
+    <Shape />,
+    <CodeMirror
+      value={props.code}
+      height="100%"
+      theme={myTheme}
+      extensions={[sql()]}
+      onChange={(e) => {
+        props.setCode(e);
+      }}
+    />,
   ];
 
   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,158 +35,219 @@ 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) => (
-        <Collapse.Panel key={i} header={<div>{r.name}</div>} itemKey={`${i}`}>
-          <Form
-            onChange={(value) =>
-              props.setRelationships((prev) =>
-                prev.map((e, idx) =>
-                  idx === i ? { ...e, ...value.values } : e
-                )
-              )
-            }
-          >
-            <div className="flex justify-between items-center my-1">
-              <div className="me-3">
-                <strong>Primary: </strong>
-                {props.tables[r.endTableId].name}
-              </div>
-              <div className="mx-1">
-                <strong>Foreign: </strong>
-                {props.tables[r.startTableId].name}
-              </div>
-              <div className="ms-1">
-                <Popover
-                  content={
-                    <div className="p-2 w-[260px]">
-                      <Table
-                        columns={columns}
-                        dataSource={[
-                          {
-                            key: "1",
-                            foreign: props.tables[r.startTableId].name,
-                            primary: props.tables[r.endTableId].name,
-                          },
-                          {
-                            key: "2",
-                            foreign:
-                              props.tables[r.startTableId].fields[
-                                r.startFieldId
-                              ].name,
-                            primary:
-                              props.tables[r.endTableId].fields[r.endFieldId]
-                                .name,
-                          },
-                        ]}
-                        pagination={false}
-                        bordered
-                      />
-                      <div className="mt-2">
-                        <Button icon={<IconLoopTextStroked />} block>
-                          Swap
-                        </Button>
-                      </div>
-                    </div>
-                  }
-                  trigger="click"
-                  position="rightTop"
-                  showArrow
-                >
-                  <Button icon={<IconMore />} type="tertiary"></Button>
-                </Popover>
-              </div>
-            </div>
-            <Form.Input initValue={r.name} field="name" label="Name" />
-            <Form.Select
-              optionList={Object.values(Cardinality).map((v) => ({
-                label: v,
-                value: v,
-              }))}
-              field="cardinality"
-              label="Cardinality"
-              initValue={r.cardinality}
-              className="w-full"
-            ></Form.Select>
-            <Row gutter={6}>
-              <Col span={12}>
-                <Form.Select
-                  optionList={Object.values(Constraint).map((v) => ({
-                    label: v,
-                    value: v,
-                  }))}
-                  field="updateConstraint"
-                  label="On update"
-                  initValue={r.updateConstraint}
-                  className="w-full"
-                ></Form.Select>
-              </Col>
-              <Col span={12}>
-                <Form.Select
-                  optionList={Object.values(Constraint).map((v) => ({
-                    label: v,
-                    value: v,
-                  }))}
-                  field="deleteConstraint"
-                  label="On delete"
-                  initValue={r.deleteConstraint}
-                  className="w-full"
-                ></Form.Select>
-              </Col>
-            </Row>
-            <div className="flex justify-between items-center my-3">
-              <label htmlFor="unique" className="font-medium text-black">
-                Mandetory
-              </label>
-              <Checkbox
-                value="mandetory"
-                defaultChecked={r.mandetory}
-                onChange={(checkedValues) =>
-                  props.setRelationships((prev) =>
-                    prev.map((e, idx) =>
-                      idx === i
-                        ? {
-                            ...e,
-                            [checkedValues.target.value]:
-                              checkedValues.target.checked,
-                          }
-                        : e
+    <>
+      <AutoComplete
+        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) =>
+                      prev.map((e, idx) =>
+                        idx === i ? { ...e, ...value.values } : e
+                      )
                     )
-                  )
-                }
-              ></Checkbox>
+                  }
+                >
+                  <div className="flex justify-between items-center my-1">
+                    <div className="me-3">
+                      <strong>Primary: </strong>
+                      {props.tables[r.endTableId].name}
+                    </div>
+                    <div className="mx-1">
+                      <strong>Foreign: </strong>
+                      {props.tables[r.startTableId].name}
+                    </div>
+                    <div className="ms-1">
+                      <Popover
+                        content={
+                          <div className="p-2 w-[260px]">
+                            <Table
+                              columns={columns}
+                              dataSource={[
+                                {
+                                  key: "1",
+                                  foreign: props.tables[r.startTableId].name,
+                                  primary: props.tables[r.endTableId].name,
+                                },
+                                {
+                                  key: "2",
+                                  foreign:
+                                    props.tables[r.startTableId].fields[
+                                      r.startFieldId
+                                    ].name,
+                                  primary:
+                                    props.tables[r.endTableId].fields[
+                                      r.endFieldId
+                                    ].name,
+                                },
+                              ]}
+                              pagination={false}
+                              bordered
+                            />
+                            <div className="mt-2">
+                              <Button icon={<IconLoopTextStroked />} block>
+                                Swap
+                              </Button>
+                            </div>
+                          </div>
+                        }
+                        trigger="click"
+                        position="rightTop"
+                        showArrow
+                      >
+                        <Button icon={<IconMore />} type="tertiary"></Button>
+                      </Popover>
+                    </div>
+                  </div>
+                  <Form.Input initValue={r.name} field="name" label="Name" />
+                  <Form.Select
+                    optionList={Object.values(Cardinality).map((v) => ({
+                      label: v,
+                      value: v,
+                    }))}
+                    field="cardinality"
+                    label="Cardinality"
+                    initValue={r.cardinality}
+                    className="w-full"
+                  ></Form.Select>
+                  <Row gutter={6}>
+                    <Col span={12}>
+                      <Form.Select
+                        optionList={Object.values(Constraint).map((v) => ({
+                          label: v,
+                          value: v,
+                        }))}
+                        field="updateConstraint"
+                        label="On update"
+                        initValue={r.updateConstraint}
+                        className="w-full"
+                      ></Form.Select>
+                    </Col>
+                    <Col span={12}>
+                      <Form.Select
+                        optionList={Object.values(Constraint).map((v) => ({
+                          label: v,
+                          value: v,
+                        }))}
+                        field="deleteConstraint"
+                        label="On delete"
+                        initValue={r.deleteConstraint}
+                        className="w-full"
+                      ></Form.Select>
+                    </Col>
+                  </Row>
+                  <div className="flex justify-between items-center my-3">
+                    <label htmlFor="unique" className="font-medium text-black">
+                      Mandetory
+                    </label>
+                    <Checkbox
+                      value="mandetory"
+                      defaultChecked={r.mandetory}
+                      onChange={(checkedValues) =>
+                        props.setRelationships((prev) =>
+                          prev.map((e, idx) =>
+                            idx === i
+                              ? {
+                                  ...e,
+                                  [checkedValues.target.value]:
+                                    checkedValues.target.checked,
+                                }
+                              : e
+                          )
+                        )
+                      }
+                    ></Checkbox>
+                  </div>
+                </Form>
+                <Row gutter={6} className="mt-1">
+                  <Col span={12}>
+                    <Button
+                      icon={<IconRowsStroked />}
+                      disabled={r.cardinality === Cardinality.ONE_TO_ONE}
+                      block
+                    >
+                      Extract to table
+                    </Button>
+                  </Col>
+                  <Col span={12}>
+                    <Button
+                      icon={<IconDeleteStroked />}
+                      block
+                      type="danger"
+                      onClick={() =>
+                        props.setRelationships((prev) =>
+                          prev
+                            .filter((e) => e.id !== i)
+                            .map((e, idx) => ({ ...e, id: idx }))
+                        )
+                      }
+                    >
+                      Delete
+                    </Button>
+                  </Col>
+                </Row>
+              </Collapse.Panel>
             </div>
-          </Form>
-          <Row gutter={6} className="mt-1">
-            <Col span={12}>
-              <Button
-                icon={<IconRowsStroked />}
-                disabled={r.cardinality === Cardinality.ONE_TO_ONE}
-                block
-              >
-                Extract to table
-              </Button>
-            </Col>
-            <Col span={12}>
-              <Button
-                icon={<IconDeleteStroked />}
-                block
-                type="danger"
-                onClick={() =>
-                  props.setRelationships((prev) =>
-                    prev
-                      .filter((e) => e.id !== i)
-                      .map((e, idx) => ({ ...e, id: idx }))
-                  )
-                }
-              >
-                Delete
-              </Button>
-            </Col>
-          </Row>
-        </Collapse.Panel>
-      ))}
-    </Collapse>
+          ))
+        )}
+      </Collapse>
+    </>
   );
 }

src/components/table_overview.jsx

@@ -80,67 +80,65 @@ export default function TableOverview(props) {
 
   return (
     <>
-      <div className="p-2">
-        <Row gutter={6}>
-          <Col span={16}>
-            <AutoComplete
-              data={filteredResult}
-              value={value}
-              showClear
-              prefix={<IconSearch />}
-              placeholder="Search..."
-              emptyContent={<div className="p-3">No tables found</div>}
-              onSearch={(v) => handleStringSearch(v)}
-              onChange={(v) => setValue(v)}
-              onSelect={(v) => {
-                const { id, name } = props.tables.find((t) => t.name === v);
-                setTableActiveKey(`${id}`);
-                document
-                  .getElementById(`${name}_scroll_id`)
-                  .scrollIntoView({ behavior: "smooth" });
-              }}
-              className="w-full"
-            />
-          </Col>
-          <Col span={8}>
-            <Button
-              icon={<IconPlus />}
-              block
-              onClick={() => {
-                const id =
-                  props.tables.length === 0
-                    ? 0
-                    : props.tables[props.tables.length - 1].id + 1;
-                const newTable = {
-                  id: id,
-                  name: `table_${id}`,
-                  x: 0,
-                  y: 0,
-                  fields: [
-                    {
-                      name: "id",
-                      type: "UUID",
-                      default: "",
-                      check: "",
-                      primary: true,
-                      unique: true,
-                      notNull: true,
-                      increment: true,
-                      comment: "",
-                    },
-                  ],
-                  comment: "",
-                  indices: [],
-                  color: defaultTableTheme,
-                };
-                props.setTables((prev) => [...prev, newTable]);
-              }}
-            >
-              Add table
-            </Button>
-          </Col>
-        </Row>
-      </div>
+      <Row gutter={6}>
+        <Col span={16}>
+          <AutoComplete
+            data={filteredResult}
+            value={value}
+            showClear
+            prefix={<IconSearch />}
+            placeholder="Search..."
+            emptyContent={<div className="p-3">No tables found</div>}
+            onSearch={(v) => handleStringSearch(v)}
+            onChange={(v) => setValue(v)}
+            onSelect={(v) => {
+              const { id } = props.tables.find((t) => t.name === v);
+              setTableActiveKey(`${id}`);
+              document
+                .getElementById(`scroll_table_${id}`)
+                .scrollIntoView({ behavior: "smooth" });
+            }}
+            className="w-full"
+          />
+        </Col>
+        <Col span={8}>
+          <Button
+            icon={<IconPlus />}
+            block
+            onClick={() => {
+              const id =
+                props.tables.length === 0
+                  ? 0
+                  : props.tables[props.tables.length - 1].id + 1;
+              const newTable = {
+                id: id,
+                name: `table_${id}`,
+                x: 0,
+                y: 0,
+                fields: [
+                  {
+                    name: "id",
+                    type: "UUID",
+                    default: "",
+                    check: "",
+                    primary: true,
+                    unique: true,
+                    notNull: true,
+                    increment: true,
+                    comment: "",
+                  },
+                ],
+                comment: "",
+                indices: [],
+                color: defaultTableTheme,
+              };
+              props.setTables((prev) => [...prev, newTable]);
+            }}
+          >
+            Add table
+          </Button>
+        </Col>
+      </Row>
       <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 (