Add compiler errors in issues

src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx

@@ -7,7 +7,7 @@ import { useDebounceValue } from "usehooks-ts";
 import "./styles.css";
 import { fromDBML } from "../../../utils/dbml/fromDBML";
 
-export default function DBMLEditor() {
+export default function DBMLEditor({ setIssues }) {
   const { settings } = useSettings();
   const { setTables } = useDiagram();
   const [value, setValue] = useState("");
@@ -20,10 +20,10 @@ export default function DBMLEditor() {
         console.log(tables);
         setTables(tables);
       } catch (e) {
-        console.log("error: ", e);
+        setIssues((prev) => ({ ...prev, dbml: e.diags.map((x) => x.message) }));
       }
     }
-  }, [debouncedValue, setTables]);
+  }, [debouncedValue, setTables, setIssues]);
 
   return (
     <div>

src/components/EditorSidePanel/Issues.jsx

@@ -1,17 +1,16 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { Collapse, Badge } from "@douyinfe/semi-ui";
 import { arrayIsEqual } from "../../utils/utils";
 import { getIssues } from "../../utils/issues";
 import { useEnums, useSettings, useDiagram, useTypes } from "../../hooks";
 import { useTranslation } from "react-i18next";
 
-export default function Issues() {
+export default function Issues({ issues, setIssues }) {
   const { types } = useTypes();
   const { t } = useTranslation();
   const { settings } = useSettings();
   const { enums } = useEnums();
   const { tables, relationships, database } = useDiagram();
-  const [issues, setIssues] = useState([]);
 
   useEffect(() => {
     const findIssues = async () => {
@@ -23,21 +22,29 @@ export default function Issues() {
         enums: enums,
       });
 
-      if (!arrayIsEqual(newIssues, issues)) {
+      if (!arrayIsEqual(newIssues, issues.diagram)) {
-        setIssues(newIssues);
+        setIssues((prev) => ({ ...prev, diagram: newIssues }));
       }
     };
 
     findIssues();
-  }, [tables, relationships, issues, types, database, enums]);
+  }, [tables, relationships, issues, types, database, enums, setIssues]);
 
   return (
     <Collapse lazyRender keepDOM={false} style={{ width: "100%" }}>
       <Collapse.Panel
         header={
           <Badge
-            type={issues.length > 0 ? "danger" : "primary"}
+            type={
-            count={settings.strictMode ? null : issues.length}
+              issues.dbml.length > 0 || issues.diagram.length > 0
+                ? "danger"
+                : "primary"
+            }
+            count={
+              settings.strictMode
+                ? null
+                : issues.dbml.length + issues.diagram.length
+            }
             overflowCount={99}
             className="mt-1"
           >
@@ -52,11 +59,19 @@ export default function Issues() {
         <div className="max-h-[160px] overflow-y-auto">
           {settings.strictMode ? (
             <div className="mb-1">{t("strict_mode_is_on_no_issues")}</div>
-          ) : issues.length > 0 ? (
+          ) : issues.dbml.length > 0 || issues.diagram.length > 0 ? (
             <>
-              {issues.map((e, i) => (
+              {!settings.dbmlEditor &&
-                <div key={i} className="py-2">
+                issues.dbml.map((e, i) => (
-                  {e}
+                  <div key={i} className="py-1 flex gap-2">
+                    <i className="opacity-60 bi bi-braces" />
+                    <div>{e}</div>
+                  </div>
+                ))}
+              {issues.diagram.map((e, i) => (
+                <div key={i} className="py-1 flex gap-2">
+                  <i className="opacity-60 bi bi-diagram-2" />
+                  <div>{e}</div>
                 </div>
               ))}
             </>

src/components/EditorSidePanel/SidePanel.jsx

@@ -16,7 +16,7 @@ import AreasTab from "./AreasTab/AreasTab";
 import NotesTab from "./NotesTab/NotesTab";
 import TablesTab from "./TablesTab/TablesTab";
 import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { databases } from "../../data/databases";
 import EnumsTab from "./EnumsTab/EnumsTab";
 import { isRtl } from "../../i18n/utils/rtl";
@@ -32,6 +32,7 @@ export default function SidePanel({ width, resize, setResize }) {
   const { typesCount } = useTypes();
   const { enumsCount } = useEnums();
   const { t } = useTranslation();
+  const [issues, setIssues] = useState({ diagram: [], dbml: [] });
 
   const tabList = useMemo(() => {
     const tabs = [
@@ -116,12 +117,12 @@ export default function SidePanel({ width, resize, setResize }) {
                 ))}
             </Tabs>
           ) : (
-            <DBMLEditor />
+            <DBMLEditor setIssues={setIssues}/>
           )}
         </div>
         {layout.issues && (
           <div className="mt-auto border-t-2 border-color shadow-inner">
-            <Issues />
+            <Issues issues={issues} setIssues={setIssues} />
           </div>
         )}
       </div>

src/data/constants.js

@@ -115,3 +115,8 @@ export const DB = {
   MARIADB: "mariadb",
   GENERIC: "generic",
 };
+
+export const ErrorType = {
+  DIAGRAM: "diagram",
+  DBML: "dbml",
+};

src/utils/dbml/fromDBML.js

@@ -3,34 +3,6 @@ import { arrangeTables } from "../arrangeTables";
 
 const parser = new Parser();
 
-/**
-
-{
-      "id": 0,
-      "name": "some_table",
-      "x": 812.9083754222163,
-      "y": 400.3451698134321,
-      "fields": [
-        {
-          "name": "id",
-          "type": "INT",
-          "default": "",
-          "check": "",
-          "primary": true,
-          "unique": true,
-          "notNull": true,
-          "increment": true,
-          "comment": "",
-          "id": 0
-        }
-      ],
-      "comment": "",
-      "indices": [],
-      "color": "#175e7a",
-      "key": 1737222753837
-    }
- */
-
 export function fromDBML(src) {
   const ast = parser.parse(src, "dbml");