From e6ce7132ceb9743f47125c777744588acc9a54dc Mon Sep 17 00:00:00 2001
From: Johannes Zillmann <jz@datameer.com>
Date: Sun, 3 Jan 2021 20:09:35 +0100
Subject: [PATCH] Show parse results

---
 ui/package.json      |  2 +-
 ui/src/App.svelte    |  9 +++++++-
 ui/src/Result.svelte | 15 +++++++++++++
 ui/src/Table.svelte  | 52 ++++++++++++++++++++++++++++++++++++++++++++
 ui/src/Upload.svelte |  7 +++++-
 ui/src/store.ts      | 17 +++++++++++----
 ui/tsconfig.json     | 48 ++++++++++++++++++++++------------------
 7 files changed, 122 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/Result.svelte
 create mode 100644 ui/src/Table.svelte

diff --git a/ui/package.json b/ui/package.json
index 2740357..d3f02e3 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -2,7 +2,7 @@
   "name": "pdf-to-markdown",
   "version": "0.2.0",
   "description": "A PDF to Markdown Converter",
-    "keywords": [
+  "keywords": [
     "PDF",
     "Markdown",
     "Converter"
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 8598e82..f251674 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -1,10 +1,17 @@
 <script>
     import Upload from './Upload.svelte';
+
+    import { parseResult } from './store';
+    import Result from './Result.svelte';
 </script>
 
 <div class="text-2xl font-semibold font-serif text-center bg-gray-400">PDF to Markdown Converter</div>
 <main class="container mx-auto mt-5 h-full">
-    <Upload />
+    {#if $parseResult}
+        <Result parseResult={$parseResult} />
+    {:else}
+        <Upload />
+    {/if}
 </main>
 
 <style>
diff --git a/ui/src/Result.svelte b/ui/src/Result.svelte
new file mode 100644
index 0000000..425243a
--- /dev/null
+++ b/ui/src/Result.svelte
@@ -0,0 +1,15 @@
+<script>
+    import type ParseResult from 'pdf-to-markdown-core/lib/src/ParseResult';
+    import Table from './Table.svelte';
+
+    export let parseResult: ParseResult;
+    console.log(parseResult.metadata);
+</script>
+
+<div>Title: {parseResult.metadata.title()}</div>
+<div>Author: {parseResult.metadata.author()}</div>
+
+{#each parseResult.pages as page}
+    <div class="text-2xl font-semibold my-5">Page {page.index}</div>
+    <Table items={page.items} />
+{/each}
diff --git a/ui/src/Table.svelte b/ui/src/Table.svelte
new file mode 100644
index 0000000..a23abf3
--- /dev/null
+++ b/ui/src/Table.svelte
@@ -0,0 +1,52 @@
+<script>
+    import type ParsedPageItem from 'pdf-to-markdown-core/lib/src/ParsedPageItem';
+
+    const headers = ['ID', 'Text', 'Font', 'Direction', 'Width', 'Height', 'Transform'];
+    export let items: ParsedPageItem[];
+</script>
+
+<div class="static">
+    <div class="grid" style="grid-template-columns:repeat({headers.length}, auto)">
+        {#each headers as header}
+            <div class="header">{header}</div>
+        {/each}
+        {#each items as item, i}
+            <div class="row contents">
+                <div class="cell">{i + 1}</div>
+                <div class="cell">{item.str}</div>
+                <div class="cell">{item.fontName}</div>
+                <div class="cell">{item.dir}</div>
+                <div class="cell">{item.width}</div>
+                <div class="cell">{item.height}</div>
+                <div class="cell">{item.transform.join(', ')}</div>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .grid {
+        width: 100%;
+        max-height: 100vh;
+        display: grid;
+        grid-auto-rows: min-content;
+        overflow-y: auto;
+        border: 1px solid #e3e4e4;
+        border-left: none;
+    }
+    .header {
+        @apply bg-gray-300;
+        position: sticky;
+        top: 0;
+        padding: 5px;
+        border-bottom: 1px solid #e3e4e4;
+    }
+    .row:hover > div {
+        @apply bg-gray-200;
+    }
+
+    .cell {
+        @apply pl-1;
+        border-left: 1px solid #e3e4e4;
+    }
+</style>
diff --git a/ui/src/Upload.svelte b/ui/src/Upload.svelte
index 745c279..5965d70 100644
--- a/ui/src/Upload.svelte
+++ b/ui/src/Upload.svelte
@@ -32,7 +32,9 @@
         noClick={false}
         disableDefaultStyles={true}>
         <div class="grid grid-cols-1 md:grid-cols-2 justify-items-center">
-            <Download size="21x" />
+            <span class:dragoverItem={dragover}>
+                <Download size="21x" />
+            </span>
             <div class="mt-4">
                 <div class="text-5xl font-bold my-4">Drop your PDF file here...</div>
                 <div class="text-2xl font-bold">Or click the box to select one...</div>
@@ -63,4 +65,7 @@
     .dragover {
         @apply border-purple-600;
     }
+    .dragoverItem {
+        @apply text-purple-600;
+    }
 </style>
diff --git a/ui/src/store.ts b/ui/src/store.ts
index e57f5ae..0d7cf55 100644
--- a/ui/src/store.ts
+++ b/ui/src/store.ts
@@ -2,6 +2,10 @@ import { pdfParser } from 'pdf-to-markdown-core';
 import type ParseResult from 'pdf-to-markdown-core/lib/src/ParseResult';
 import * as pdfjs from 'pdfjs-dist/es5/build/pdf';
 
+import { Writable, writable } from 'svelte/store';
+
+export let parseResult: Writable<ParseResult> = writable(undefined);
+
 // TODO this will setup fake worker cause getMainThreadWorkerMessageHandler isn't null
 import pdfjsWorker from 'pdfjs-dist//es5/build/pdf.worker.entry';
 pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
@@ -16,8 +20,13 @@ export function processUpload(file: File): Promise<ParseResult> {
             resolve(reader.result as ArrayBuffer);
         };
         reader.readAsArrayBuffer(file);
-    }).then((buffer) => {
-        const uintArray = new Uint8Array(buffer as ArrayBuffer);
-        return parser.parse(uintArray);
-    });
+    })
+        .then((buffer) => {
+            const uintArray = new Uint8Array(buffer as ArrayBuffer);
+            return parser.parse(uintArray);
+        })
+        .then((result) => {
+            parseResult.set(result);
+            return result;
+        });
 }
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 1b89b72..be02eac 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,23 +1,29 @@
 {
-  "include": ["src", "types"],
-  "compilerOptions": {
-    "module": "esnext",
-    "target": "esnext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "baseUrl": "./",
-    /* paths - If you configure Snowpack import aliases, add them here. */
-    "paths": {},
-    /* noEmit - Snowpack builds (emits) files, not tsc. */
-    "noEmit": true,
-    /* Additional Options */
-    "strict": true,
-    "noImplicitAny": false,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "useDefineForClassFields": true,
-    "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error"
-  }
+    "include": ["src", "types"],
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "esnext",
+        "moduleResolution": "node",
+        "jsx": "preserve",
+        "baseUrl": "./",
+        /* paths - If you configure Snowpack import aliases, add them here. */
+        "paths": {},
+        /* noEmit - Snowpack builds (emits) files, not tsc. */
+        "noEmit": true,
+        /* Additional Options */
+        "strict": true,
+        "noImplicitAny": false,
+        // "noImplicitThis": false,
+        // "alwaysStrict": false,
+        // "strictBindCallApply": false,
+        "strictNullChecks": false,
+        // "strictFunctionTypes": false,
+        // "strictPropertyInitialization": false,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "useDefineForClassFields": true,
+        "allowSyntheticDefaultImports": true,
+        "importsNotUsedAsValues": "error"
+    }
 }