From 676b52740b15cf9e50e353f5b7474a2409443f00 Mon Sep 17 00:00:00 2001
From: Mohamed Awnallah <69568555+mohamedawnallah@users.noreply.github.com>
Date: Tue, 4 Jun 2024 03:48:44 +0300
Subject: [PATCH 1/4] global_report: handle maximum recursive updates (#802)

In this commit, we handle the maximum recursive updates
issue that happens when the filter value acorss the global
report gets populated either through World Map, Time Series,
TreeMap, or the Table data vizs.
---
 src/components/tables/AggregatedAlarmsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tables/AggregatedAlarmsTable.vue b/src/components/tables/AggregatedAlarmsTable.vue
index 683f2ef3..85bfe856 100644
--- a/src/components/tables/AggregatedAlarmsTable.vue
+++ b/src/components/tables/AggregatedAlarmsTable.vue
@@ -103,7 +103,7 @@ const emit = defineEmits(['country-clicked', 'asn-name-key-clicked', {
   }
 }])
 
-const { rows, filterFct, filterTable, getCellValue, dateHourShift, setRows } = commonTable(props, { emit })
+const { rows, dateHourShift, setRows } = commonTable(props, { emit })
 
 const columns = ref(ALARMS_INFO[props.selectedTableDataSource].alarm_types[props.selectedTableAlarmType].metadata.table_columns)
 const aggregatedColumns = ref(ALARMS_INFO[props.selectedTableDataSource].alarm_types[props.selectedTableAlarmType].metadata.table_aggregated_columns)
