diff --git a/web/app/src/App.vue b/web/app/src/App.vue index 0fafb340..7dfa3b29 100644 --- a/web/app/src/App.vue +++ b/web/app/src/App.vue @@ -148,7 +148,7 @@ - + @@ -173,6 +173,7 @@ const announcements = ref([]) const tooltip = ref({}) const mobileMenuOpen = ref(false) const isOidcLoading = ref(false) +const tooltipIsPersistent = ref(false) let configInterval = null // Computed properties @@ -209,8 +210,39 @@ const fetchConfig = async () => { } } -const showTooltip = (result, event) => { - tooltip.value = { result, event } +const showTooltip = (result, event, action = 'hover') => { + if (action === 'click') { + if (!result) { + // Deselecting + tooltip.value = {} + tooltipIsPersistent.value = false + } else { + // Selecting new data point + tooltip.value = { result, event } + tooltipIsPersistent.value = true + } + } else if (action === 'hover') { + // Only update tooltip on hover if not in persistent mode + if (!tooltipIsPersistent.value) { + tooltip.value = { result, event } + } + } +} + +const handleDocumentClick = (event) => { + // Close persistent tooltip when clicking outside + if (tooltipIsPersistent.value) { + const tooltipElement = document.getElementById('tooltip') + // Check if click is on a data point bar or inside tooltip + const clickedDataPoint = event.target.closest('.flex-1.h-6, .flex-1.h-8') + + if (tooltipElement && !tooltipElement.contains(event.target) && !clickedDataPoint) { + tooltip.value = {} + tooltipIsPersistent.value = false + // Emit event to clear selections in child components + window.dispatchEvent(new CustomEvent('clear-data-point-selection')) + } + } } // Fetch config on mount and set up interval @@ -218,6 +250,8 @@ onMounted(() => { fetchConfig() // Refresh config every 10 minutes for announcements configInterval = setInterval(fetchConfig, 600000) + // Add click listener for closing persistent tooltips + document.addEventListener('click', handleDocumentClick) }) // Clean up interval on unmount @@ -226,5 +260,7 @@ onUnmounted(() => { clearInterval(configInterval) configInterval = null } + // Remove click listener + document.removeEventListener('click', handleDocumentClick) }) \ No newline at end of file diff --git a/web/app/src/components/EndpointCard.vue b/web/app/src/components/EndpointCard.vue index c4b64d5d..fd9722a4 100644 --- a/web/app/src/components/EndpointCard.vue +++ b/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)" />
@@ -57,7 +63,7 @@ \ No newline at end of file diff --git a/web/app/src/components/Tooltip.vue b/web/app/src/components/Tooltip.vue index 7213b002..6ea07717 100644 --- a/web/app/src/components/Tooltip.vue +++ b/web/app/src/components/Tooltip.vue @@ -1,12 +1,12 @@