feat(ui): Make tooltips toggleable (#1236)

* feat(results): allow for data points in checks to be "clicked"

asdf

* feat(ui): resolve merge conflicts

feat(dev): put back package.lock

* fix(ui): make sure the datapoint stays "fixed"

* fix(ui): watch for url changes to make tooltip go away

* feat(ui): add compiled app.css and app.js

* fix(ui): lengthen the tooltipElement name

---------

Co-authored-by: TwiN <twin@linux.com>

web/app/src/components/EndpointCard.vue

@@ -39,10 +39,16 @@
               :key="index"
               :class="[
                 'flex-1 h-6 sm:h-8 rounded-sm transition-all',
-                result ? (result.success ? 'bg-green-500 hover:bg-green-700' : 'bg-red-500 hover:bg-red-700') : 'bg-gray-200 dark:bg-gray-700'
+                result ? 'cursor-pointer' : '',
+                result ? (
+                  result.success 
+                    ? (selectedResultIndex === index ? 'bg-green-700' : 'bg-green-500 hover:bg-green-700')
+                    : (selectedResultIndex === index ? 'bg-red-700' : 'bg-red-500 hover:bg-red-700')
+                ) : 'bg-gray-200 dark:bg-gray-700'
               ]"
-              @mouseenter="result && emit('showTooltip', result, $event)"
-              @mouseleave="result && emit('showTooltip', null, $event)"
+              @mouseenter="result && handleMouseEnter(result, $event)"
+              @mouseleave="result && handleMouseLeave(result, $event)"
+              @click.stop="result && handleClick(result, $event, index)"
             />
           </div>
           <div class="flex items-center justify-between text-xs text-muted-foreground mt-1">
@@ -57,7 +63,7 @@
 
 <script setup>
 /* eslint-disable no-undef */
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import StatusBadge from '@/components/StatusBadge.vue'
@@ -82,6 +88,9 @@ const props = defineProps({
 
 const emit = defineEmits(['showTooltip'])
 
+// Track selected data point
+const selectedResultIndex = ref(null)
+
 const latestResult = computed(() => {
   if (!props.endpoint.results || props.endpoint.results.length === 0) {
     return null
@@ -156,4 +165,36 @@ const newestResultTime = computed(() => {
 const navigateToDetails = () => {
   router.push(`/endpoints/${props.endpoint.key}`)
 }
+
+const handleMouseEnter = (result, event) => {
+  emit('showTooltip', result, event, 'hover')
+}
+
+const handleMouseLeave = (result, event) => {
+  emit('showTooltip', null, event, 'hover')
+}
+
+const handleClick = (result, event, index) => {
+  // Toggle selection
+  if (selectedResultIndex.value === index) {
+    selectedResultIndex.value = null
+    emit('showTooltip', null, event, 'click')
+  } else {
+    selectedResultIndex.value = index
+    emit('showTooltip', result, event, 'click')
+  }
+}
+
+// Listen for clear selection event
+const handleClearSelection = () => {
+  selectedResultIndex.value = null
+}
+
+onMounted(() => {
+  window.addEventListener('clear-data-point-selection', handleClearSelection)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('clear-data-point-selection', handleClearSelection)
+})
 </script>