From 81a8ebfdaef7d1d2a0b3a371c0bf0872c5ee18ee Mon Sep 17 00:00:00 2001
From: ia7ck <23146842+ia7ck@users.noreply.github.com>
Date: Mon, 21 Oct 2024 03:00:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=91=E3=83=BC=E3=82=B9=E5=A4=B1=E6=95=97?=
 =?UTF-8?q?=E6=99=82=E3=81=AE=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/graph/page.tsx | 18 ++++++++++++++----
 app/graph/parse.ts |  4 +++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index a84314c..9337824 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -23,6 +23,11 @@ export default function Graph() {
     text: string;
     option: { indexing: Indexing };
   };
+  // parse error
+  type Error = {
+    line: number;
+    message: string;
+  };
 
   type Element =
     | {
@@ -42,7 +47,7 @@ export default function Graph() {
     data: { n: 3, edges: [{ from: 1, to: 2 }] },
     params: { text: graphText, option: { indexing } },
   });
-  const [invalid, setInvalid] = useState(false);
+  const [error, setError] = useState<null | Error>(null);
 
   const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
@@ -64,9 +69,9 @@ export default function Graph() {
     const graph = parseGraph(text, { indexStart: option.indexing });
     if (graph.ok) {
       setGraph({ data: graph.data, params: { text, option } });
-      setInvalid(false);
+      setError(null);
     } else {
-      setInvalid(true);
+      setError(graph.error);
     }
   };
 
@@ -106,12 +111,17 @@ export default function Graph() {
           rows={4}
           className={clsx(
             "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
-            invalid && "text-red-900 ring-red-300 focus:ring-red-500",
+            error && "text-red-900 ring-red-300 focus:ring-red-500",
           )}
           value={graphText}
           onChange={handleTextAreaChange}
         />
       </div>
+      {error && (
+        <div className="text-sm text-red-700">
+          line {error.line + 1}: {error.message}
+        </div>
+      )}
       <VSpace size="M" />
       <fieldset>
         <legend className="text-sm font-semibold leading-6 text-gray-900">
diff --git a/app/graph/parse.ts b/app/graph/parse.ts
index 2cf4c5a..298a8a4 100644
--- a/app/graph/parse.ts
+++ b/app/graph/parse.ts
@@ -67,12 +67,14 @@ export function parseGraph(
     const [from, to, weight] = lines[i].trim().split(" ");
     const e = Edge.safeParse({ from, to });
     if (e.error) {
+      const lb = option.indexStart === "0-indexed" ? 0 : 1;
+      const ub = option.indexStart === "0-indexed" ? n.data - 1 : n.data;
       return {
         ok: false,
         error: {
           field: "edge",
           line: i,
-          message: `Invalid edge: "${lines[i].trim()}". It must be space-separated integers.`,
+          message: `Invalid edge: "${lines[i].trim()}". It must be space-separated integers between ${lb} and ${ub}.`,
         },
       };
     }