Fixing issues (#809)

* Fetching metadata on tab click and fix metadata cypher query

* Fix #808 issue

* Fix #805 issue

* Fix #804 issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ihr-website",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "private": true,
   "type": "module",
   "scripts": {

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:[email protected]" target="_blank">[email protected]</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>

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>
 

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

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

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')
 

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>

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">

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>
 
 

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

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">

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">

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>

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">

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">