Fix formatting.

tecoholic · Jan 27, 2024 · d3f3c9e · d3f3c9e
1 parent 6690ad6
commit d3f3c9e
Show file tree

Hide file tree

Showing 14 changed files with 294 additions and 126 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,21 @@
 <template>
   <div
     class="fullscreen"
+    style="overflow-y:scroll;"
     @dragover.prevent="onDragEnter"
     @dragenter="onDragEnter"
     @dragleave.self="onDragLeave"
     @drop.stop.prevent="onDrop"
-    style="overflow-y:scroll;"
   >
     <div :style="{'pointer-events': overlayActive ? 'none' : 'auto'}">
       <q-layout view="hHh lpR fFf">
         <menu-bar v-if="currentPage !== 'start'" />
 
-        <q-drawer :model-value="currentPage !== 'start'" bordered :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'">
+        <q-drawer
+          :model-value="currentPage !== 'start'"
+          bordered
+          :class="$q.dark.isActive ? 'bg-dark' : 'bg-grey-2'"
+        >
           <annotation-sidebar />
         </q-drawer>
 
@@ -23,8 +27,12 @@
           <annotation-page v-if="currentPage === 'annotate'" />
         </q-page-container>
       </q-layout>
-      <drag-n-drop-overlay :style="{'visibility': overlayActive && pendingFileDrop == null ? 'visible' : 'hidden'}"/>
-      <exit-dialog :show="pendingFileDrop != null && currentPage != 'start'" @hide="pendingFileDrop = null" @confirm="processFileDrop()"/>
+      <drag-n-drop-overlay :style="{'visibility': overlayActive && pendingFileDrop == null ? 'visible' : 'hidden'}" />
+      <exit-dialog
+        :show="pendingFileDrop != null && currentPage != 'start'"
+        @hide="pendingFileDrop = null"
+        @confirm="processFileDrop()"
+      />
     </div>
   </div>
 </template>
