basic layout for the overview

src/components/diagram_overview.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { sqlDataTypes } from "../data/data";
+import {
+  Collapse,
+  Input,
+  Row,
+  Col,
+  Form,
+  Button,
+  Card,
+  TextArea,
+} from "@douyinfe/semi-ui";
+import {
+  IconMore,
+  IconKeyStroked,
+  IconColorPalette,
+} from "@douyinfe/semi-icons";
+
+export default function DiagramOverview(props) {
+  return (
+    <Collapse>
+      {props.tables.map((t, i) => (
+        <Collapse.Panel
+          key={i}
+          header={
+            <div>
+              <Input defaultValue={t.name} borderless />
+            </div>
+          }
+          itemKey={`${i}`}
+        >
+          <Form>
+            {t.fields.map((f, j) => (
+              <div key={j}>
+                <Row
+                  type="flex"
+                  justify="start"
+                  align="middle"
+                  gutter={6}
+                  className="hover:bg-slate-100"
+                >
+                  <Col span={7}>
+                    <Form.Input
+                      field={`name-${j}`}
+                      noLabel={true}
+                      initValue={f.name}
+                      className="m-0"
+                    />
+                  </Col>
+                  <Col span={8}>
+                    <Form.Select
+                      className="w-full"
+                      field={`type-${j}`}
+                      noLabel={true}
+                      optionList={sqlDataTypes.map((value, index) => {
+                        return {
+                          label: value,
+                          value: value,
+                        };
+                      })}
+                      filter
+                      initValue={f.type}
+                    ></Form.Select>
+                  </Col>
+                  <Col span={3}>
+                    <Button type="tertiary" title="Nullable">
+                      ?
+                    </Button>
+                  </Col>
+                  <Col span={3}>
+                    <Button type="tertiary" icon={<IconKeyStroked />}></Button>
+                  </Col>
+                  <Col span={3}>
+                    <Button type="tertiary" icon={<IconMore />}></Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+          </Form>
+          <Card
+            bodyStyle={{ padding: "4px" }}
+            style={{ marginTop: "12px", marginBottom: "12px" }}
+            headerLine={false}
+          >
+            <Collapse>
+              <Collapse.Panel header="Indices" itemKey="1">
+                <p>indices</p>
+              </Collapse.Panel>
+            </Collapse>
+          </Card>
+          <Card
+            bodyStyle={{ padding: "4px" }}
+            style={{ marginTop: "12px", marginBottom: "12px" }}
+            headerLine={false}
+          >
+            <Collapse>
+              <Collapse.Panel header="Comment" itemKey="1">
+                <TextArea autosize rows={1} />
+              </Collapse.Panel>
+            </Collapse>
+          </Card>
+          <Row gutter={6} className="mt-2">
+            <Col span={8}>
+              <Button type="tertiary" icon={<IconColorPalette />}></Button>
+            </Col>
+            <Col span={8}>
+              <Button block>Add index</Button>
+            </Col>
+            <Col span={8}>
+              <Button block>Add field</Button>
+            </Col>
+          </Row>
+        </Collapse.Panel>
+      ))}
+    </Collapse>
+  );
+}

src/components/editor_panel.jsx

@@ -10,6 +10,7 @@ import html2canvas from "html2canvas";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
+import DiagramOverview from "./diagram_overview";
 
 const myTheme = createTheme({
   dark: "light",
@@ -26,16 +27,18 @@ const myTheme = createTheme({
 });
 
 export default function EditorPanel(props) {
-  const [tab, setTab] = useState(1);
+  const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
   const tabList = [
-    { tab: "Overview", itemKey: 1 },
+    { tab: "Overview", itemKey: "1" },
-    { tab: "Shapes", itemKey: 2 },
+    { tab: "Shapes", itemKey: "2" },
-    { tab: "Editor", itemKey: 3 },
+    { tab: "Editor", itemKey: "3" },
   ];
   const contentList = [
-    <div>Overview</div>,
+    <div>
+      <DiagramOverview tables={props.tables} />
+    </div>,
     <div>
       <Shape />
     </div>,
@@ -54,10 +57,11 @@ export default function EditorPanel(props) {
 
   return (
     <ResizableBox
-      width={window.innerWidth * 0.2}
+      className="shadow-xl"
+      width={window.innerWidth * 0.23}
       height={window.innerHeight}
       resizeHandles={["e"]}
-      minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+      minConstraints={[window.innerWidth * 0.23, window.innerHeight]}
       maxConstraints={[Infinity, Infinity]}
       axis="x"
     >
@@ -69,7 +73,7 @@ export default function EditorPanel(props) {
             setTab(key);
           }}
         >
-          {contentList[tab -1]}
+          {contentList[parseInt(tab) - 1]}
         </Tabs>
 
         <button

src/index.css

@@ -13,3 +13,14 @@ body {
 .bg-blue {
   background-color: #124559;
 }
+
+.semi-form-vertical .semi-form-field {
+  margin: 0;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  overflow: hidden;
+}
+
+.semi-card .semi-collapse-item{
+  border: none !important;
+}