fix: slow ui due to big payload being formatted/colonized + graph title overflow (#84)

* feat: improve code highlighting and tooltip support in UI components

- Introduced computed properties and constants for enhanced readability and logic in `CodeHighlight.vue`.
- Added truncated raw code display with a max length for performance optimization.
- Added tooltips to `LineChartCard.vue` titles, providing better UX for long text.

* feat: add tooltips for truncated titles in LineChartCard

- Improved UX by adding tooltips to display full text of truncated `dataPath` and `topic`.

* fix: improve safety in `CodeHighlight` and tweak text wrapping in `LineChartCard`

- Added null-check for `codeTextRef` in `CodeHighlight.vue` to prevent runtime errors.
- Refactored truncated raw code logic into a helper function for readability.
- Adjusted `LineChartCard.vue` styling to handle long text with better wrapping and breaking behavior.

Author: ChxGuillaume

src/renderer/src/App.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useHighlightTheme } from '@renderer/composables/useHighlightTheme'
 import { ElectronApi } from '@renderer/assets/js/electron-api'
 import { onBeforeMount, watch } from 'vue'
 import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 
+useHighlightTheme()
+
 watch(
   () => $q.dark.isActive,
   (isDark) => ElectronApi.darkMode(isDark)

src/renderer/src/components/graphs/LineChartCard.vue

@@ -79,7 +79,7 @@ const options = computed(() => {
       trigger: 'axis',
       axisPointer: {
         label: {
-          formatter: (params: any) => moment(params.value).format('HH:mm:ss')
+          formatter: (params: { value: string }) => moment(params.value).format('HH:mm:ss')
         }
       }
     },
@@ -128,12 +128,29 @@ const defaultDataPathText = '<value>'
 <template>
   <q-card class="graph-card tw-border tw-p-2" flat :class="[dataGraph.size]">
     <q-card-section v-if="showTitle" class="drag-handle tw-cursor-grab tw-p-2">
-      <div class="tw-h-7 tw-text-xl">{{ dataGraph.dataPath || defaultDataPathText }}</div>
+      <div class="tw-line-clamp-1 tw-h-7 tw-break-all tw-text-xl">
+        {{ dataGraph.dataPath || defaultDataPathText }}
+
+        <q-tooltip
+          class="tw-bg-gray-200 tw-text-black dark:tw-bg-neutral-700 dark:tw-text-neutral-200"
+          :offset="[5, 5]"
+        >
+          {{ dataGraph.dataPath || defaultDataPathText }}
+        </q-tooltip>
+      </div>
       <div
-        class="color-details tw-line-clamp-1 tw-max-w-full tw-overflow-hidden tw-overflow-ellipsis tw-text-sm"
+        class="color-details tw-line-clamp-1 tw-max-w-full tw-overflow-hidden tw-overflow-ellipsis tw-break-all tw-text-sm"
         :title="dataGraph.topic"
-        v-text="dataGraph.topic"
-      />
+      >
+        {{ dataGraph.topic }}
+
+        <q-tooltip
+          class="tw-bg-gray-200 tw-text-black dark:tw-bg-neutral-700 dark:tw-text-neutral-200"
+          :offset="[5, 5]"
+        >
+          {{ dataGraph.topic }}
+        </q-tooltip>
+      </div>
     </q-card-section>
 
     <div class="tw-h-[200px]">

src/renderer/src/components/tap-topics/CodeHighlight.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import { useHighlightTheme } from '@renderer/composables/useHighlightTheme'
+import { ref, watch, nextTick, computed, onMounted } from 'vue'
 import { formatCode } from '@renderer/assets/js/format-code'
 import json from 'highlight.js/lib/languages/json'
 import yaml from 'highlight.js/lib/languages/yaml'
 import xml from 'highlight.js/lib/languages/xml'
-import { ref, watch, nextTick } from 'vue'
 import hljs from 'highlight.js/lib/core'
 
+const MAX_CODE_LENGTH = 8192
+const MAX_RAW_CODE_LENGTH = 1024
+
 hljs.registerLanguage('json', json)
 hljs.registerLanguage('xml', xml)
 hljs.registerLanguage('yaml', yaml)
@@ -18,21 +20,30 @@ type Props = {
 
 const props = defineProps<Props>()
 
-useHighlightTheme()
+const messageSize = computed(() => props.code.length)
+
+const showFormatedCode = computed(
+  () => props.language !== 'raw' && messageSize.value < MAX_CODE_LENGTH
+)
 
-const highlighted = ref('')
 const codeTextRef = ref<HTMLElement>()
 
+const updateElementHighlight = () => {
+  if (!props.language || props.language === 'raw') return
+
+  const code = formatCode(props.code, props.language)
+
+  if (codeTextRef.value) {
+    codeTextRef.value.innerHTML = hljs.highlight(code, { language: props.language }).value
+  }
+}
+
 watch(
   [() => props.code, () => props.language],
   () => {
     if (!props.language || props.language === 'raw') return
 
-    const code = formatCode(props.code, props.language)
-
-    highlighted.value = hljs.highlight(code, {
-      language: props.language
-    }).value
+    updateElementHighlight()
 
     nextTick(() => {
       if (!codeTextRef.value) return
@@ -49,11 +60,19 @@ watch(
   },
   { immediate: true }
 )
+
+onMounted(() => updateElementHighlight())
+
+const getRawCode = () => {
+  if (props.code.length > MAX_RAW_CODE_LENGTH) {
+    return `${props.code.slice(0, MAX_RAW_CODE_LENGTH)}... (truncated)`
+  } else return props.code
+}
 </script>
 
 <template>
-  <span v-if="language !== 'raw'" ref="codeTextRef" class="code-text" v-html="highlighted" />
-  <span v-else class="code-text" v-text="code" />
+  <span v-if="showFormatedCode" ref="codeTextRef" class="code-text" />
+  <span v-else class="code-text" v-text="getRawCode()" />
 </template>
 
 <style scoped lang="less">