@@ -41,6 +49,14 @@ import { useQuasar } from "quasar";
 
 export default {
   name: "LayoutDefault",
+  components: {
+    MenuBar,
+    StartPage,
+    AnnotationPage,
+    AnnotationSidebar,
+    DragNDropOverlay,
+    ExitDialog
+  },
   setup() {
     const $q = useQuasar();
     return {
@@ -68,14 +84,6 @@ export default {
       pendingFileDrop: null,
     };
   },
-  components: {
-    MenuBar,
-    StartPage,
-    AnnotationPage,
-    AnnotationSidebar,
-    DragNDropOverlay,
-    ExitDialog
-  },
   computed: {
     ...mapState(["annotations", "classes"]),
   },

diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
@@ -1,8 +1,13 @@
 <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">
@@ -21,7 +26,12 @@
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
+        <q-btn
+          v-close-popup
+          flat
+          label="OK"
+          color="primary"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -30,13 +40,13 @@
 <script>
 export default {
   name: "AboutDialog",
-  emits: ["hide"],
   props: {
     show: {
       type: Boolean,
       default: false,
     },
   },
+  emits: ["hide"],
   data: function() {
     return {
       // eslint-disable-next-line no-undef

diff --git a/src/components/AnnotationPage.vue b/src/components/AnnotationPage.vue
@@ -1,47 +1,53 @@
 <template>
   <div>
     <classes-block />
-    <div class="q-pa-lg" style="height:60vh; overflow-y:scroll;">
+    <div
+      class="q-pa-lg"
+      style="height:60vh; overflow-y:scroll;"
+    >
       <component
         :is="t.type === 'token' ? 'Token' : 'TokenBlock'"
-        :id="'t' + t.start"
         v-for="t in tm.tokens"
-        :token="t"
+        :id="'t' + t.start"
         :key="t.start"
-        :backgroundColor="t.backgroundColor"
+        :token="t"
+        :background-color="t.backgroundColor"
         @remove-block="onRemoveBlock"
       />
     </div>
 
-    <div class="q-pa-md" style="border-top: 1px solid #ccc">
+    <div
+      class="q-pa-md"
+      style="border-top: 1px solid #ccc"
+    >
       <q-btn
         color="red"
         outline
         class="q-mx-sm"
-        @click="resetBlocks"
         label="Reset"
+        @click="resetBlocks"
       />
       <q-btn
         class="q-mx-sm"
         :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
         outline
-        @click="backOneSentence"
         :disabled="currentIndex == 0"
         label="Back"
+        @click="backOneSentence"
       />
       <q-btn
         class="q-mx-sm"
         :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
         outline
-        @click="skipCurrentSentence"
         label="Skip"
+        @click="skipCurrentSentence"
       />
       <q-btn
         class="q-mx-sm"
         color="green-7"
         outline
-        @click="saveTags"
         label="Save"
+        @click="saveTags"
       />
     </div>
   </div>
@@ -56,6 +62,11 @@ import TreebankTokenizer from "treebank-tokenizer";
 
 export default {
   name: "AnnotationPage",
+  components: {
+    Token,
+    TokenBlock,
+    ClassesBlock,
+  },
   data: function() {
     return {
       tm: new TokenManager([]),
@@ -64,11 +75,6 @@ export default {
       tokenizer: new TreebankTokenizer(),
     };
   },
-  components: {
-    Token,
-    TokenBlock,
-    ClassesBlock,
-  },
   computed: {
     ...mapState([
       "annotations",

diff --git a/src/components/ClassesBlock.vue b/src/components/ClassesBlock.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="q-pa-md" style="border-bottom: 1px solid #ccc;">
+  <div
+    class="q-pa-md"
+    style="border-bottom: 1px solid #ccc;"
+  >
     <div class="row">
       <div class="tags">
         <q-chip
@@ -10,8 +13,8 @@
           style="height: 2rem;"
           :color="cl.color.replace('11', '12')"
           clickable
-          @click="setCurrentClass(index)"
           :removable="showDeleteButtons"
+          @click="setCurrentClass(index)"
           @remove="handleRemoveClass(cl.id, cl.name)"
         >
           <q-avatar
@@ -20,28 +23,32 @@
             style="height: 2rem"
             text-color="white"
             :icon="'fa fa-check'"
-          ></q-avatar>
+          />
           <q-avatar
             v-if="cl.id !== currentClass.id"
             :color="cl.color.replace('11', '12')"
             style="height: 2rem"
             text-color="white"
             font-size="16px"
-          >{{ index + 1 }}</q-avatar>
-          <p :class="['q-mb-none', $q.dark.isActive ? 'text-grey-3' : 'text-grey-9']">{{ cl.name }}</p>
+          >
+            {{ index + 1 }}
+          </q-avatar>
+          <p :class="['q-mb-none', $q.dark.isActive ? 'text-grey-3' : 'text-grey-9']">
+            {{ cl.name }}
+          </p>
         </q-chip>
       </div>
-      <q-space></q-space>
+      <q-space />
       <div class="q-mx-md">
         <q-input
-          bottom-slots
-          v-model="newClassName"
           v-if="showNewClassInput || classes.length === 0"
+          v-model="newClassName"
+          bottom-slots
           hint="Enter a NER Tag and click [+] to add it"
           dense
           autofocus
         >
-          <template v-slot:append>
+          <template #append>
             <q-btn
               round
               dense
@@ -64,16 +71,16 @@
       <div class="buttons">
         <q-btn
           outline
-          @click="showNewClassInput = true"
           label="New Tag"
           class="q-mr-sm"
           :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
+          @click="showNewClassInput = true"
         />
         <q-btn
           outline
-          @click="showDeleteButtons = !showDeleteButtons"
           :label="showDeleteButtons ? 'Lock Tags' : 'Edit Tags'"
           :color="$q.dark.isActive ? 'grey-3' : 'grey-9'"
+          @click="showDeleteButtons = !showDeleteButtons"
         />
       </div>
     </div>
@@ -94,16 +101,16 @@ export default {
   computed: {
     ...mapState(["classes", "currentClass", "enableKeyboardShortcuts"]),
   },
-  created() {
-    document.addEventListener('keydown', this.keypress);
-  },
   watch: {
     newClassName(now, then) {
       if (now != then) {
         this.newClassName = now.toUpperCase();
       }
     },
   },
+  created() {
+    document.addEventListener('keydown', this.keypress);
+  },
   methods: {
     ...mapMutations(["setCurrentClass"]),
     ...mapActions(["createNewClass", "deleteClass"]),

diff --git a/src/components/ExitDialog.vue b/src/components/ExitDialog.vue
@@ -1,8 +1,13 @@
 <template>
-  <q-dialog :model-value="show" @hide="$emit('hide')">
+  <q-dialog
+    :model-value="show"
+    @hide="$emit('hide')"
+  >
     <q-card style="max-width: 400px; padding: 10px; border-radius: 10px">
       <q-card-section>
-        <div class="text-h5">Are you sure you want to close this file?</div>
+        <div class="text-h5">
+          Are you sure you want to close this file?
+        </div>
       </q-card-section>
 
       <q-card-section class="text-body1">
@@ -11,8 +16,20 @@
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn flat label="Cancel" color="red" v-close-popup @click="$emit('hide')"/>
-        <q-btn flat label="OK" color="light-blue" v-close-popup @click="$emit('confirm')"/>
+        <q-btn
+          v-close-popup
+          flat
+          label="Cancel"
+          color="red"
+          @click="$emit('hide')"
+        />
+        <q-btn
+          v-close-popup
+          flat
+          label="OK"
+          color="light-blue"
+          @click="$emit('confirm')"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -21,12 +38,12 @@
 <script>
 export default {
   name: "ExitDialog",
-  emits: ["hide", "confirm"],
   props: {
     show: {
       type: Boolean,
       default: false,
     },
   },
+  emits: ["hide", "confirm"],
 };
 </script>