get-span-indices

Running

App Files Files Community

wadood commited on Sep 11

Commit

9bfb26f

1 Parent(s): 4dd77e2

added cleaner react view

Browse files

Files changed (4) hide show

index.html +1 -1
package.json +2 -2
src/SelectionApp.tsx +67 -33
src/main.tsx +9 -9

index.html CHANGED Viewed

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <!-- React will inject scripts here in development/production -->
   </body>
 </html>

   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json CHANGED Viewed

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

     "preview": "vite preview"
   },
   "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/SelectionApp.tsx CHANGED Viewed

@@ -51,7 +51,7 @@ const SelectionApp: React.FC = () => {
     const end = start + selectedText.length;
     const newSpan: Span = { span_text: selectedText, start, end };
-    setSpans((prev) => [newSpan, ...prev].slice(0, 5));
   };
   const renderSpans = () => {
@@ -71,34 +71,56 @@ const SelectionApp: React.FC = () => {
   };
   return (
-    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
-      <h3>Highlight text to get indices</h3>
       {/* Settings Panel */}
       <div
         style={{
-          marginBottom: "15px",
-          padding: "10px",
-          border: "1px solid #ccc",
-          borderRadius: "6px",
-          background: "#fafafa",
-          width: "90%",
         }}
       >
-        <strong>Settings (rename keys):</strong>
-        <br />
-        <br />
         <label>
-          Span Text Key:{" "}
-          <input value={keySpan} onChange={(e) => setKeySpan(e.target.value)} />
         </label>
-        <label style={{ marginLeft: "10px" }}>
-          Start Key:{" "}
-          <input value={keyStart} onChange={(e) => setKeyStart(e.target.value)} />
         </label>
-        <label style={{ marginLeft: "10px" }}>
-          End Key:{" "}
-          <input value={keyEnd} onChange={(e) => setKeyEnd(e.target.value)} />
         </label>
       </div>
@@ -108,23 +130,34 @@ const SelectionApp: React.FC = () => {
         contentEditable
         onInput={handleInput}
         style={{
-          width: "90%",
-          minHeight: "150px",
-          maxHeight: "400px",
           border: "1px solid #ccc",
-          padding: "10px",
           whiteSpace: "pre-wrap",
           overflowWrap: "break-word",
-          overflowY: "auto",   // scroll if content exceeds height
-          resize: "vertical",  // make resizable vertically
         }}
-      >
-        Paste or type your text here...
-      </div>
       <button
         onClick={getSelectionIndices}
-        style={{ marginTop: "10px", padding: "5px 10px" }}
       >
         Get Selection JSON
       </button>
@@ -132,14 +165,15 @@ const SelectionApp: React.FC = () => {
       {/* Display JSON */}
       <pre
         style={{
-          marginTop: "15px",
           fontFamily: "monospace",
           background: "#f4f4f4",
-          padding: "10px",
-          borderRadius: "6px",
           border: "1px solid #ddd",
           whiteSpace: "pre-wrap",
           userSelect: "text",
         }}
       >
         {spans.length ? JSON.stringify(renderSpans(), null, 2) : ""}

     const end = start + selectedText.length;
     const newSpan: Span = { span_text: selectedText, start, end };
+    setSpans((prev) => [newSpan, ...prev]);
   };
   const renderSpans = () => {
   };
   return (
+    <div
+      style={{
+        maxWidth: "900px",
+        margin: "40px auto",
+        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        color: "#333",
+      }}
+    >
+      <h2 style={{ textAlign: "center", marginBottom: "25px", color: "#1a73e8" }}>
+        Span Annotation App
+      </h2>
       {/* Settings Panel */}
       <div
         style={{
+          marginBottom: "20px",
+          padding: "15px 20px",
+          borderRadius: "10px",
+          background: "#f9f9f9",
+          boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "10px",
+          alignItems: "center",
         }}
       >
+        <strong>Key Names:</strong>
         <label>
+          Span Text:
+          <input
+            value={keySpan}
+            onChange={(e) => setKeySpan(e.target.value)}
+            style={{ marginLeft: "5px", padding: "4px 8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
         </label>
+        <label>
+          Start:
+          <input
+            value={keyStart}
+            onChange={(e) => setKeyStart(e.target.value)}
+            style={{ marginLeft: "5px", padding: "4px 8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
         </label>
+        <label>
+          End:
+          <input
+            value={keyEnd}
+            onChange={(e) => setKeyEnd(e.target.value)}
+            style={{ marginLeft: "5px", padding: "4px 8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
         </label>
       </div>
         contentEditable
         onInput={handleInput}
         style={{
+          width: "100%",
+          minHeight: "180px",
+          maxHeight: "450px",
           border: "1px solid #ccc",
+          borderRadius: "10px",
+          padding: "12px",
           whiteSpace: "pre-wrap",
           overflowWrap: "break-word",
+          overflowY: "auto",
+          resize: "vertical",
+          boxShadow: "inset 0 2px 6px rgba(0,0,0,0.05)",
+          fontSize: "16px",
+          lineHeight: "1.5",
         }}
+      ></div>
       <button
         onClick={getSelectionIndices}
+        style={{
+          marginTop: "15px",
+          padding: "10px 20px",
+          backgroundColor: "#1a73e8",
+          color: "#fff",
+          border: "none",
+          borderRadius: "6px",
+          cursor: "pointer",
+          boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+        }}
       >
         Get Selection JSON
       </button>
       {/* Display JSON */}
       <pre
         style={{
+          marginTop: "20px",
           fontFamily: "monospace",
           background: "#f4f4f4",
+          padding: "15px",
+          borderRadius: "10px",
           border: "1px solid #ddd",
           whiteSpace: "pre-wrap",
           userSelect: "text",
+          boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)",
         }}
       >
         {spans.length ? JSON.stringify(renderSpans(), null, 2) : ""}

src/main.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

+import React from "react";
+import ReactDOM from "react-dom/client"; // important for React 18
+import SelectionApp from "./SelectionApp";
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <SelectionApp />
+  </React.StrictMode>
+);