UI Refresh with updated dependencies (#126)

* feat: moves the help content from start page to a dialog

* fix: removed duplicate bulma css file, set font to Nunito

* chore: remove bulma package

* refactor: cleaned up the UI a bit

* fix: add names to the PR artifacts

* docs: update README

* refactor: improve the about dialog information

* refactor: address review comments

* feat: disable menu options on start page

* Chore: Adjust colors.

* chore: update the step-1 image

* v2.0.0

* chore: update version in tauri config

---------

Co-authored-by: Alvi Khan <[email protected]>

Author: tecoholic

.github/workflows/test-prs.yml

@@ -37,6 +37,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: matrix.platform == 'ubuntu-22.04'
         with:
+          name: linux-packages.zip
           path: |
             ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.deb
             ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.rpm
@@ -46,6 +47,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: matrix.platform == 'windows-latest'
         with:
+          name: windows-installers.zip
           path: |
             ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.exe
             ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.nsis

README.md

@@ -3,8 +3,8 @@
 NER Annotator for SpaCy allows you to create training data for creating a custom NER Model with custom tags.
 
 - Web Application: [https://tecoholic.github.io/ner-annotator/](https://tecoholic.github.io/ner-annotator/)
-- Linux: [Debian Package or an AppImage](https://github.com/tecoholic/ner-annotator/releases)
-- Windows: [x64 MSI Installer](https://github.com/tecoholic/ner-annotator/releases)
+- Linux: [Debian Packages & AppImage](https://github.com/tecoholic/ner-annotator/releases)
+- Windows: [Installers](https://github.com/tecoholic/ner-annotator/releases)
 
 ## Features
 
@@ -37,33 +37,33 @@ The JSON file created by the tool is generic and simply lists the start and end
 
 ### Requirements
 
-1. Node JS 14.x
+1. NodeJS v21.x
 2. Yarn Package Manager
-3. Rust (for building desktop versions)
+3. Rust toolchain (for building desktop versions)
 
 ### Running it locally for development
 
 1. Open another terminal and start the server for the UI
 
 ```sh
-yarn
-yarn serve
+yarn install
+yarn dev
 ```
 
-Now go to [http://localhost:8081/ner-annotator/](http://localhost:8081/ner-annotator/)
+Now go to [http://localhost:5173](http://localhost:5173)
 
 ### Developing the desktop application
 
-The desktop applications have been created using [Tauri](https://tauri.studio).
+The desktop applications have been created using [Tauri](https://v2.tauri.app/).
 
 ```sh
-yarn tauri:serve
+yarn tauri dev
 ```
 
 To build the final binaries run
 
 ```sh
-yarn tauri:build
+yarn tauri build
 ```
 
 ## Credits

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ner-annotator",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,6 +15,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fontsource-variable/nunito": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
@@ -46,7 +47,6 @@
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.6",
-    "bulma": "^1.0.2",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^1.6.2",

public/assets/step-1.png

@@ -1,7 +1,7 @@
 {
   "productName": "NER Annotator",
   "mainBinaryName": "NER Annotator",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0",
   "identifier": "in.arunmozhi.ner-annotator",
   "build": {
     "beforeDevCommand": "yarn dev",

src-tauri/tauri.conf.json

@@ -1,19 +1,21 @@
 <template>
   <div
     class="fullscreen"
-    style="overflow-y:scroll;"
+    style="overflow-y: scroll"
     @dragover.prevent="onDragEnter"
     @dragenter="onDragEnter"
     @dragleave.self="onDragLeave"
     @drop.stop.prevent="onDrop"
   >
-    <div :style="{'pointer-events': overlayActive ? 'none' : 'auto'}">
-      <q-layout view="hHh lpR fFf">
-        <menu-bar v-if="currentPage !== 'start'" />
+    <div :style="{ 'pointer-events': overlayActive ? 'none' : 'auto' }">
+      <q-layout view="hHh lpR lFf">
+        <menu-bar />
 
         <q-drawer
-          :model-value="currentPage !== 'start'"
+          behavior="desktop"
           bordered
+          side="left"
+          :model-value="currentPage === 'annotate'"
           :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'"
         >
           <annotation-sidebar />
@@ -27,7 +29,12 @@
           <annotation-page v-if="currentPage === 'annotate'" />
         </q-page-container>
       </q-layout>
-      <drag-n-drop-overlay :style="{'visibility': overlayActive && pendingFileDrop == null ? 'visible' : 'hidden'}" />
+      <drag-n-drop-overlay
+        :style="{
+          visibility:
+            overlayActive && pendingFileDrop == null ? 'visible' : 'hidden',
+        }"
+      />
       <exit-dialog
         :show="pendingFileDrop != null && currentPage != 'start'"
         @hide="pendingFileDrop = null"
@@ -55,7 +62,7 @@ export default {
     AnnotationPage,
     AnnotationSidebar,
     DragNDropOverlay,
-    ExitDialog
+    ExitDialog,
   },
   setup() {
     const $q = useQuasar();
@@ -79,19 +86,22 @@ export default {
   },
   data() {
     return {
-      currentPage: "start",
       overlayActive: false,
       pendingFileDrop: null,
     };
   },
   computed: {
-    ...mapState(["annotations", "classes"]),
+    ...mapState(["annotations", "classes", "currentPage"]),
   },
   methods: {
-    ...mapMutations(["loadClasses", "loadAnnotations", "setInputSentences", "clearAllAnnotations", "resetIndex"]),
-    switchToPage(page) {
-      this.currentPage = page;
-    },
+    ...mapMutations([
+      "loadClasses",
+      "loadAnnotations",
+      "setInputSentences",
+      "clearAllAnnotations",
+      "resetIndex",
+      "switchToPage",
+    ]),
     onDragEnter() {
       this.overlayActive = true;
     },
@@ -100,15 +110,15 @@ export default {
     },
     onDrop(event) {
       this.overlayActive = false;
-      this.pendingFileDrop = event.dataTransfer.files[0]
-      if (this.currentPage == "start")  this.processFileDrop();
+      this.pendingFileDrop = event.dataTransfer.files[0];
+      if (this.currentPage == "start") this.processFileDrop();
     },
     processFileDrop() {
       let reader = new FileReader();
       reader.onload = (ev) => {
         let file = ev.target.result;
         try {
-          if (this.currentPage == "start")  throw new Error("Not a text file.");
+          if (this.currentPage == "start") throw new Error("Not a text file.");
           this.loadAnnotations(JSON.parse(file));
           this.notify(
             "fa fa-check",
@@ -117,7 +127,8 @@ export default {
           );
         } catch (e) {
           try {
-            if (this.currentPage == "start")  throw new Error("Not a text file.");
+            if (this.currentPage == "start")
+              throw new Error("Not a text file.");
             this.loadClasses(JSON.parse(file));
             this.notify(
               "fa fa-check",
@@ -129,7 +140,7 @@ export default {
               this.setInputSentences(file);
               this.clearAllAnnotations();
               this.resetIndex();
-              this.switchToPage('annotate');
+              this.switchToPage("annotate");
             } catch (e) {
               this.notify("fas fa-exclamation-circle", "Invalid file", "red-6");
             }

src/App.vue

@@ -1,13 +1,8 @@
 <template>
-  <q-dialog
-    :model-value="show"
-    @hide="$emit('hide')"
-  >
+  <q-dialog :model-value="show" @hide="$emit('hide')">
     <q-card style="min-width: 400px; padding: 10px; border-radius: 10px">
       <q-card-section>
-        <div class="text-h6">
-          NER Annotator
-        </div>
+        <div class="text-h6">NER Annotator</div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -19,19 +14,23 @@
           </a>
         </p>
         <p>
-          <strong>Author:</strong>
-          @tecoholic (<a href="https://github.com/tecoholic">Github</a>,
-          <a href="https://github.com/tecoholic">Twitter</a>)
+          <strong>Contributors: </strong>
+          <a
+            href="https://github.com/tecoholic/ner-annotator/graphs/contributors"
+          >
+            See on Github
+          </a>
         </p>
+        <ul>
+          <li>Author: <a href="https://github.com/tecoholic">tecoholic</a></li>
+          <li>
+            Maintainer: <a href="https://github.com/alvi-khan">alvi-khan</a>
+          </li>
+        </ul>
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
-          v-close-popup
-          flat
-          label="OK"
-          color="primary"
-        />
+        <q-btn v-close-popup flat label="OK" color="primary" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -47,7 +46,7 @@ export default {
     },
   },
   emits: ["hide"],
-  data: function() {
+  data: function () {
     return {
       // eslint-disable-next-line no-undef
       version: APPLICATION_VERSION,