Fix OpenTable performances

client/components/open/tables/components/OpenSelect.vue

@@ -13,10 +13,7 @@ import OpenTag from './OpenTag.vue'
 export default {
   components: { OpenTag },
   props: {
-    value: {
-      type: Object
-    }
-
+    value: {}
   },
 
   data () {
@@ -31,8 +28,5 @@ export default {
       return false
     }
   },
-  mounted () {
-  },
-  methods: {}
 }
 </script>

client/components/open/tables/components/OpenText.vue

@@ -1,41 +1,7 @@
 <template>
-  <span v-if="!valueIsObject">
+  <span>
     {{ value }}
   </span>
-  <span v-else>
-    <span
-      v-for="(item, i) in value.responseData"
-      :key="i"
-      :class="{
-        'font-semibold': item.annotations.bold && !item.annotations.code,
-        italic: item.annotations.italic,
-        'line-through': item.annotations.strikethrough,
-        underline: item.annotations.underline,
-        'bg-pink-100 py-1 px-2 rounded-lg text-pink-500': item.annotations.code,
-        'font-serif': item.type == 'equation',
-      }"
-      :style="{
-        color:
-          item.annotations.color != 'default'
-            ? getColor(item.annotations.color)
-            : null,
-        'background-color':
-          item.annotations.color != 'default' &&
-          item.annotations.color.split('_')[1]
-            ? getBgColor(item.annotations.color.split('_')[0])
-            : 'none',
-      }"
-    >
-      <a
-        v-if="item.href"
-        :href="item.href"
-        rel="noopener noreferrer"
-        target="_blank"
-        class="text-blue-600 underline"
-      >{{ item.plain_text }}</a>
-      <span v-else-if="!item.href">{{ item.plain_text }}</span>
-    </span>
-  </span>
 </template>
 
 <script>
@@ -45,55 +11,6 @@ export default {
     value: {
       required: true
     }
-
   },
-
-  data () {
-    return {}
-  },
-
-  computed: {
-    valueIsObject () {
-      if (
-        typeof this.value === 'object' &&
-        !Array.isArray(this.value) &&
-        this.value !== null
-      ) {
-        return true
-      }
-      return false
-    }
-  },
-  mounted () {
-  },
-
-  methods: {
-    getColor (color) {
-      return {
-        red: '#e03e3e',
-        gray: '#9b9a97',
-        brown: '#64473a',
-        orange: '#d9730d',
-        yellow: '#dfab01',
-        teal: '#0f7b6c',
-        blue: '#0b6e99',
-        purple: '#6940a5',
-        pink: '#ad1a72'
-      }[color]
-    },
-    getBgColor (color) {
-      return {
-        red: '#fbe4e4',
-        gray: '#ebeced',
-        brown: '#e9e5e3',
-        orange: '#faebdd',
-        yellow: '#fbf3db',
-        teal: '#ddedea',
-        blue: '#ddebf1',
-        purple: '#eae4f2',
-        pink: '#f4dfeb'
-      }[color]
-    }
-  }
 }
 </script>

client/components/open/tables/components/ResizableTh.vue

@@ -1,6 +1,6 @@
 <template>
   <th ref="th" :style="{width: width}">
-    <slot />
+    <slot/>
     <div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
       <div class="resize-handler bg-transparent cursor-move	 hover:bg-blue-500 opacity-80 transition-colors"
            @mousedown="mouseDownHandler"
@@ -21,20 +21,18 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       x: 0,
-      w: 0
+      w: 0,
+      lastEmit: Date.now(),
+      throttlePeriod: 50 // milliseconds
     }
   },
 
-  computed: {
-  },
-  mounted () {
-  },
-
   methods: {
-    mouseDownHandler (e) {
+    mouseDownHandler(e) {
+      if (process.server) return
       // Get the current mouse position
       this.x = e.clientX
 
@@ -43,24 +41,21 @@ export default {
       this.w = parseInt(styles.width, 10)
 
       // Attach the listeners to `document`
-      if (process.client) {
-        document.addEventListener('mousemove', this.mouseMoveHandler)
-        document.addEventListener('mouseup', this.mouseUpHandler)
+      document.addEventListener('mousemove', this.mouseMoveHandler)
+      document.addEventListener('mouseup', this.mouseUpHandler)
+    },
+    mouseMoveHandler(e) {
+      const now = Date.now()
+      if (now - this.lastEmit > this.throttlePeriod) {
+        const dx = e.clientX - this.x
+        this.$emit('resize-width', this.w + dx)
+        this.lastEmit = now
       }
     },
-    mouseMoveHandler (e) {
-      // How far the mouse has been moved
-      const dx = e.clientX - this.x
-
-      // Adjust the dimension of element
-      this.$emit('resize-width', this.w + dx)
-    },
-    mouseUpHandler () {
+    mouseUpHandler() {
       // Remove the handlers of `mousemove` and `mouseup`
-      if (process.client) {
-        document.removeEventListener('mousemove', this.mouseMoveHandler)
-        document.removeEventListener('mouseup', this.mouseUpHandler)
-      }
+      document.removeEventListener('mousemove', this.mouseMoveHandler)
+      document.removeEventListener('mouseup', this.mouseUpHandler)
     }
   }
 }