@@ -349,7 +349,7 @@ watch(() => props.selectedTableAlarmType, () => {
 
 <template>
   <QTable table-class="myClass" :rows="rows" :columns="[...columns, ...aggregatedColumns]" :pagination.sync="pagination"
-    :loading="loading" :filter="filter" :filter-method="filterFct" flat loading-label="Loading Alarms ..."
+    :loading="loading" :filter="filter" flat loading-label="Loading Alarms ..."
     :row-key="tableKeyCurrent" v-model:expanded="expandedRow">
     <template v-slot:body="props">
       <QTr :props="props">

From 22a38af5a2f08bd9a6773351d5f72cfd0fd89d09 Mon Sep 17 00:00:00 2001
From: "romain.fontugne" <romain.fontugne@gmail.com>
Date: Wed, 19 Jun 2024 20:52:56 +0900
Subject: [PATCH 2/4] Simplified the tier-1 check for AS hegemony chart to
 speed up loading time.

---
 src/components/charts/AsInterdependenciesChart.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/AsInterdependenciesChart.vue b/src/components/charts/AsInterdependenciesChart.vue
index 4b1f3d05..422229a9 100644
--- a/src/components/charts/AsInterdependenciesChart.vue
+++ b/src/components/charts/AsInterdependenciesChart.vue
@@ -105,8 +105,8 @@ const makeHegemonyFilter = () => {
 
 const makeHegemonyTier1Filter = () => {
     return new HegemonyQuery()
-    .originAs(0)
-    .asNumber([174,1299])
+    .originAs(1299)
+    .asNumber(1299)
     .addressFamily(props.addressFamily)
     .timeInterval(props.startTime, props.endTime)
     .orderedByTime()
@@ -126,8 +126,8 @@ const apiCall = async() => {
   }
   updateAxesLabel()
   hegemonyFilter.value = makeHegemonyFilter()
-  hegemonyTier1Filter.value = makeHegemonyTier1Filter()
   hegemonyConeFilter.value = makeHegemonyConeFilter()
+  hegemonyTier1Filter.value = makeHegemonyTier1Filter()
   traces.value = extend(true, [], DEFAULT_TRACE)
   loading.value = true
   loadingHegemony.value = true
@@ -812,4 +812,4 @@ onMounted(() => {
     overflow hidden
     padding-top 0px !important
     position relative
-</style>
\ No newline at end of file
+</style>

From 87c8b337ba0c5e20aa86b7d8e8e22edc352428d9 Mon Sep 17 00:00:00 2001
From: Ryan Ngo <ryan.ngo.dev@gmail.com>
Date: Thu, 20 Jun 2024 08:17:35 +0700
Subject: [PATCH 3/4] Fix issue 806 - Missing y-label in network report chart
 (#807)

* fix update layout for reactive chart

* add y-label for prefix tags chart
---
 src/components/charts/ReactiveChart.vue        |  6 +++---
 src/components/iyp/as/ASOriginatedPrefixes.vue | 11 ++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/charts/ReactiveChart.vue b/src/components/charts/ReactiveChart.vue
index a8e51689..6907d2e1 100644
--- a/src/components/charts/ReactiveChart.vue
+++ b/src/components/charts/ReactiveChart.vue
@@ -143,9 +143,9 @@ onMounted(() => {
 watch(() => props.traces, () => {
   react()
 }, { deep: true })
-// watch(() => props.layout, () => {
-//   react()
-// })
+watch(() => props.layout, () => {
+  layoutLocal.value = Object.assign(layoutLocal.value, props.layout)
+})
 watch(() => props.yMax, (newValue) => {
   const graphDiv = myId.value
   Plotly.relayout(graphDiv, 'yaxis.range', [0, newValue])
diff --git a/src/components/iyp/as/ASOriginatedPrefixes.vue b/src/components/iyp/as/ASOriginatedPrefixes.vue
index c7988d6e..9b416406 100644
--- a/src/components/iyp/as/ASOriginatedPrefixes.vue
+++ b/src/components/iyp/as/ASOriginatedPrefixes.vue
@@ -73,11 +73,12 @@ onMounted(() => {
             :chart-layout="{ title: 'Geo-location (Maxmind)' }" />
       </div>
       <div class="col-6">
-        <IypGenericBarChart 
-            v-if="prefixes.data.length > 0" 
-            :chart-data="prefixes.data" 
-            :config="{key:'tags'}" 
-            :chart-layout="{ title: 'Prefix tags' }" />
+        <IypGenericBarChart
+          v-if="prefixes.data.length > 0"
+          :chart-data="prefixes.data"
+          :config="{ key: 'tags' }"
+          :chart-layout="{yaxis: { title: { text: 'Number of prefixes' } }, title: 'Prefix tags',  }"
+        />
       </div>
       <div class="col-10">
       <IypGenericTreemapChart

From 6383ddff3501c37267b093b17b7b53b64b8e0651 Mon Sep 17 00:00:00 2001
From: Dimitrios Panteleimon Giakatos
 <36899728+dpgiakatos@users.noreply.github.com>
Date: Thu, 20 Jun 2024 18:14:30 +0900
Subject: [PATCH 4/4] Fixing issues (#809)

* Fetching metadata on tab click and fix metadata cypher query

* Fix #808 issue

* Fix #805 issue

* Fix #804 issue
---
 package.json                                  |  2 +-
 src/components/Feedback.vue                   | 53 +++++++++++++++++++
 .../charts/AsInterdependenciesChart.vue       |  3 +-
 src/components/charts/ReactiveChart.vue       |  3 ++
 .../controllers/GenericCardController.vue     | 18 +------
 .../iyp/as/ASOriginatedPrefixes.vue           |  1 -
 src/components/tables/IypGenericTable.vue     | 29 ++++++----
 src/views/Countries.vue                       |  2 +
 src/views/GlobalReport.vue                    |  2 +
 src/views/Home.vue                            |  3 +-
 src/views/HostNames.vue                       |  2 +
 src/views/Networks.vue                        |  2 +
 src/views/ROV.vue                             |  2 +
 src/views/Ranks.vue                           |  2 +
 src/views/Tags.vue                            |  2 +
 15 files changed, 94 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Feedback.vue

diff --git a/package.json b/package.json
index fbffc919..a4444c13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ihr-website",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/components/Feedback.vue b/src/components/Feedback.vue
new file mode 100644
index 00000000..a8e38df9
--- /dev/null
+++ b/src/components/Feedback.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue'
+import { QBtn, QDialog, QCard, QCardSection, QCardActions } from 'quasar'
+
+const showFeedbackDialog = ref(false)
+</script>
+
+<template>
+	<QBtn
+		class="feedback-btn"
+		@click="showFeedbackDialog = true"
+		no-caps
+		unelevated
+		label="Give Feedback"
+		dense
+	/>
+	<QDialog v-model="showFeedbackDialog">
+		<QCard>
+			<QCardSection>
+				<div class="text-h6">Give Feedback</div>
+			</QCardSection>
+			<QCardSection>
+				<div>
+					Please share your feedback to improve our report pages. You can either:
+					<ul>
+						<li>Send your feedback by email to <a href="mailto:admin@ihr.live" target="_blank">admin@ihr.live</a></li>
+						<li>Join our <a href="https://join.slack.com/t/internethealthreport/shared_invite/zt-19d4e48py-~oirVwkINe01gTVEF3o4Kw">Slack workspace</a> and send your feedback as a direct message or in the #ihr-website channel</li>
+						<li>Create a new <a href="https://github.com/InternetHealthReport/ihr-website/issues">GitHub issue</a> requesting a new feature</li>
+					</ul>
+					Thank you!
+				</div>
+			</QCardSection>
+			<QCardActions align="right">
+				<QBtn flat label="Close" v-close-popup />
+			</QCardActions>
+		</QCard>
+	</QDialog>
+</template>
+
+<style>
+.feedback-btn {
+	position: fixed !important;
+	top: 50%;
+	right: 0px;
+	writing-mode: vertical-rl;
+	text-orientation: mixed;
+	transform: rotate(180deg);
+	background-color: #f44336 !important;
+	color: white !important;
+	border-radius: 0 5px 5px 0 !important;
+	z-index: 2000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/charts/AsInterdependenciesChart.vue b/src/components/charts/AsInterdependenciesChart.vue
index 422229a9..1376b3bb 100644
--- a/src/components/charts/AsInterdependenciesChart.vue
+++ b/src/components/charts/AsInterdependenciesChart.vue
@@ -181,6 +181,7 @@ const showTable = (table, selectedDate) => {
   if (props.noTable) {
     return
   }
+  getNeighboursData()
   if (selectedDate.length < 16) {
     // at midnight no time is given
     details.value.date = new Date(selectedDate + ' 00:00 GMT') //adding timezone to string...
@@ -728,7 +729,6 @@ watch(() => props.clear, () => {
 watch(() => props.endTime, () => {
   apiCall()
   tableFromQuery()
-  getNeighboursData()
 })
 
 onBeforeMount(() => {
@@ -737,7 +737,6 @@ onBeforeMount(() => {
 onMounted(() => {
   apiCall()
   tableFromQuery()
-  getNeighboursData()
 })
 </script>
 
diff --git a/src/components/charts/ReactiveChart.vue b/src/components/charts/ReactiveChart.vue
index 6907d2e1..ee1fbd60 100644
--- a/src/components/charts/ReactiveChart.vue
+++ b/src/components/charts/ReactiveChart.vue
@@ -145,6 +145,9 @@ watch(() => props.traces, () => {
 }, { deep: true })
 watch(() => props.layout, () => {
   layoutLocal.value = Object.assign(layoutLocal.value, props.layout)
+  if (layoutLocal.value['title'] !== undefined) {
+    delete layoutLocal.value['title']
+  }
 })
 watch(() => props.yMax, (newValue) => {
   const graphDiv = myId.value
diff --git a/src/components/controllers/GenericCardController.vue b/src/components/controllers/GenericCardController.vue
index e4a8e882..d1b06dd8 100644
--- a/src/components/controllers/GenericCardController.vue
+++ b/src/components/controllers/GenericCardController.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { QCard, QCardSection, QCardActions, QBar, QBtn, QSpace, QTooltip, copyToClipboard, QDialog } from 'quasar'
-import { RouterLink, useRoute, useRouter } from 'vue-router'
-import Tr from '@/i18n/translation'
-import { ref, inject, computed, watch, nextTick, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ref, computed } from 'vue'
 
 const props = defineProps({
   title: {
@@ -27,17 +26,9 @@ const props = defineProps({
 
 const route = useRoute()
 
-const showReportDayRange = ref(false)
 const anchorUrl = ref(props.title.replaceAll(' ', '-'))
 const infoDialog = ref(false)
 
-const reportDayText = computed(() => {
-  if (props.reportDay) {
-    return `${props.reportDay}-day report`
-  }
-  return 'Weekly report'
-})
-
 const getInfo = () => {
   infoDialog.value = true
 }
@@ -60,11 +51,6 @@ const getUrlAnchor = () => {
           <div class="text-subtitle2">{{ subTitle }}</div>
         </div>
         <QSpace />
-        <!-- <QBtn @click="showReportDayRange = !showReportDayRange" dense flat icon="fa-solid fa-calendar">
-          <QTooltip v-model="showReportDayRange" no-parent-event>
-            {{ reportDayText }}
-          </QTooltip>
-        </QBtn> -->
         <QBtn @click="copyToClipboard(getUrlAnchor())" dense flat icon="fa-solid fa-link">
           <QTooltip>
             Copy widget's URL
diff --git a/src/components/iyp/as/ASOriginatedPrefixes.vue b/src/components/iyp/as/ASOriginatedPrefixes.vue
index 9b416406..a26a7c09 100644
--- a/src/components/iyp/as/ASOriginatedPrefixes.vue
+++ b/src/components/iyp/as/ASOriginatedPrefixes.vue
@@ -5,7 +5,6 @@ import IypGenericTable from '@/components/tables/IypGenericTable.vue'
 import IypGenericPieChart from '@/components/charts/IypGenericPieChart.vue'
 import IypGenericBarChart from '@/components/charts/IypGenericBarChart.vue'
 import IypGenericTreemapChart from '@/components/charts/IypGenericTreemapChart.vue'
-import treemapClicked from '@/plugins/IypGenericTreemapChart.js'
 
 const iyp_api = inject('iyp_api')
 
diff --git a/src/components/tables/IypGenericTable.vue b/src/components/tables/IypGenericTable.vue
index 099c7e8c..b50a57b1 100644
--- a/src/components/tables/IypGenericTable.vue
+++ b/src/components/tables/IypGenericTable.vue
@@ -41,7 +41,7 @@ const filter = ref('')
 const colToUnderline = ref(['ASN', 'AS', 'Origin AS', 'Country', 'IXP', 'Prefix','Reg. Country', 'Geoloc. Country', 'Country', 'CC', 'Hostname'])
 const underline = ref(false)
 const metadata = ref({})
-const loadingStatus = ref(true)
+const loadingStatusMetadata = ref(false)
 
 const wrapCsvValue = (val, formatFn, row) => {
   let formatted = formatFn !== void 0
@@ -96,21 +96,23 @@ const getMetadataQuery = () => {
   query = query.replace(/(ORDER|order)(?:.|\n)*/gm, '')
   query = query.replace(/(WHERE|where)(?:.|n)*/gm, '')
   query = query.replace(/\[(?:.)*?:/gm, '[:')
-  query = query.replaceAll('*', '')
+  query = query.replace(/\*(?!\d)/gm, '')
   query = query.split('[:')
   const queryVars = []
   for (let i=1; i<query.length; i++) {
     queryVars.push(`edge${i-1}`)
     query[i] = `${queryVars[i-1]}:${query[i]}`
   }
-  query = `${query.join('[')} WITH `
-  const collectList = 'COLLECT(DISTINCT [var0.reference_org, var0.reference_url_data, var0.reference_url_info, var0.reference_time_fetch, var0.reference_time_modification]) AS var1'
+  query = `${query.join('[')} `
+  const collectList = `WITH *, CASE WHEN var0 IS :: LIST<RELATIONSHIP> THEN var0 ELSE [var0] END AS var
+    WITH *, head(var) AS var0
+    WITH *, COLLECT(DISTINCT [var0.reference_org, var0.reference_url_data, var0.reference_url_info, var0.reference_time_fetch, var0.reference_time_modification]) AS var1`
   const listVars = []
   queryVars.forEach((el, index) => {
     listVars.push(`list${index}`)
     query += collectList.replaceAll('var0', el).replace('var1', listVars[index])
     if (index < queryVars.length - 1) {
-      query += ', '
+      query += ' '
     }
   })
   query += ` UNWIND ${listVars.join('+')} AS metadata_list RETURN DISTINCT metadata_list`
@@ -130,7 +132,7 @@ const parseDate = (date) => {
 }
 
 const fetchMetadata = async () => {
-  loadingStatus.value = true
+  loadingStatusMetadata.value = true
   try {
     let res = await iyp_api.run([{ statement: getMetadataQuery() }])
     res[0].forEach(obj => {
@@ -154,9 +156,9 @@ const fetchMetadata = async () => {
          }
       }
     })
-    loadingStatus.value = false
+    loadingStatusMetadata.value = false
   } catch (e) {
-    loadingStatus.value = false
+    loadingStatusMetadata.value = false
     return
   }
 }
@@ -225,6 +227,12 @@ const routeToHostName = (hostName) => {
   }))
 }
 
+const transition = (newVal, oldVal) => {
+  if (newVal === 'metadata') {
+    fetchMetadata()
+  }
+}
+
 watch(activeTab, () => {
   if (activeTab.value == 'chart') {
     // console.log(`Current Tab: ${activeTab.value}`)
@@ -242,7 +250,6 @@ watch(() => props.data, () => {
 })
 
 onMounted(() => {
-  fetchMetadata()
   if (props.slotLength <= 0) {
     activeTab.value = 'data'
   }
@@ -251,7 +258,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <div v-if="loadingStatus" class="IHR_loading-spinner" style="z-index: 1000;">
+    <div v-if="loadingStatus || loadingStatusMetadata" class="IHR_loading-spinner" style="z-index: 1000;">
       <QSpinner color="secondary" size="15em" />
     </div>
     <div>
@@ -268,7 +275,7 @@ onMounted(() => {
         <QTab name="api" label="CYPHER QUERY"></QTab>
         <QTab name="metadata" label="METADATA"></QTab>
       </QTabs>
-      <QTabPanels v-model="activeTab" animated>
+      <QTabPanels v-model="activeTab" animated @transition="transition">
         <QTabPanel name="chart">
           <div id="chartContainer">
               <slot></slot>
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index a04bff76..91035aa1 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -5,6 +5,7 @@ import { ref, watch, onMounted } from 'vue'
 import SearchBar from '@/components/search/SearchBar.vue'
 import Country from '@/components/networks/Country.vue'
 import { isoCountries } from '@/plugins/countryName'
+import Feedback from '@/components/Feedback.vue'
 
 const route = useRoute()
 
@@ -85,6 +86,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <Feedback />
 </template>
 
 <style lang="stylus">
diff --git a/src/views/GlobalReport.vue b/src/views/GlobalReport.vue
index bf2288d8..b847bde8 100644
--- a/src/views/GlobalReport.vue
+++ b/src/views/GlobalReport.vue
@@ -9,6 +9,7 @@ import { DEFAULT_MIN_NPROBES, DEFAULT_MIN_DEVIATION, DEFAULT_MIN_DIFFMEDIAN, DEF
 import AggregatedAlarmsController from '@/components/controllers/AggregatedAlarmsController.vue'
 import { Query, HegemonyAlarmsQuery, NetworkDelayAlarmsQuery, DiscoEventQuery } from '@/plugins/IhrApi'
 import { ALARMS_INFO } from '@/plugins/metadata/AggregatedAlarmsMetadata'
+import Feedback from '@/components/Feedback.vue'
 
 const ihr_api = inject('ihr_api')
 
@@ -267,6 +268,7 @@ onMounted(() => {
         :networkDisconnectionLoading="loading.network_disconnection" />
     </QExpansionItem>
   </div>
+  <Feedback />
 </template>
 
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 560178f2..1aa7f378 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -224,7 +224,8 @@ const organizations = ref(ORGANIZATIONS)
 
 .IHR_actions-area
   width 100%
-  max-width 330px
+  min-width 330px
+  max-width fit-content
 
 .IHR_
   &description_text
diff --git a/src/views/HostNames.vue b/src/views/HostNames.vue
index 0c7b07de..f78c1fe3 100644
--- a/src/views/HostNames.vue
+++ b/src/views/HostNames.vue
@@ -4,6 +4,7 @@ import Tr from '@/i18n/translation'
 import { ref, watch, onMounted } from 'vue'
 import SearchBar from '@/components/search/SearchBar.vue'
 import HostName from '@/components/networks/HostName.vue'
+import Feedback from '@/components/Feedback.vue'
 
 const route = useRoute()
 
@@ -84,6 +85,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <Feedback />
 </template>
 
 <style lang="stylus">
diff --git a/src/views/Networks.vue b/src/views/Networks.vue
index fc8391d3..4138113e 100644
--- a/src/views/Networks.vue
+++ b/src/views/Networks.vue
@@ -7,6 +7,7 @@ import AS from '@/components/networks/AS.vue'
 import IXP from '@/components/networks/IXP.vue'
 import Prefix from '@/components/networks/Prefix.vue'
 import * as ipAddress from 'ip-address'
+import Feedback from '@/components/Feedback.vue'
 
 const route = useRoute()
 
@@ -118,6 +119,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <Feedback />
 </template>
 
 <style lang="stylus">
diff --git a/src/views/ROV.vue b/src/views/ROV.vue
index bf67dd0b..8fcaf8f7 100644
--- a/src/views/ROV.vue
+++ b/src/views/ROV.vue
@@ -7,6 +7,7 @@ import { isoCountries } from '@/plugins/countryName'
 import report from '@/plugins/report'
 import DateTimePicker from '@/components/DateTimePicker.vue'
 import PrefixHegemonyChart from '@/components/charts/PrefixHegemonyChart.vue'
+import Feedback from '@/components/Feedback.vue'
 
 const LOADING_STATUS = {
   ERROR: -3,
@@ -119,4 +120,5 @@ onMounted(() => {
     <PrefixHegemonyChart :start-time="startTime" :end-time="endTime" :fetch="fetch" />
     <!-- <button @click="generateReport()" class="np-btn">Generate Report</button> -->
   </div>
+  <Feedback />
 </template>
\ No newline at end of file
diff --git a/src/views/Ranks.vue b/src/views/Ranks.vue
index cc094dda..7301f84a 100644
--- a/src/views/Ranks.vue
+++ b/src/views/Ranks.vue
@@ -4,6 +4,7 @@ import Tr from '@/i18n/translation'
 import { ref, watch, onMounted } from 'vue'
 import SearchBar from '@/components/search/SearchBar.vue'
 import Rank from '@/components/networks/Rank.vue'
+import Feedback from '@/components/Feedback.vue'
 
 const route = useRoute()
 
@@ -84,6 +85,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <Feedback />
 </template>
 
 <style lang="stylus">
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index 6515ffae..620187dc 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -4,6 +4,7 @@ import Tr from '@/i18n/translation'
 import { ref, watch, onMounted } from 'vue'
 import SearchBar from '@/components/search/SearchBar.vue'
 import Tag from '@/components/networks/Tag.vue'
+import Feedback from '@/components/Feedback.vue'
 
 const route = useRoute()
 
@@ -84,6 +85,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
+  <Feedback />
 </template>
 
 <style lang="stylus">