diff --git a/src/App.vue b/src/App.vue
index 0762532f..a2806008 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,10 +33,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <QLayout
-    id="app"
-    view="hHh LpR fff"
-  >
+  <QLayout id="app" view="hHh LpR fff">
     <Header />
     <QPageContainer>
       <RouterView />
@@ -114,5 +111,4 @@ onBeforeUnmount(() => {
 #IHR_last-element {
   height: 50px;
 }
-
 </style>
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
index e9d34696..ca14c118 100644
--- a/src/components/DateTimePicker.vue
+++ b/src/components/DateTimePicker.vue
@@ -72,15 +72,8 @@ const textColor = computed(() => {
 </script>
 
 <template>
-  <QIcon
-    name="fas fa-calendar-day"
-    class="cursor-pointer"
-    :class="textColor"
-  >
-    <QPopupProxy
-      id="popupid"
-      v-model="show"
-    >
+  <QIcon name="fas fa-calendar-day" class="cursor-pointer" :class="textColor">
+    <QPopupProxy id="popupid" v-model="show">
       <QDate
         v-model="qTimeModel"
         :mask="mask"
diff --git a/src/components/Feedback.vue b/src/components/Feedback.vue
index 8579001f..5dc36139 100644
--- a/src/components/Feedback.vue
+++ b/src/components/Feedback.vue
@@ -17,9 +17,7 @@ const showFeedbackDialog = ref(false)
   <QDialog v-model="showFeedbackDialog">
     <QCard>
       <QCardSection>
-        <div class="text-h6">
-          Give Feedback
-        </div>
+        <div class="text-h6">Give Feedback</div>
       </QCardSection>
       <QCardSection>
         <div>
@@ -27,16 +25,14 @@ const showFeedbackDialog = ref(false)
           <ul>
             <li>
               Send your feedback by email to
-              <a
-                href="mailto:admin@ihr.live"
-                target="_blank"
-              >admin@ihr.live</a>
+              <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>
+                >Slack workspace</a
+              >
               and send your feedback as a direct message or in the #ihr-website channel
             </li>
             <li>
@@ -49,11 +45,7 @@ const showFeedbackDialog = ref(false)
         </div>
       </QCardSection>
       <QCardActions align="right">
-        <QBtn
-          v-close-popup
-          flat
-          label="Close"
-        />
+        <QBtn v-close-popup flat label="Close" />
       </QCardActions>
     </QCard>
   </QDialog>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 9f950763..0b8108d5 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,146 +6,84 @@ import { version } from '../../package.json'
 </script>
 
 <template>
-  <QFooter
-    elevated
-    primary
-    class="IHR_footer text-white text-center"
-    style="z-index: 999"
-  >
+  <QFooter elevated primary class="IHR_footer text-white text-center" style="z-index: 999">
     <div class="IHR_footer_contents">
       <div class="IHR_fsection">
-        <div
-          class=""
-          style="max-width: 400px"
-        >
+        <div class="" style="max-width: 400px">
           <div>
-            <QBtn
-              round
-              dense
-              flat
-              :ripple="false"
-              no-caps
-            >
+            <QBtn round dense flat :ripple="false" no-caps>
               <RouterLink :to="Tr.i18nRoute({ name: 'home' })">
-                <img
-                  src="@/assets/imgs/ihr_logo.svg"
-                  class="ihr-logo"
-                >
+                <img src="@/assets/imgs/ihr_logo.svg" class="ihr-logo" />
               </RouterLink>
               <a
                 :href="`https://github.com/InternetHealthReport/ihr-website/releases/tag/v${version}`"
                 class=""
                 target="_blank"
               >
-                <QBadge
-                  color="red"
-                  floating
-                >v{{ version }}</QBadge>
+                <QBadge color="red" floating>v{{ version }}</QBadge>
               </a>
             </QBtn>
-            <div class="text-weight-bold text-h5 q-mt-sm">
-              Internet Health Report
-            </div>
+            <div class="text-weight-bold text-h5 q-mt-sm">Internet Health Report</div>
           </div>
           <div class="IHR_external-links">
             <div class="row nowrap justify-evenly">
-              <a
-                href="https://x.com/ihr_alerts"
-                class=""
-                target="_blank"
-              >
-                <QIcon
-                  name="fab fa-square-x-twitter"
-                  class="inline-block"
-                />
+              <a href="https://x.com/ihr_alerts" class="" target="_blank">
+                <QIcon name="fab fa-square-x-twitter" class="inline-block" />
               </a>
-              <a
-                href="https://github.com/InternetHealthReport"
-                class=""
-                target="_blank"
-              >
-                <QIcon
-                  name="fab fa-github-square"
-                  class="inline-block"
-                />
+              <a href="https://github.com/InternetHealthReport" class="" target="_blank">
+                <QIcon name="fab fa-github-square" class="inline-block" />
               </a>
-              <a
-                href="mailto:admin@ihr.live"
-                class=""
-                target="_blank"
-              >
-                <QIcon
-                  name="fas fa-envelope-square"
-                  class="inline-block"
-                />
+              <a href="mailto:admin@ihr.live" class="" target="_blank">
+                <QIcon name="fas fa-envelope-square" class="inline-block" />
               </a>
             </div>
           </div>
         </div>
       </div>
       <div class="IHR_fsection">
-        <div
-          class="IHR_sitemap"
-          style="max-width: 700px"
-        >
+        <div class="IHR_sitemap" style="max-width: 700px">
           <ul>
             <li class="text-weight-bold links-title text-capitalize">
               {{ $t('footer.reportPages.title') }}
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'global-report' })">
-                {{
-                  $t('footer.reportPages.global')
-                }}
+                {{ $t('footer.reportPages.global') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'country', params: { cc: null } })">
-                {{
-                  $t('footer.reportPages.country')
-                }}
+                {{ $t('footer.reportPages.country') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: null } })">
-                {{
-                  $t('footer.reportPages.network')
-                }}
+                {{ $t('footer.reportPages.network') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'hostname', params: { id: null } })">
-                {{
-                  $t('footer.reportPages.hostName')
-                }}
+                {{ $t('footer.reportPages.hostName') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'tag', params: { id: null } })">
-                {{
-                  $t('footer.reportPages.tag')
-                }}
+                {{ $t('footer.reportPages.tag') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'rank', params: { rank: null } })">
-                {{
-                  $t('footer.reportPages.rank')
-                }}
+                {{ $t('footer.reportPages.rank') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'rov' })">
-                {{
-                  $t('footer.reportPages.rov')
-                }}
+                {{ $t('footer.reportPages.rov') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'covid19' })">
-                {{
-                  $t('footer.reportPages.covid19')
-                }}
+                {{ $t('footer.reportPages.covid19') }}
               </RouterLink>
             </li>
           </ul>
@@ -157,23 +95,17 @@ import { version } from '../../package.json'
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'documentation' })">
-                {{
-                  $t('footer.about.title')
-                }}
+                {{ $t('footer.about.title') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#AS-dependency' })">
-                {{
-                  $t('footer.documentation.analysisModules')
-                }}
+                {{ $t('footer.documentation.analysisModules') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#REST-API' })">
-                {{
-                  $t('footer.documentation.dataAccess')
-                }}
+                {{ $t('footer.documentation.dataAccess') }}
               </RouterLink>
             </li>
           </ul>
@@ -184,17 +116,13 @@ import { version } from '../../package.json'
               </RouterLink>
             </li>
             <li>
-              <RouterLink
-                :to="Tr.i18nRoute({ name: 'documentation', hash: '#Acknowledgements' })"
-              >
+              <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#Acknowledgements' })">
                 {{ $t('footer.about.acknowledgments') }}
               </RouterLink>
             </li>
             <li>
               <RouterLink :to="Tr.i18nRoute({ name: 'documentation', hash: '#Data-policy' })">
-                {{
-                  $t('footer.about.datapolicy')
-                }}
+                {{ $t('footer.about.datapolicy') }}
               </RouterLink>
             </li>
           </ul>
@@ -202,20 +130,14 @@ import { version } from '../../package.json'
       </div>
     </div>
     <div class="IHR_fsection">
-      <div
-        class="row items-center IHR_license-section"
-        style="max-width: 800px"
-      >
+      <div class="row items-center IHR_license-section" style="max-width: 800px">
         <div class="col-3">
-          <a
-            rel="license"
-            href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
-            target="_blank"
-          ><img
-            alt="Creative Commons License"
-            style="border-width: 0"
-            src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
-          ></a>
+          <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"
+            ><img
+              alt="Creative Commons License"
+              style="border-width: 0"
+              src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
+          /></a>
         </div>
         <div class="col-9 text-caption text-center q-pa-sm">
           <span
@@ -224,18 +146,18 @@ import { version } from '../../package.json'
             property="dct:title"
             rel="dct:type"
           >
-            Internet Health Report</span>
+            Internet Health Report</span
+          >
           is licensed under a
-          <a
-            rel="license"
-            href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
-            target="_blank"
-          >Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. Permissions beyond the scope of this license may be available at
+          <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"
+            >Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a
+          >. Permissions beyond the scope of this license may be available at
           <a
             xmlns:cc="http://creativecommons.org/ns#"
             href="mailto:admin@ihr.live"
             rel="cc:morePermissions"
-          >admin@ihr.live</a>.
+            >admin@ihr.live</a
+          >.
         </div>
       </div>
     </div>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3e359d59..15f552a3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -169,26 +169,13 @@ watch(simpleMenu, () => {
 </script>
 
 <template>
-  <QHeader
-    elevated
-    primary
-  >
+  <QHeader elevated primary>
     <QToolbar class="q-py-sm q-px-lg row">
       <div class="col-12 row no-wrap items-center">
         <QItem id="IHR_home-button">
           <RouterLink :to="Tr.i18nRoute({ name: 'home' })">
-            <QBtn
-              round
-              dense
-              flat
-              :ripple="false"
-              no-caps
-              size="22px"
-            >
-              <img
-                src="@/assets/imgs/ihr_logo.svg"
-                style="width: 45px"
-              >
+            <QBtn round dense flat :ripple="false" no-caps size="22px">
+              <img src="@/assets/imgs/ihr_logo.svg" style="width: 45px" />
             </QBtn>
           </RouterLink>
         </QItem>
@@ -196,11 +183,7 @@ watch(simpleMenu, () => {
         <div
           class="IHR_menu-entries text-body2 text-weight-bold row items-center no-wrap gt-sm q-ml-auto q-mr-md"
         >
-          <QBtnGroup
-            v-for="(item, index) in simpleMenu"
-            :key="item.entryName"
-            flat
-          >
+          <QBtnGroup v-for="(item, index) in simpleMenu" :key="item.entryName" flat>
             <QBtn
               v-if="item.options == null"
               flat
@@ -238,14 +221,8 @@ watch(simpleMenu, () => {
                     <QItemLabel class="text-bold">
                       {{ $t(option.entryName) }}
                     </QItemLabel>
-                    <QItemLabel
-                      class="text-grey"
-                      caption
-                      lines="2"
-                    >
-                      {{
-                        $t(option.summary)
-                      }}
+                    <QItemLabel class="text-grey" caption lines="2">
+                      {{ $t(option.summary) }}
                     </QItemLabel>
                   </QItemSection>
                 </QItem>
@@ -267,18 +244,10 @@ watch(simpleMenu, () => {
       </div>
       <!--Log in /Log out stuff here-->
     </QToolbar>
-    <QDrawer
-      v-model="leftDrawerOpen"
-      bordered
-      class="bg-primary"
-    >
+    <QDrawer v-model="leftDrawerOpen" bordered class="bg-primary">
       <QList>
         <!-- <QItemLabel header>Essential Links</QItemLabel> -->
-        <QItem
-          v-for="item in simpleMenu"
-          :key="item.entryName"
-          flat
-        >
+        <QItem v-for="item in simpleMenu" :key="item.entryName" flat>
           <QBtn
             v-if="item.options == null"
             flat
@@ -292,12 +261,7 @@ watch(simpleMenu, () => {
             menu-anchor="bottom left"
             menu-self="top left"
           >
-            <QList
-              class="rounded-borders text-white bg-primary"
-              bordered
-              separator
-              padding
-            >
+            <QList class="rounded-borders text-white bg-primary" bordered separator padding>
               <QItem
                 v-for="option in item.options"
                 :key="option.entryName"
@@ -310,14 +274,8 @@ watch(simpleMenu, () => {
                   <QItemLabel class="text-bold">
                     {{ $t(option.entryName) }}
                   </QItemLabel>
-                  <QItemLabel
-                    class="text-grey"
-                    caption
-                    lines="2"
-                  >
-                    {{
-                      $t(option.summary)
-                    }}
+                  <QItemLabel class="text-grey" caption lines="2">
+                    {{ $t(option.summary) }}
                   </QItemLabel>
                 </QItemSection>
               </QItem>
diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index 39c9483e..20362721 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -21,10 +21,7 @@ const switchLanguage = async (newLocale) => {
 </script>
 
 <template>
-  <QBtn
-    flat
-    icon="fa-solid fa-language"
-  >
+  <QBtn flat icon="fa-solid fa-language">
     <QMenu>
       <QList>
         <QItem
diff --git a/src/components/LocalStorageBanner.vue b/src/components/LocalStorageBanner.vue
index 04930f32..f8cb934a 100644
--- a/src/components/LocalStorageBanner.vue
+++ b/src/components/LocalStorageBanner.vue
@@ -34,12 +34,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <QCard
-    v-if="banner"
-    dark
-    class="fixed-bottom"
-    wrap-text
-  >
+  <QCard v-if="banner" dark class="fixed-bottom" wrap-text>
     <QCardSection class="text">
       We use local storage to enhance your experience on our website. By clicking &#39;Accept&#39;,
       you agree to allow us to store and access data on your device. This helps us personalize
@@ -48,18 +43,8 @@ onMounted(async () => {
       experience!
     </QCardSection>
     <QCardActions align="right">
-      <QBtn
-        flat
-        color="green"
-        label="Accept"
-        @click="onAcceptClick"
-      />
-      <QBtn
-        flat
-        color="red"
-        label="Decline"
-        @click="onDeclineClick"
-      />
+      <QBtn flat color="green" label="Accept" @click="onAcceptClick" />
+      <QBtn flat color="red" label="Decline" @click="onDeclineClick" />
     </QCardActions>
   </QCard>
 </template>
diff --git a/src/components/MetisWidget.vue b/src/components/MetisWidget.vue
index 67e3e98b..11acc9bd 100644
--- a/src/components/MetisWidget.vue
+++ b/src/components/MetisWidget.vue
@@ -151,14 +151,8 @@ onMounted(() => {
     </div>
     <div class="row justify-center">
       <div class="col q-px-md">
-        <QExpansionItem
-          label="Show data"
-          class="bg-grey-2"
-        >
-          <MetisTable
-            :data="tableData"
-            :loading="!fetch"
-          />
+        <QExpansionItem label="Show data" class="bg-grey-2">
+          <MetisTable :data="tableData" :loading="!fetch" />
         </QExpansionItem>
       </div>
     </div>
diff --git a/src/components/TracerouteMonitor.vue b/src/components/TracerouteMonitor.vue
index 66a53f56..c4b64e89 100644
--- a/src/components/TracerouteMonitor.vue
+++ b/src/components/TracerouteMonitor.vue
@@ -19,10 +19,10 @@ const props = defineProps({
     default: false
   },
   probeIDs: {
-    type: Array,
+    type: Array
   },
   destinationIPs: {
-    type: Array,
+    type: Array
   }
 })
 
@@ -88,7 +88,9 @@ const processData = async (tracerouteData, loadProbes = false) => {
 
     if (loadProbes) {
       if (
-        (!props.probeIDs || props.probeIDs.length === 0 || props.probeIDs.includes(probeData.prb_id.toString())) &&
+        (!props.probeIDs ||
+          props.probeIDs.length === 0 ||
+          props.probeIDs.includes(probeData.prb_id.toString())) &&
         !allProbes.value.includes(probeData.prb_id)
       ) {
         allProbes.value.push(probeData.prb_id.toString())
@@ -100,7 +102,9 @@ const processData = async (tracerouteData, loadProbes = false) => {
     }
 
     if (
-      (!props.destinationIPs || props.destinationIPs.length === 0 || props.destinationIPs.includes(probeData.dst_addr)) &&
+      (!props.destinationIPs ||
+        props.destinationIPs.length === 0 ||
+        props.destinationIPs.includes(probeData.dst_addr)) &&
       !allDestinations.value.includes(probeData.dst_addr)
     ) {
       allDestinations.value.push(probeData.dst_addr)
@@ -228,7 +232,6 @@ const processData = async (tracerouteData, loadProbes = false) => {
   updateDisplayedRttValues()
 }
 
-
 const updateDisplayedRttValues = () => {
   let minRtt = Infinity
   let maxRtt = -Infinity
@@ -447,11 +450,7 @@ watch(
       :asn-list="asnList"
       @update-displayed-rtt-values="updateDisplayedRttValues"
     />
-    <QExpansionItem
-      :default-opened="props.openOptions"
-      icon="tune"
-      label="Options"
-    >
+    <QExpansionItem :default-opened="props.openOptions" icon="tune" label="Options">
       <GenericCardController
         :title="$t('tracerouteMonitorRtt.title')"
         :sub-title="$t('tracerouteMonitorRtt.subTitle')"
diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
index b4dde09c..30fec52a 100644
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@@ -50,48 +50,24 @@ onMounted(() => {
 </script>
 
 <template>
-  <QMarkupTable
-    class="user-info-card"
-    dense
-    bordered
-  >
+  <QMarkupTable class="user-info-card" dense bordered>
     <thead>
       <tr>
-        <th
-          :colspan="2"
-          align="center"
-          style="border-bottom: 1px solid white; font-size: large"
-        >
+        <th :colspan="2" align="center" style="border-bottom: 1px solid white; font-size: large">
           YOUR CONNECTION
         </th>
       </tr>
     </thead>
     <tbody v-if="!as_info_query.loading">
       <tr>
-        <td
-          align="right"
-          class="user-info-text"
-        >
-          IP:
-        </td>
-        <td
-          align="left"
-          class="user-info-text"
-        >
+        <td align="right" class="user-info-text">IP:</td>
+        <td align="left" class="user-info-text">
           {{ userInfo.IP }}
         </td>
       </tr>
       <tr>
-        <td
-          align="right"
-          class="user-info-text"
-        >
-          AS:
-        </td>
-        <td
-          align="left"
-          class="user-info-text"
-        >
+        <td align="right" class="user-info-text">AS:</td>
+        <td align="left" class="user-info-text">
           <RouterLink
             :to="Tr.i18nRoute({ name: 'network', params: { id: `AS${userInfo.AS}` } })"
             class="user-info-link"
@@ -101,16 +77,8 @@ onMounted(() => {
         </td>
       </tr>
       <tr>
-        <td
-          align="right"
-          class="user-info-text"
-        >
-          PREFIX:
-        </td>
-        <td
-          align="left"
-          class="user-info-text"
-        >
+        <td align="right" class="user-info-text">PREFIX:</td>
+        <td align="left" class="user-info-text">
           <RouterLink
             :to="
               Tr.i18nRoute({
@@ -125,16 +93,8 @@ onMounted(() => {
         </td>
       </tr>
       <tr>
-        <td
-          align="right"
-          class="user-info-text"
-        >
-          COUNTRY:
-        </td>
-        <td
-          align="left"
-          class="user-info-text"
-        >
+        <td align="right" class="user-info-text">COUNTRY:</td>
+        <td align="left" class="user-info-text">
           <RouterLink
             :to="Tr.i18nRoute({ name: 'country', params: { cc: userInfo.CC } })"
             class="user-info-link"
@@ -144,14 +104,8 @@ onMounted(() => {
         </td>
       </tr>
     </tbody>
-    <div
-      v-else
-      class="loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="1em"
-      />
+    <div v-else class="loading-spinner">
+      <QSpinner color="secondary" size="1em" />
     </div>
   </QMarkupTable>
 </template>
@@ -159,7 +113,7 @@ onMounted(() => {
 <style>
 .user-info-card {
   width: inherit;
-  background-color: rgba(0,0,0,0) !important;
+  background-color: rgba(0, 0, 0, 0) !important;
   border-color: #fff !important;
   color: #fff !important;
 }
diff --git a/src/components/charts/AsInterdependenciesChart.vue b/src/components/charts/AsInterdependenciesChart.vue
index ad014250..e2ff6372 100644
--- a/src/components/charts/AsInterdependenciesChart.vue
+++ b/src/components/charts/AsInterdependenciesChart.vue
@@ -802,26 +802,11 @@ onMounted(() => {
         @update:model-value="toggleIpFamily"
       />
     </div>
-    <ReactiveChart
-      :layout="layout"
-      :traces="traces"
-      :no-data="noData"
-      @plotly-click="plotClick"
-    />
-    <div
-      v-if="loading"
-      class="IHR_loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="15em"
-      />
+    <ReactiveChart :layout="layout" :traces="traces" :no-data="noData" @plotly-click="plotClick" />
+    <div v-if="loading" class="IHR_loading-spinner">
+      <QSpinner color="secondary" size="15em" />
     </div>
-    <QCard
-      v-if="details.tableVisible"
-      class="bg-accent q-ma-xl"
-      dark
-    >
+    <QCard v-if="details.tableVisible" class="bg-accent q-ma-xl" dark>
       <QCardSection class="q-pa-xs">
         <div class="row items-center">
           <div class="col">
@@ -851,27 +836,12 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab
-          name="dependency"
-          :label="$t('charts.asInterdependencies.table.dependencyTitle')"
-        />
-        <QTab
-          name="dependent"
-          :label="$t('charts.asInterdependencies.table.dependentTitle')"
-        />
-        <QTab
-          name="bgpPlay"
-          label="AS Graph"
-        />
-        <QTab
-          name="api"
-          label="API"
-        />
+        <QTab name="dependency" :label="$t('charts.asInterdependencies.table.dependencyTitle')" />
+        <QTab name="dependent" :label="$t('charts.asInterdependencies.table.dependentTitle')" />
+        <QTab name="bgpPlay" label="AS Graph" />
+        <QTab name="api" label="API" />
       </QTabs>
-      <QTabPanels
-        v-model="details.activeTab"
-        animated
-      >
+      <QTabPanels v-model="details.activeTab" animated>
         <QTabPanel name="dependency">
           <AsInterdependenciesTable
             :data="networkDependencyData"
@@ -887,17 +857,10 @@ onMounted(() => {
         </QTabPanel>
         <QTabPanel name="bgpPlay">
           <div class="bgplay-container">
-            <Bgplay
-              :as-number="asNumber"
-              :date-time="details.date"
-            />
+            <Bgplay :as-number="asNumber" :date-time="details.date" />
           </div>
         </QTabPanel>
-        <QTabPanel
-          name="api"
-          class="IHR_api-table q-pa-lg"
-          light
-        >
+        <QTabPanel name="api" class="IHR_api-table q-pa-lg" light>
           <h3>{{ $t('charts.asInterdependencies.table.apiTitle') }}</h3>
           <table>
             <tbody>
@@ -908,11 +871,7 @@ onMounted(() => {
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="tableUrl"
-                    :href="dependencyUrl"
-                    target="_blank"
-                  >{{ dependencyUrl }}</a>
+                  <a id="tableUrl" :href="dependencyUrl" target="_blank">{{ dependencyUrl }}</a>
                 </td>
               </tr>
               <tr>
@@ -922,11 +881,7 @@ onMounted(() => {
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="tableUrl"
-                    :href="dependentUrl"
-                    target="_blank"
-                  >{{ dependentUrl }}</a>
+                  <a id="tableUrl" :href="dependentUrl" target="_blank">{{ dependentUrl }}</a>
                 </td>
               </tr>
             </tbody>
diff --git a/src/components/charts/BGPLineChart.vue b/src/components/charts/BGPLineChart.vue
index 20c5d4d3..b31866d8 100644
--- a/src/components/charts/BGPLineChart.vue
+++ b/src/components/charts/BGPLineChart.vue
@@ -234,26 +234,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    v-if="rawMessages.length === 0"
-    class="noData"
-  >
+  <div v-if="rawMessages.length === 0" class="noData">
     <h1>No data available</h1>
     <h3>Try Changing the Input Parameters or you can wait</h3>
     <h6>Note: Some prefixes become active after some time.</h6>
   </div>
   <div v-else>
-    <QBtn
-      v-if="isLiveMode && isPlaying"
-      color="negative"
-      label="Live"
-    />
-    <QBtn
-      v-else
-      color="grey-9"
-      label="Go to Live"
-      @click="enableLiveMode"
-    />
+    <QBtn v-if="isLiveMode && isPlaying" color="negative" label="Live" />
+    <QBtn v-else color="grey-9" label="Go to Live" @click="enableLiveMode" />
     <ReactiveChart
       :layout="actualChartLayout"
       :traces="actualChartData"
@@ -278,10 +266,14 @@ onMounted(() => {
           @update:model-value="updateSlider"
         />
         <div class="timestampInfo">
-          <span>Min Timestamp:
-            {{ minTimestamp === Infinity ? 'No Data' : timestampToUTC(minTimestamp) }}</span>
-          <span>Max Timestamp:
-            {{ maxTimestamp === -Infinity ? 'No Data' : timestampToUTC(maxTimestamp) }}</span>
+          <span
+            >Min Timestamp:
+            {{ minTimestamp === Infinity ? 'No Data' : timestampToUTC(minTimestamp) }}</span
+          >
+          <span
+            >Max Timestamp:
+            {{ maxTimestamp === -Infinity ? 'No Data' : timestampToUTC(maxTimestamp) }}</span
+          >
         </div>
       </div>
     </div>
diff --git a/src/components/charts/BGPPathsChart.vue b/src/components/charts/BGPPathsChart.vue
index 561d7108..785a37a0 100644
--- a/src/components/charts/BGPPathsChart.vue
+++ b/src/components/charts/BGPPathsChart.vue
@@ -173,27 +173,11 @@ onMounted(() => {
 
 <template>
   <div v-if="props.filteredMessages.length">
-    <QBtn
-      v-if="isLiveMode && isPlaying"
-      color="negative"
-      label="Live"
-    />
-    <QBtn
-      v-else
-      color="grey-9"
-      label="Go to Live"
-      @click="enableLiveMode"
-    />
-    <ReactiveChart
-      :layout="actualChartLayout"
-      :traces="actualChartData"
-      :new-plot="true"
-    />
+    <QBtn v-if="isLiveMode && isPlaying" color="negative" label="Live" />
+    <QBtn v-else color="grey-9" label="Go to Live" @click="enableLiveMode" />
+    <ReactiveChart :layout="actualChartLayout" :traces="actualChartData" :new-plot="true" />
   </div>
-  <div
-    v-else
-    class="noData"
-  >
+  <div v-else class="noData">
     <h1>No data available</h1>
     <h3>Try Changing the Input Parameters or you can wait</h3>
     <h6>Note: Some prefixes become active after some time.</h6>
diff --git a/src/components/charts/CountryHegemonyChart.vue b/src/components/charts/CountryHegemonyChart.vue
index 8ca42b57..a822240a 100644
--- a/src/components/charts/CountryHegemonyChart.vue
+++ b/src/components/charts/CountryHegemonyChart.vue
@@ -269,19 +269,10 @@ onMounted(() => {
 
 <template>
   <div class="IHR_chart">
-    <div
-      v-if="loading"
-      class="IHR_loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="15em"
-      />
+    <div v-if="loading" class="IHR_loading-spinner">
+      <QSpinner color="secondary" size="15em" />
     </div>
-    <QCard
-      v-if="details.tableVisible"
-      flat
-    >
+    <QCard v-if="details.tableVisible" flat>
       <QTabs
         v-model="details.activeTab"
         class="table-card text-grey bg-grey-2"
@@ -290,40 +281,20 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab
-          name="dependency"
-          :label="$t('charts.countryHegemony.table.dependencyTitle')"
-        />
-        <QTab
-          name="api"
-          label="API"
-        />
+        <QTab name="dependency" :label="$t('charts.countryHegemony.table.dependencyTitle')" />
+        <QTab name="api" label="API" />
       </QTabs>
-      <QTabPanels
-        v-model="details.activeTab"
-        animated
-      >
+      <QTabPanels v-model="details.activeTab" animated>
         <QTabPanel name="dependency">
-          <CountryHegemonyTable
-            :data="countryHegemonyData"
-            :loading="loading"
-          />
+          <CountryHegemonyTable :data="countryHegemonyData" :loading="loading" />
         </QTabPanel>
-        <QTabPanel
-          name="api"
-          class="IHR_api-table q-pa-lg"
-          light
-        >
+        <QTabPanel name="api" class="IHR_api-table q-pa-lg" light>
           <h3>{{ $t('charts.countryHegemony.table.apiTitle') }}</h3>
           <table>
             <tbody>
               <tr>
                 <td>
-                  <a
-                    id="tableUrl"
-                    :href="hegemonyUrl"
-                    target="_blank"
-                  >{{ hegemonyUrl }}</a>
+                  <a id="tableUrl" :href="hegemonyUrl" target="_blank">{{ hegemonyUrl }}</a>
                 </td>
               </tr>
             </tbody>
diff --git a/src/components/charts/DelayAndForwardingChart.vue b/src/components/charts/DelayAndForwardingChart.vue
index 763bb759..d07b312d 100644
--- a/src/components/charts/DelayAndForwardingChart.vue
+++ b/src/components/charts/DelayAndForwardingChart.vue
@@ -269,11 +269,7 @@ onMounted(() => {
       @loaded="loading"
       @plotly-click="showTable"
     />
-    <QCard
-      v-if="details.tableVisible"
-      class="bg-accent q-ma-xl"
-      dark
-    >
+    <QCard v-if="details.tableVisible" class="bg-accent q-ma-xl" dark>
       <QCardSection class="q-pa-xs">
         <div class="row items-center">
           <div class="col">
@@ -303,32 +299,14 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <q-tab
-          name="delay"
-          :label="$t('charts.delayAndForwarding.tables.delay.title')"
-        />
-        <q-tab
-          name="forwarding"
-          :label="$t('charts.delayAndForwarding.tables.forwarding.title')"
-        />
-        <q-tab
-          name="api"
-          label="API"
-        />
+        <q-tab name="delay" :label="$t('charts.delayAndForwarding.tables.delay.title')" />
+        <q-tab name="forwarding" :label="$t('charts.delayAndForwarding.tables.forwarding.title')" />
+        <q-tab name="api" label="API" />
       </QTabs>
-      <div
-        v-if="loading"
-        class="IHR_loading-spinner"
-      >
-        <QSpinner
-          color="secondary"
-          size="15em"
-        />
+      <div v-if="loading" class="IHR_loading-spinner">
+        <QSpinner color="secondary" size="15em" />
       </div>
-      <QTabPanels
-        v-model="details.activeTab"
-        animated
-      >
+      <QTabPanels v-model="details.activeTab" animated>
         <QTabPanel name="delay">
           <DelayAlarmsTable
             :start-time="details.delayData.startTime"
@@ -345,10 +323,7 @@ onMounted(() => {
             @prefix-details="emits('prefix-details', $event)"
           />
         </QTabPanel>
-        <QTabPanel
-          name="api"
-          class="IHR_api-table"
-        >
+        <QTabPanel name="api" class="IHR_api-table">
           <h3>{{ $t('charts.delayAndForwarding.apiTitle') }}</h3>
           <table>
             <tbody>
@@ -359,11 +334,7 @@ onMounted(() => {
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="delay"
-                    :href="delayUrl"
-                    target="_blank"
-                  >{{ delayUrl }}</a>
+                  <a id="delay" :href="delayUrl" target="_blank">{{ delayUrl }}</a>
                 </td>
               </tr>
               <tr>
@@ -373,11 +344,7 @@ onMounted(() => {
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="forwarding"
-                    :href="forwardingUrl"
-                    target="_blank"
-                  >{{ forwardingUrl }}</a>
+                  <a id="forwarding" :href="forwardingUrl" target="_blank">{{ forwardingUrl }}</a>
                 </td>
               </tr>
               <tr>
@@ -387,30 +354,19 @@ onMounted(() => {
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="delayAlarms"
-                    :href="delayAlarmsUrl"
-                    target="_blank"
-                  >{{
+                  <a id="delayAlarms" :href="delayAlarmsUrl" target="_blank">{{
                     delayAlarmsUrl
                   }}</a>
                 </td>
               </tr>
               <tr>
                 <td>
-                  <p
-                    class="text-subtitle1"
-                    name="forwardingAlarms"
-                  >
+                  <p class="text-subtitle1" name="forwardingAlarms">
                     {{ $t('charts.delayAndForwarding.tables.forwarding.title') }}
                   </p>
                 </td>
                 <td>
-                  <a
-                    id="forwardingAlarms"
-                    :href="forwardingAlarmsUrl"
-                    target="_blank"
-                  >{{
+                  <a id="forwardingAlarms" :href="forwardingAlarmsUrl" target="_blank">{{
                     forwardingAlarmsUrl
                   }}</a>
                 </td>
diff --git a/src/components/charts/DiscoChart.vue b/src/components/charts/DiscoChart.vue
index 153ba064..81b15521 100644
--- a/src/components/charts/DiscoChart.vue
+++ b/src/components/charts/DiscoChart.vue
@@ -138,11 +138,7 @@ onMounted(() => {
 <template>
   <div class="IHR_chart">
     <div>
-      <DiscoMap
-        ref="ihrChartMap"
-        :events="mapData"
-        :loading="loading"
-      />
+      <DiscoMap ref="ihrChartMap" :events="mapData" :loading="loading" />
       <DiscoAlarmsTable
         :start-time="startTime"
         :stop-time="endTime"
diff --git a/src/components/charts/IodaChart.vue b/src/components/charts/IodaChart.vue
index f4d91a93..9c949dcc 100644
--- a/src/components/charts/IodaChart.vue
+++ b/src/components/charts/IodaChart.vue
@@ -70,19 +70,9 @@ onMounted(() => {
 
 <template>
   <div>
-    <ReactiveChart
-      :layout="layout"
-      :traces="traces"
-      :no-data="noData"
-    />
-    <div
-      v-if="loading"
-      class="IHR_loading-spinner"
-    >
-      <q-spinner
-        color="secondary"
-        size="15em"
-      />
+    <ReactiveChart :layout="layout" :traces="traces" :no-data="noData" />
+    <div v-if="loading" class="IHR_loading-spinner">
+      <q-spinner color="secondary" size="15em" />
     </div>
   </div>
 </template>
diff --git a/src/components/charts/NetworkDelayChart.vue b/src/components/charts/NetworkDelayChart.vue
index e108617f..3eee926e 100644
--- a/src/components/charts/NetworkDelayChart.vue
+++ b/src/components/charts/NetworkDelayChart.vue
@@ -388,10 +388,7 @@ onMounted(() => {
 
 <template>
   <div class="IHR_chart">
-    <div
-      v-if="searchBar"
-      class="justify-center"
-    >
+    <div v-if="searchBar" class="justify-center">
       <div v-if="isCovid">
         <div class="q-pa-sm">
           <LocationSearchBar
@@ -413,19 +410,8 @@ onMounted(() => {
         </div>
         <div style="display: block">
           <div class="col-3 q-pa-sm">
-            <QBtn
-              color="secondary"
-              class="q-ml-sm"
-              @click="apiCall"
-            >
-              Add
-            </QBtn>
-            <QBtn
-              class="q-ml-sm"
-              @click="clearGraph"
-            >
-              Clear all
-            </QBtn>
+            <QBtn color="secondary" class="q-ml-sm" @click="apiCall"> Add </QBtn>
+            <QBtn class="q-ml-sm" @click="clearGraph"> Clear all </QBtn>
           </div>
         </div>
       </div>
@@ -450,19 +436,8 @@ onMounted(() => {
             />
           </div>
           <div class="col-3 q-pa-sm">
-            <QBtn
-              color="secondary"
-              class="btn"
-              @click="apiCall"
-            >
-              Add
-            </QBtn>
-            <QBtn
-              class="btn"
-              @click="clearGraph"
-            >
-              Clear all
-            </QBtn>
+            <QBtn color="secondary" class="btn" @click="apiCall"> Add </QBtn>
+            <QBtn class="btn" @click="clearGraph"> Clear all </QBtn>
           </div>
         </div>
       </div>
@@ -478,21 +453,11 @@ onMounted(() => {
         />
       </div>
     </div>
-    <div
-      v-if="loading"
-      class="IHR_loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="15em"
-      />
+    <div v-if="loading" class="IHR_loading-spinner">
+      <QSpinner color="secondary" size="15em" />
     </div>
     <div>
-      <QCard
-        v-if="details.tableVisible"
-        class="bg-accent q-ma-xl"
-        dark
-      >
+      <QCard v-if="details.tableVisible" class="bg-accent q-ma-xl" dark>
         <QCardSection class="q-pa-xs">
           <div class="row items-center">
             <div class="col">
@@ -522,19 +487,10 @@ onMounted(() => {
           align="justify"
           narrow-indicator
         >
-          <QTab
-            name="delay"
-            :label="$t('charts.networkDelay.table.title')"
-          />
-          <QTab
-            name="api"
-            label="API"
-          />
+          <QTab name="delay" :label="$t('charts.networkDelay.table.title')" />
+          <QTab name="api" label="API" />
         </QTabs>
-        <QTabPanels
-          v-model="details.activeTab"
-          animated
-        >
+        <QTabPanels v-model="details.activeTab" animated>
           <QTabPanel name="delay">
             <NetworkDelayTable
               :start-time="startTime"
@@ -545,10 +501,7 @@ onMounted(() => {
               @prefix-details="emits('prefix-details', $event)"
             />
           </QTabPanel>
-          <QTabPanel
-            name="api"
-            class="IHR_api-table"
-          >
+          <QTabPanel name="api" class="IHR_api-table">
             <table>
               <tbody>
                 <tr>
@@ -556,11 +509,7 @@ onMounted(() => {
                     <label for="delay">{{ $t('charts.delayAndForwarding.yaxis') }}</label>
                   </td>
                   <td>
-                    <a
-                      id="delay"
-                      :href="delayUrl"
-                      target="_blank"
-                    >{{ delayUrl }}</a>
+                    <a id="delay" :href="delayUrl" target="_blank">{{ delayUrl }}</a>
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/charts/NetworkTopologyChart.vue b/src/components/charts/NetworkTopologyChart.vue
index c04769b3..2bf35753 100644
--- a/src/components/charts/NetworkTopologyChart.vue
+++ b/src/components/charts/NetworkTopologyChart.vue
@@ -452,17 +452,10 @@ defineExpose({ fitToScreen })
 </script>
 
 <template>
-  <QCard
-    style="margin-bottom: 15px"
-    :flat="props.isComponent"
-    :bordered="!props.isComponent"
-  >
+  <QCard style="margin-bottom: 15px" :flat="props.isComponent" :bordered="!props.isComponent">
     <QCardSection v-if="!props.isComponent">
       <div class="flex justify-between pb-0">
-        <div
-          class="flex justify-center"
-          style="flex-grow: 1"
-        >
+        <div class="flex justify-center" style="flex-grow: 1">
           <QInput
             v-model="searchInput"
             style="max-width: 145px"
@@ -478,44 +471,17 @@ defineExpose({ fitToScreen })
             label="IP"
             :dense="true"
           />
-          <QBtn
-            style="margin-left: 15px"
-            color="secondary"
-            label="Search"
-            @click="search"
-          />
+          <QBtn style="margin-left: 15px" color="secondary" label="Search" @click="search" />
         </div>
-        <QBtn
-          color="negative"
-          label="Delete"
-          @click="$emit('deleteChart', props.id)"
-        />
+        <QBtn color="negative" label="Delete" @click="$emit('deleteChart', props.id)" />
       </div>
     </QCardSection>
 
-    <QCardSection
-      v-if="!loading && Object.keys(allNodes).length > 0"
-      class="graphContainer"
-    >
-      <QBtnGroup
-        outline
-        class="controlPanel"
-      >
-        <QBtn
-          outline
-          icon="zoom_in"
-          @click="graph?.zoomIn()"
-        />
-        <QBtn
-          outline
-          icon="zoom_out"
-          @click="graph?.zoomOut()"
-        />
-        <QBtn
-          outline
-          icon="fit_screen"
-          @click="fitToScreen()"
-        />
+    <QCardSection v-if="!loading && Object.keys(allNodes).length > 0" class="graphContainer">
+      <QBtnGroup outline class="controlPanel">
+        <QBtn outline icon="zoom_in" @click="graph?.zoomIn()" />
+        <QBtn outline icon="zoom_out" @click="graph?.zoomOut()" />
+        <QBtn outline icon="fit_screen" @click="fitToScreen()" />
       </QBtnGroup>
 
       <VNetworkGraph
@@ -528,20 +494,13 @@ defineExpose({ fitToScreen })
         :event-handlers="eventHandlers"
       />
 
-      <div
-        v-if="props.showLegend"
-        class="legend"
-      >
+      <div v-if="props.showLegend" class="legend">
         <div class="row items-center">
           <div class="col">
-            <div class="hegemonyLabel">
-              Hegemony
-            </div>
+            <div class="hegemonyLabel">Hegemony</div>
           </div>
           <div class="col">
-            <div class="scaleLabel">
-              100%
-            </div>
+            <div class="scaleLabel">100%</div>
             <div class="scale">
               <div
                 v-for="percentage in [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0]"
@@ -550,9 +509,7 @@ defineExpose({ fitToScreen })
                 :style="{ backgroundColor: calculateNodeColor(percentage) }"
               />
             </div>
-            <div class="scaleLabel">
-              0%
-            </div>
+            <div class="scaleLabel">0%</div>
           </div>
         </div>
       </div>
@@ -573,19 +530,9 @@ defineExpose({ fitToScreen })
       </div>
     </QCardSection>
 
-    <QSpinner
-      v-if="loading"
-      color="secondary"
-      size="5em"
-      class="spinner"
-    />
-
-    <h5
-      v-if="!loading && Object.keys(allNodes).length == 0"
-      class="text-center"
-    >
-      No data found
-    </h5>
+    <QSpinner v-if="loading" color="secondary" size="5em" class="spinner" />
+
+    <h5 v-if="!loading && Object.keys(allNodes).length == 0" class="text-center">No data found</h5>
   </QCard>
 </template>
 
diff --git a/src/components/charts/PrefixHegemonyChart.vue b/src/components/charts/PrefixHegemonyChart.vue
index 1537da47..4babcf67 100644
--- a/src/components/charts/PrefixHegemonyChart.vue
+++ b/src/components/charts/PrefixHegemonyChart.vue
@@ -495,17 +495,11 @@ watch(
   <div class="IHR_chart">
     <div class="row justify-center">
       <div class="col-xs-10 col-sm-4 col-lg-2">
-        <QSelect
-          v-model="selection"
-          :options="selectionOptions"
-        />
+        <QSelect v-model="selection" :options="selectionOptions" />
       </div>
     </div>
-    <br>
-    <QCard
-      v-if="details.tableVisible"
-      :flat="route.name == 'rov' ? false : true"
-    >
+    <br />
+    <QCard v-if="details.tableVisible" :flat="route.name == 'rov' ? false : true">
       <QTabs
         v-model="details.activeTab"
         class="table-card text-grey bg-grey-2"
@@ -514,10 +508,7 @@ watch(
         align="justify"
         narrow-indicator
       >
-        <QTab
-          name="routes"
-          :label="$t('charts.prefixHegemony.table.routesTitle')"
-        />
+        <QTab name="routes" :label="$t('charts.prefixHegemony.table.routesTitle')" />
         <QTab
           name="origins"
           :disable="statsDisable"
@@ -528,15 +519,9 @@ watch(
           :disable="statsDisable"
           :label="$t('charts.prefixHegemony.table.transitsTitle')"
         />
-        <QTab
-          name="api"
-          label="API"
-        />
+        <QTab name="api" label="API" />
       </QTabs>
-      <QTabPanels
-        v-model="details.activeTab"
-        animated
-      >
+      <QTabPanels v-model="details.activeTab" animated>
         <QTabPanel name="routes">
           <PrefixHegemonyTable
             :data="prefixHegemonyData"
@@ -558,21 +543,13 @@ watch(
             :column-name="selection.label"
           />
         </QTabPanel>
-        <QTabPanel
-          name="api"
-          class="IHR_api-table q-pa-lg"
-          light
-        >
+        <QTabPanel name="api" class="IHR_api-table q-pa-lg" light>
           <h3>{{ $t('charts.prefixHegemony.table.apiTitle') }}</h3>
           <table>
             <tbody>
               <tr>
                 <td>
-                  <a
-                    id="tableUrl"
-                    :href="hegemonyUrl"
-                    target="_blank"
-                  >{{ hegemonyUrl }}</a>
+                  <a id="tableUrl" :href="hegemonyUrl" target="_blank">{{ hegemonyUrl }}</a>
                 </td>
               </tr>
             </tbody>
diff --git a/src/components/charts/ReactiveChart.vue b/src/components/charts/ReactiveChart.vue
index 2b7177be..61c14da3 100644
--- a/src/components/charts/ReactiveChart.vue
+++ b/src/components/charts/ReactiveChart.vue
@@ -197,14 +197,8 @@ watch(
       {{ chartTitle }}
     </h3>
     <div ref="myId" />
-    <div
-      v-if="noData"
-      class="IHR_no-data"
-    >
-      <div
-        class="bg-white"
-        style="text-align: center"
-      >
+    <div v-if="noData" class="IHR_no-data">
+      <div class="bg-white" style="text-align: center">
         {{ noData }}
       </div>
     </div>
@@ -218,7 +212,9 @@ watch(
   left: 0;
 }
 .IHR_no-data > div:first-child {
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  box-shadow:
+    0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
   padding: 1.25rem;
   position: relative;
   font-weight: 500;
@@ -228,5 +224,4 @@ watch(
 .IHR_no-data > div:first-child:first-letter {
   text-transform: uppercase;
 }
-
 </style>
diff --git a/src/components/charts/RirCountrySunburstChart.vue b/src/components/charts/RirCountrySunburstChart.vue
index 25251d69..3f13a7df 100644
--- a/src/components/charts/RirCountrySunburstChart.vue
+++ b/src/components/charts/RirCountrySunburstChart.vue
@@ -63,11 +63,6 @@ onMounted(() => {
 
 <template>
   <div>
-    <ReactiveChart
-      :layout="layout"
-      :traces="traces"
-      :chart-title="chartTitle"
-      :no-data="noData"
-    />
+    <ReactiveChart :layout="layout" :traces="traces" :chart-title="chartTitle" :no-data="noData" />
   </div>
 </template>
diff --git a/src/components/charts/TracerouteChart.vue b/src/components/charts/TracerouteChart.vue
index 5e02141c..1f8c73c0 100644
--- a/src/components/charts/TracerouteChart.vue
+++ b/src/components/charts/TracerouteChart.vue
@@ -2,10 +2,14 @@
 import { QBtn, QIcon, QInput, QSpinner, QRadio } from 'quasar'
 import ReactiveChart from './ReactiveChart.vue'
 import { ref, onMounted, watch, computed, nextTick } from 'vue'
-import { VNetworkGraph } from "v-network-graph"
-import * as vNG from "v-network-graph"
-import RipeApi from "../../plugins/RipeApi"
-import { convertUnixTimestamp, isPrivateIP, calculateMedian } from "../../plugins/tracerouteFunctions"
+import { VNetworkGraph } from 'v-network-graph'
+import * as vNG from 'v-network-graph'
+import RipeApi from '../../plugins/RipeApi'
+import {
+  convertUnixTimestamp,
+  isPrivateIP,
+  calculateMedian
+} from '../../plugins/tracerouteFunctions'
 
 const props = defineProps({
   measurementID: {
@@ -49,17 +53,17 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(["updateDisplayedRttValues"])
+const emit = defineEmits(['updateDisplayedRttValues'])
 
 const tooltipData = ref({})
 const zoomLevel = ref(0)
 const selectedNode = ref(null)
-const displayMode = ref("normal")
-const targetNodeId = ref("")
+const displayMode = ref('normal')
+const targetNodeId = ref('')
 const graph = ref()
 const tooltip = ref()
 const tooltipOpacity = ref(0)
-const tooltipPos = ref({ left: "0px", top: "0px" })
+const tooltipPos = ref({ left: '0px', top: '0px' })
 const highlightedEdges = ref({})
 const asnColors = ref({})
 const showAsnOverlay = ref(true)
@@ -72,46 +76,47 @@ const configs = computed(() => {
       normal: {
         radius: props.nodeSize / 2,
         color: (node) => {
-          if (displayMode.value === "rtt") {
+          if (displayMode.value === 'rtt') {
             if (node.hops && node.hops.length > 0) {
-              const medianRtt = calculateMedian(node.hops.map(hop => hop.rtt))
+              const medianRtt = calculateMedian(node.hops.map((hop) => hop.rtt))
               return rttColor(medianRtt)
             } else {
-              return "black"
+              return 'black'
             }
           }
-          if (displayMode.value === "asn") {
-            const asn = props.ipToAsnMap[node.label] || "unknown"
-            return asnColors.value[asn] || "black"
+          if (displayMode.value === 'asn') {
+            const asn = props.ipToAsnMap[node.label] || 'unknown'
+            return asnColors.value[asn] || 'black'
           }
-          if (node.isProbe) return "green"
-          if (node.isNonResponsive) return "gray"
-          if (node.isLastHop) return "red"
-          if (isPrivateIP(node.label)) return "purple"
-          return "blue"
+          if (node.isProbe) return 'green'
+          if (node.isNonResponsive) return 'gray'
+          if (node.isLastHop) return 'red'
+          if (isPrivateIP(node.label)) return 'purple'
+          return 'blue'
         }
-      },
+      }
     },
     edge: {
       normal: {
-        color: (edge) => highlightedEdges.value[`${edge.source}-${edge.target}`] ? "orange" : "#aaa",
-        width: (edge) => highlightedEdges.value[`${edge.source}-${edge.target}`] ? 3 : 1,
+        color: (edge) =>
+          highlightedEdges.value[`${edge.source}-${edge.target}`] ? 'orange' : '#aaa',
+        width: (edge) => (highlightedEdges.value[`${edge.source}-${edge.target}`] ? 3 : 1),
         margin: 4,
-        type: "curve",
-        gap: 40,
-      },
-    },
+        type: 'curve',
+        gap: 40
+      }
+    }
   })
 })
 
 const eventHandlers = {
-  "node:pointerover": ({ node }) => {},
-  "node:pointerout": () => {},
-  "view:click": () => {
+  'node:pointerover': ({ node }) => {},
+  'node:pointerout': () => {},
+  'view:click': () => {
     clearHighlight()
     tooltipOpacity.value = 0
   },
-  "node:pointerdown": async ({ node }) => {
+  'node:pointerdown': async ({ node }) => {
     clearHighlight()
     highlightPath(node)
 
@@ -122,38 +127,41 @@ const eventHandlers = {
 
     const nodeInfo = props.nodes[node]
     let nodeMetaData
-    if (!node.includes("*")) {
+    if (!node.includes('*')) {
       nodeMetaData = (await RipeApi.prefixOverview(node)).data
-      if (nodeMetaData.error === "LOCAL_STORAGE_FULL") {
+      if (nodeMetaData.error === 'LOCAL_STORAGE_FULL') {
         return handleLocalStorageFullError()
       }
     }
-    const rttValues = nodeInfo.hops?.map(hop => hop.rtt)
-    const sizeValues = nodeInfo.hops?.map(hop => hop.size)
-    const ttlValues = nodeInfo.hops?.map(hop => hop.ttl)
+    const rttValues = nodeInfo.hops?.map((hop) => hop.rtt)
+    const sizeValues = nodeInfo.hops?.map((hop) => hop.size)
+    const ttlValues = nodeInfo.hops?.map((hop) => hop.ttl)
 
-    let nodeType = "Normal"
-    let color = "blue"
+    let nodeType = 'Normal'
+    let color = 'blue'
     if (nodeInfo.isProbe) {
-      nodeType = "Probe"
-      color = "green"
+      nodeType = 'Probe'
+      color = 'green'
     }
     if (nodeInfo.isNonResponsive) {
-      nodeType = "Non Responsive"
-      color = "gray"
+      nodeType = 'Non Responsive'
+      color = 'gray'
     }
     if (nodeInfo.isLastHop) {
-      nodeType = "Destination"
-      color = "red"
+      nodeType = 'Destination'
+      color = 'red'
     }
     if (nodeInfo.isPrivate) {
-      nodeType = "Private"
-      color = "purple"
+      nodeType = 'Private'
+      color = 'purple'
     }
 
     let probeDetails
-    Object.keys(props.probeDetailsMap).forEach(probeId => {
-      if (props.probeDetailsMap[probeId].address_v4 === node || props.probeDetailsMap[probeId].address_v6 === node) {
+    Object.keys(props.probeDetailsMap).forEach((probeId) => {
+      if (
+        props.probeDetailsMap[probeId].address_v4 === node ||
+        props.probeDetailsMap[probeId].address_v6 === node
+      ) {
         probeDetails = props.probeDetailsMap[probeId]
       }
     })
@@ -166,7 +174,7 @@ const eventHandlers = {
       type: nodeType,
       color: color,
       ...nodeMetaData,
-      ...probeDetails,
+      ...probeDetails
     }
     tooltipOpacity.value = 1
 
@@ -177,31 +185,31 @@ const eventHandlers = {
       const domPoint = graph.value.translateFromSvgToDomCoordinates(targetNodePos.value)
       tooltipPos.value = {
         left: `${domPoint.x - tooltip.value.offsetWidth / 2}px`,
-        top: `${domPoint.y - props.nodeSize - tooltipHeight - 10}px`,
+        top: `${domPoint.y - props.nodeSize - tooltipHeight - 10}px`
       }
     }
-  },
+  }
 }
 
 const getRandomColor = () => {
-    const letters = "0123456789ABCDEF"
-    let color = "#"
-    for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)]
-    }
-    return color
+  const letters = '0123456789ABCDEF'
+  let color = '#'
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)]
+  }
+  return color
 }
 
 const assignAsnColors = () => {
-    const colors = {}
-    props.asnList.forEach(asn => {
-        colors[asn] = getRandomColor()
-    })
-    asnColors.value = colors
+  const colors = {}
+  props.asnList.forEach((asn) => {
+    colors[asn] = getRandomColor()
+  })
+  asnColors.value = colors
 }
 
 const rttColor = (rtt) => {
-  if (rtt === null || rtt === undefined) return "black"
+  if (rtt === null || rtt === undefined) return 'black'
   const normalized = Math.min(Math.max(rtt / props.maxDisplayedRtt, 0), 1)
   const green = Math.floor(255 * (1 - normalized))
   return `rgb(150, ${green}, 60)`
@@ -222,36 +230,40 @@ const highlightPath = (startNodeId) => {
     visited.add(currentNodeId)
     currentPath.push(currentNodeId)
 
-    const outgoingEdges = Object.values(props.edges).filter(edge => edge.source === currentNodeId)
+    const outgoingEdges = Object.values(props.edges).filter((edge) => edge.source === currentNodeId)
     if (outgoingEdges.length === 0) {
-      path.push(...currentPath.map((node, index) => {
-        if (index < currentPath.length - 1) {
-          return `${node}-${currentPath[index + 1]}`
-        }
-      }).filter(edge => edge))
+      path.push(
+        ...currentPath
+          .map((node, index) => {
+            if (index < currentPath.length - 1) {
+              return `${node}-${currentPath[index + 1]}`
+            }
+          })
+          .filter((edge) => edge)
+      )
       break
     }
 
-    outgoingEdges.forEach(edge => {
+    outgoingEdges.forEach((edge) => {
       if (!visited.has(edge.target)) {
         queue.push([edge.target, [...currentPath]])
       }
     })
   }
 
-  highlightedEdges.value = Object.fromEntries(path.map(edgeId => [edgeId, true]))
+  highlightedEdges.value = Object.fromEntries(path.map((edgeId) => [edgeId, true]))
 }
 
 const filteredAsnList = computed(() => {
-  const visibleAsns = new Set();
-  Object.values(props.nodes).forEach(node => {
-    const asn = props.ipToAsnMap[node.label];
+  const visibleAsns = new Set()
+  Object.values(props.nodes).forEach((node) => {
+    const asn = props.ipToAsnMap[node.label]
     if (asn) {
-      visibleAsns.add(asn);
+      visibleAsns.add(asn)
     }
-  });
-  return Array.from(visibleAsns);
-});
+  })
+  return Array.from(visibleAsns)
+})
 
 const clearHighlight = () => {
   highlightedEdges.value = {}
@@ -266,55 +278,55 @@ const zoomOut = () => {
 }
 
 const toggleFullScreen = () => {
-  const graphContainer = document.querySelector(".graph-container")
+  const graphContainer = document.querySelector('.graph-container')
   if (!document.fullscreenElement) {
     graphContainer.requestFullscreen().then(() => {
-      graphContainer.style.background = "white"
+      graphContainer.style.background = 'white'
     })
   } else {
     document.exitFullscreen().then(() => {
-      graphContainer.style.background = "white"
+      graphContainer.style.background = 'white'
     })
   }
 }
 
 const targetNodePos = computed(() => {
-    const nodePos = props.layoutNodes.nodes[targetNodeId.value]
-    return nodePos || { x: 0, y: 0 }
+  const nodePos = props.layoutNodes.nodes[targetNodeId.value]
+  return nodePos || { x: 0, y: 0 }
 })
 
 watch(
   () => [targetNodePos.value, tooltipOpacity.value],
   () => {
-      if (!graph.value || !tooltip.value) return
-      const domPoint = graph.value.translateFromSvgToDomCoordinates(targetNodePos.value)
-      tooltipPos.value = {
-          left: domPoint.x - tooltip.value.offsetWidth / 2 + "px",
-          top: domPoint.y - props.nodeSize - tooltip.value.offsetHeight - 10 + "px",
-      }
+    if (!graph.value || !tooltip.value) return
+    const domPoint = graph.value.translateFromSvgToDomCoordinates(targetNodePos.value)
+    tooltipPos.value = {
+      left: domPoint.x - tooltip.value.offsetWidth / 2 + 'px',
+      top: domPoint.y - props.nodeSize - tooltip.value.offsetHeight - 10 + 'px'
+    }
   },
   { deep: true }
 )
 
-watch(() => props.measurementID, () => {
-  selectedNode.value = null
-  displayMode.value = "normal"
-  highlightedEdges.value = {}
-  asnColors.value = {}
-  showAsnOverlay.value = true
-})
+watch(
+  () => props.measurementID,
+  () => {
+    selectedNode.value = null
+    displayMode.value = 'normal'
+    highlightedEdges.value = {}
+    asnColors.value = {}
+    showAsnOverlay.value = true
+  }
+)
 
 watch(displayMode, () => {
-  emit("updateDisplayedRttValues")
+  emit('updateDisplayedRttValues')
 })
 </script>
 
 <template>
   <div class="graph-container">
-    <QSpinner
-      v-if="isLoading"
-      color="primary"
-    />
+    <QSpinner v-if="isLoading" color="primary" />
     <VNetworkGraph
       v-if="Object.keys(nodes).length > 0 && selectedProbes.length > 0 && !isLoading"
       ref="graph"
@@ -325,12 +337,7 @@ watch(displayMode, () => {
       :configs="configs"
       :event-handlers="eventHandlers"
     />
-    <div
-      v-else-if="!isLoading"
-      class="placeholder-message"
-    >
-      No graph data available.
-    </div>
+    <div v-else-if="!isLoading" class="placeholder-message">No graph data available.</div>
     <div
       v-if="selectedNode"
       ref="tooltip"
@@ -338,35 +345,33 @@ watch(displayMode, () => {
       :style="{ ...tooltipPos, opacity: tooltipOpacity }"
     >
       <div style="display: flex; align-items: center">
-        <span
-          class="nodeTypeDot"
-          :style="{ backgroundColor: tooltipData.color }"
-        />{{ tooltipData.type }}
+        <span class="nodeTypeDot" :style="{ backgroundColor: tooltipData.color }" />{{
+          tooltipData.type
+        }}
       </div>
-      <div style="padding-bottom: 5px;">
+      <div style="padding-bottom: 5px">
         <template v-if="tooltipData?.data?.asns[0]?.asn">
-          <div style="display: flex; align-items: center;">
-            <span 
-              class="asnDot" 
+          <div style="display: flex; align-items: center">
+            <span
+              class="asnDot"
               :style="{ backgroundColor: asnColors[tooltipData.data.asns[0].asn] || 'gray' }"
             />
-            <a
-              :href="`/ihr/en/network/AS${tooltipData.data.asns[0].asn}`"
-              target="_blank"
-            >
+            <a :href="`/ihr/en/network/AS${tooltipData.data.asns[0].asn}`" target="_blank">
               AS{{ tooltipData.data.asns[0].asn }} ({{ tooltipData.data.asns[0].holder }})
             </a>
           </div>
         </template>
-        <template v-else>
-          ASN not available
-        </template>
+        <template v-else> ASN not available </template>
       </div>
       <div><strong>IP:</strong> {{ tooltipData.label }}</div>
-      <div><strong>Announced:</strong> {{ tooltipData?.data?.announced ?? "Not available" }}</div>
-      <div><strong>Prefix:</strong> {{ tooltipData?.data?.block?.resource ?? "Not available" }}</div>
-      <div><strong>Description:</strong> {{ tooltipData?.data?.block?.desc ?? "Not available" }}</div>
-      <div><strong>Name:</strong> {{ tooltipData?.data?.block?.name ?? "Not available" }}</div>
+      <div><strong>Announced:</strong> {{ tooltipData?.data?.announced ?? 'Not available' }}</div>
+      <div>
+        <strong>Prefix:</strong> {{ tooltipData?.data?.block?.resource ?? 'Not available' }}
+      </div>
+      <div>
+        <strong>Description:</strong> {{ tooltipData?.data?.block?.desc ?? 'Not available' }}
+      </div>
+      <div><strong>Name:</strong> {{ tooltipData?.data?.block?.name ?? 'Not available' }}</div>
       <div v-if="tooltipData.address_v4">
         <strong>IPv4 Address:</strong> {{ tooltipData.address_v4 }}
       </div>
@@ -376,18 +381,18 @@ watch(displayMode, () => {
       <div v-if="tooltipData.country_code">
         <strong>Country Code:</strong> {{ tooltipData.country_code }}
       </div>
-      <div v-if="tooltipData.asn_v4">
-        <strong>ASN4:</strong> {{ tooltipData.asn_v4 }}
-      </div>
-      <div v-if="tooltipData.asn_v6">
-        <strong>ASN6:</strong> {{ tooltipData.asn_v6 }}
+      <div v-if="tooltipData.asn_v4"><strong>ASN4:</strong> {{ tooltipData.asn_v4 }}</div>
+      <div v-if="tooltipData.asn_v6"><strong>ASN6:</strong> {{ tooltipData.asn_v6 }}</div>
+      <div>
+        <strong>Median RTT:</strong>
+        {{ tooltipData.medianRtt ? tooltipData.medianRtt + 'ms' : 'Not available' }}
       </div>
-      <div><strong>Median RTT:</strong> {{ tooltipData.medianRtt ? tooltipData.medianRtt + "ms" : "Not available" }}</div>
-      <div><strong>Median Size:</strong> {{ tooltipData.medianSize ? tooltipData.medianSize + " bytes" : "Not available" }}</div>
-      <div><strong>Median TTL:</strong> {{ tooltipData.medianTtl ?? "Not available" }}</div>
-      <div v-if="tooltipData.id">
-        <strong>Probe ID:</strong> {{ tooltipData.id }}
+      <div>
+        <strong>Median Size:</strong>
+        {{ tooltipData.medianSize ? tooltipData.medianSize + ' bytes' : 'Not available' }}
       </div>
+      <div><strong>Median TTL:</strong> {{ tooltipData.medianTtl ?? 'Not available' }}</div>
+      <div v-if="tooltipData.id"><strong>Probe ID:</strong> {{ tooltipData.id }}</div>
       <div v-if="tooltipData.description">
         <strong>Probe Description:</strong> {{ tooltipData.description }}
       </div>
@@ -398,10 +403,7 @@ watch(displayMode, () => {
         <strong>Status Since:</strong> {{ new Date(tooltipData.status.since).toLocaleString() }}
       </div>
     </div>
-    <div
-      v-if="Object.keys(nodes).length > 0"
-      class="measurement-info-overlay"
-    >
+    <div v-if="Object.keys(nodes).length > 0" class="measurement-info-overlay">
       <div><strong>Description:</strong> {{ metaData.description }}</div>
       <div><strong>Target:</strong> {{ metaData.target }}</div>
       <div><strong>Target IP:</strong> {{ metaData.target_ip }}</div>
@@ -409,76 +411,43 @@ watch(displayMode, () => {
       <div><strong>Stop Time:</strong> {{ convertUnixTimestamp(metaData.stop_time) }}</div>
       <div><strong>Status:</strong> {{ metaData.status.name }}</div>
     </div>
-    <div
-      v-if="Object.keys(nodes).length > 0"
-      class="mode-toggle-overlay"
-    >
-      <QRadio
-        v-model="displayMode"
-        val="normal"
-        label="Normal Mode"
-      />
-      <QRadio
-        v-model="displayMode"
-        val="rtt"
-        label="RTT Mode"
-      />
-      <QRadio
-        v-model="displayMode"
-        val="asn"
-        label="ASN Mode"
-      />
-      <QBtn
-        v-if="displayMode === 'asn'"
-        flat
-        dense
-        @click="showAsnOverlay = !showAsnOverlay"
-      >
+    <div v-if="Object.keys(nodes).length > 0" class="mode-toggle-overlay">
+      <QRadio v-model="displayMode" val="normal" label="Normal Mode" />
+      <QRadio v-model="displayMode" val="rtt" label="RTT Mode" />
+      <QRadio v-model="displayMode" val="asn" label="ASN Mode" />
+      <QBtn v-if="displayMode === 'asn'" flat dense @click="showAsnOverlay = !showAsnOverlay">
         ASN Overlay
       </QBtn>
     </div>
-    <div
-      v-if="displayMode === 'rtt' && Object.keys(nodes).length > 0"
-      class="rtt-info-overlay"
-    >
+    <div v-if="displayMode === 'rtt' && Object.keys(nodes).length > 0" class="rtt-info-overlay">
       <div>
-        <span
-          class="rtt-dot"
-          :style="{ backgroundColor: rttColor(minDisplayedRtt) }"
-        /> <strong>Min RTT: </strong>{{ minDisplayedRtt ? minDisplayedRtt + " ms" : "Not available" }}
+        <span class="rtt-dot" :style="{ backgroundColor: rttColor(minDisplayedRtt) }" />
+        <strong>Min RTT: </strong>{{ minDisplayedRtt ? minDisplayedRtt + ' ms' : 'Not available' }}
       </div>
       <div>
-        <span
-          class="rtt-dot"
-          :style="{ backgroundColor: rttColor(maxDisplayedRtt) }"
-        /> <strong>Max RTT: </strong>{{ maxDisplayedRtt ? maxDisplayedRtt + " ms" : "Not available" }}
+        <span class="rtt-dot" :style="{ backgroundColor: rttColor(maxDisplayedRtt) }" />
+        <strong>Max RTT: </strong>{{ maxDisplayedRtt ? maxDisplayedRtt + ' ms' : 'Not available' }}
       </div>
     </div>
-    <div
-      v-if="displayMode === 'rtt' && Object.keys(nodes).length > 0"
-      class="legend"
-    >
+    <div v-if="displayMode === 'rtt' && Object.keys(nodes).length > 0" class="legend">
       <div class="row items-center">
         <div class="col">
-          <div class="rttLabel">
-            RTT
-          </div>
+          <div class="rttLabel">RTT</div>
         </div>
         <div class="col">
-          <div class="scaleLabel">
-            0%
-          </div>
+          <div class="scaleLabel">0%</div>
           <div class="scale">
             <div
-              v-for="(percentage, index) in Array.from({length: 10}, (_, i) => minDisplayedRtt + i * (maxDisplayedRtt - minDisplayedRtt) / 9)"
+              v-for="(percentage, index) in Array.from(
+                { length: 10 },
+                (_, i) => minDisplayedRtt + (i * (maxDisplayedRtt - minDisplayedRtt)) / 9
+              )"
               :key="index"
               class="scaleColor"
-              :style="{backgroundColor: rttColor(percentage)}"
+              :style="{ backgroundColor: rttColor(percentage) }"
             />
           </div>
-          <div class="scaleLabel">
-            100%
-          </div>
+          <div class="scaleLabel">100%</div>
         </div>
       </div>
     </div>
@@ -494,27 +463,14 @@ watch(displayMode, () => {
           :style="{ backgroundColor: asnColors[asn] }"
           class="asn-box"
         >
-          <a
-            class="asn-link"
-            :href="'/ihr/en/network/AS'+ asn"
-            target="_blank"
-          >AS{{ asn }}</a>
+          <a class="asn-link" :href="'/ihr/en/network/AS' + asn" target="_blank">AS{{ asn }}</a>
         </div>
       </div>
     </div>
     <div class="view-control-overlay">
-      <QBtn
-        icon="zoom_in"
-        @click="zoomIn"
-      />
-      <QBtn
-        icon="zoom_out"
-        @click="zoomOut"
-      />
-      <QBtn
-        icon="fullscreen"
-        @click="toggleFullScreen"
-      />
+      <QBtn icon="zoom_in" @click="zoomIn" />
+      <QBtn icon="zoom_out" @click="zoomOut" />
+      <QBtn icon="fullscreen" @click="toggleFullScreen" />
     </div>
   </div>
 </template>
@@ -526,7 +482,7 @@ watch(displayMode, () => {
 }
 
 .placeholder-message {
-  display: flex ;
+  display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -686,4 +642,4 @@ watch(displayMode, () => {
   border-radius: 50%;
   margin-right: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/controllers/AggregatedAlarmsController.vue b/src/components/controllers/AggregatedAlarmsController.vue
index 23bc71db..1bac3117 100644
--- a/src/components/controllers/AggregatedAlarmsController.vue
+++ b/src/components/controllers/AggregatedAlarmsController.vue
@@ -493,17 +493,11 @@ watch(selectedAlarmTypesOptions.value, () => {
   <div>
     <QCard>
       <QCardSection>
-        <QMarkupTable
-          flat
-          bordered
-          separator="cell"
-        >
+        <QMarkupTable flat bordered separator="cell">
           <thead>
             <tr>
               <th>Data Source</th>
-              <th :colspan="maxAlarmTypesLength">
-                Alarm Types
-              </th>
+              <th :colspan="maxAlarmTypesLength">Alarm Types</th>
             </tr>
           </thead>
           <tbody>
@@ -513,10 +507,7 @@ watch(selectedAlarmTypesOptions.value, () => {
               class="q-tr--no-hover"
             >
               <td>
-                <QCheckbox
-                  v-model="selectedDataSources[indexSource]"
-                  disable
-                />{{
+                <QCheckbox v-model="selectedDataSources[indexSource]" disable />{{
                   dataSource.metadata.title
                 }}
                 <QIcon name="fas fa-circle-info">
@@ -525,10 +516,7 @@ watch(selectedAlarmTypesOptions.value, () => {
                   </QTooltip>
                 </QIcon>
               </td>
-              <td
-                v-for="(dataAlarm, indexAlarm) in dataSource.alarm_types"
-                :key="indexAlarm"
-              >
+              <td v-for="(dataAlarm, indexAlarm) in dataSource.alarm_types" :key="indexAlarm">
                 <QCheckbox
                   v-model="selectedAlarmTypes[indexSource][indexAlarm]"
                   :disable="isLoaded"
@@ -556,7 +544,7 @@ watch(selectedAlarmTypesOptions.value, () => {
             </tr>
           </tbody>
         </QMarkupTable>
-        <br>
+        <br />
         <div class="row">
           <div class="col-auto">
             <div class="row">
@@ -570,10 +558,7 @@ watch(selectedAlarmTypesOptions.value, () => {
                   :max="maxTimeFormatted"
                 />
               </div>
-              <div
-                class="col-auto"
-                style="width: 40px"
-              />
+              <div class="col-auto" style="width: 40px" />
               <div class="col">
                 <QInput
                   v-model="endTimeFormatted"
@@ -585,10 +570,7 @@ watch(selectedAlarmTypesOptions.value, () => {
                 />
               </div>
             </div>
-            <div
-              class="row"
-              style="margin-top: 20px"
-            >
+            <div class="row" style="margin-top: 20px">
               <div class="col-5 text-center">
                 <QBtn
                   color="primary"
@@ -602,12 +584,7 @@ watch(selectedAlarmTypesOptions.value, () => {
                 </QBtn>
               </div>
               <div class="col-4 text-center">
-                <QBtn
-                  color="primary"
-                  class="float-right"
-                  :disable="isLoaded"
-                  @click="resetTime"
-                >
+                <QBtn color="primary" class="float-right" :disable="isLoaded" @click="resetTime">
                   RESET TIME
                 </QBtn>
               </div>
@@ -638,12 +615,7 @@ watch(selectedAlarmTypesOptions.value, () => {
             />
           </div>
           <div class="col">
-            <QBtn
-              color="primary"
-              class="float-right"
-              :disable="isLoaded"
-              @click="resetGranularity"
-            >
+            <QBtn color="primary" class="float-right" :disable="isLoaded" @click="resetGranularity">
               Show All Countries
             </QBtn>
           </div>
@@ -669,12 +641,7 @@ watch(selectedAlarmTypesOptions.value, () => {
           <QCardSection>
             <div class="row items-center">
               <div class="col">
-                <QBtn
-                  color="primary"
-                  class="full-width"
-                  :disable="isLoaded"
-                  @click="resetTime"
-                >
+                <QBtn color="primary" class="full-width" :disable="isLoaded" @click="resetTime">
                   RESET TIME
                 </QBtn>
               </div>
@@ -748,7 +715,7 @@ watch(selectedAlarmTypesOptions.value, () => {
           :name="indexAlarmTypeTitlesMap"
           :disable="
             isLoaded ||
-              !AggregatedAlarmsUtils.flattenDictionary(selectedAlarmTypes)[indexAlarmTypeTitlesMap]
+            !AggregatedAlarmsUtils.flattenDictionary(selectedAlarmTypes)[indexAlarmTypeTitlesMap]
           "
         />
       </QTabs>
@@ -759,11 +726,7 @@ watch(selectedAlarmTypesOptions.value, () => {
           :key="indexAlarmTypeTitlesMap"
           :name="indexAlarmTypeTitlesMap"
         >
-          <QInput
-            v-model="filter"
-            debounce="300"
-            placeholder="Filter"
-          >
+          <QInput v-model="filter" debounce="300" placeholder="Filter">
             <template #append>
               <QIcon name="fas fa-filter" />
             </template>
diff --git a/src/components/controllers/GenericCardController.vue b/src/components/controllers/GenericCardController.vue
index 6a728449..580dcdc9 100644
--- a/src/components/controllers/GenericCardController.vue
+++ b/src/components/controllers/GenericCardController.vue
@@ -54,10 +54,7 @@ const getUrlAnchor = () => {
 <template>
   <div>
     <QCard>
-      <div
-        :id="anchorUrl"
-        class="anchor"
-      />
+      <div :id="anchorUrl" class="anchor" />
       <QBar class="bar">
         <div>
           <div class="text-h6">
@@ -68,12 +65,7 @@ const getUrlAnchor = () => {
           </div>
         </div>
         <QSpace />
-        <QBtn
-          dense
-          flat
-          icon="fa-solid fa-link"
-          @click="copyToClipboard(getUrlAnchor())"
-        >
+        <QBtn dense flat icon="fa-solid fa-link" @click="copyToClipboard(getUrlAnchor())">
           <QTooltip> Copy widget's URL </QTooltip>
         </QBtn>
         <QBtn
@@ -91,22 +83,11 @@ const getUrlAnchor = () => {
     <QDialog v-model="infoDialog">
       <QCard style="width: 1000px; height: auto">
         <QCardSection>
-          <div
-            class="text-h6"
-            v-html="infoTitle"
-          />
+          <div class="text-h6" v-html="infoTitle" />
         </QCardSection>
-        <QCardSection
-          class="q-pt-none"
-          v-html="infoDescription"
-        />
+        <QCardSection class="q-pt-none" v-html="infoDescription" />
         <QCardActions align="right">
-          <QBtn
-            v-close-popup
-            flat
-            label="Close"
-            color="primary"
-          />
+          <QBtn v-close-popup flat label="Close" color="primary" />
         </QCardActions>
       </QCard>
     </QDialog>
diff --git a/src/components/maps/DiscoMap.vue b/src/components/maps/DiscoMap.vue
index 169212fa..4800d917 100644
--- a/src/components/maps/DiscoMap.vue
+++ b/src/components/maps/DiscoMap.vue
@@ -143,11 +143,6 @@ const traces = computed(() => {
 
 <template>
   <div class="IHR_disco-chart">
-    <ReactiveChart
-      :layout="layout"
-      :traces="traces"
-      :no-data="noData"
-      :y-max="yMax"
-    />
+    <ReactiveChart :layout="layout" :traces="traces" :no-data="noData" :y-max="yMax" />
   </div>
 </template>
diff --git a/src/components/maps/WorldMap.vue b/src/components/maps/WorldMap.vue
index 0e9c16b0..1d9f8683 100644
--- a/src/components/maps/WorldMap.vue
+++ b/src/components/maps/WorldMap.vue
@@ -74,11 +74,7 @@ const onCountryClick = (eventData) => {
 <template>
   <div>
     <div class="map-container">
-      <ReactiveChart
-        :layout="layout"
-        :traces="traces"
-        @plotly-click="onCountryClick"
-      />
+      <ReactiveChart :layout="layout" :traces="traces" @plotly-click="onCountryClick" />
     </div>
   </div>
 </template>
diff --git a/src/components/networks/AS.vue b/src/components/networks/AS.vue
index bc5fc70f..63ca99bd 100644
--- a/src/components/networks/AS.vue
+++ b/src/components/networks/AS.vue
@@ -153,10 +153,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -171,9 +168,7 @@ onMounted(() => {
           @input="setReportDate"
         />
       </div>
-      <div v-else>
-        Weekly report
-      </div>
+      <div v-else>Weekly report</div>
     </h3>
     <QCard flat>
       <QTabs
@@ -184,41 +179,19 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab name="overview">
-          Overview
-        </QTab>
-        <QTab name="monitoring">
-          Monitoring
-        </QTab>
-        <QTab name="routing">
-          Routing
-        </QTab>
-        <QTab name="dns">
-          DNS
-        </QTab>
-        <QTab name="peering">
-          Peering
-        </QTab>
-        <QTab name="registration">
-          Registration
-        </QTab>
-        <QTab name="rankings">
-          Rankings
-        </QTab>
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="overview"> Overview </QTab>
+        <QTab name="monitoring"> Monitoring </QTab>
+        <QTab name="routing"> Routing </QTab>
+        <QTab name="dns"> DNS </QTab>
+        <QTab name="peering"> Peering </QTab>
+        <QTab name="registration"> Registration </QTab>
+        <QTab name="rankings"> Rankings </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <QTabPanel name="overview">
-          <ASOverview
-            :as-number="asNumber"
-            :peeringdb-id="setPeeringdbId"
-          />
+          <ASOverview :as-number="asNumber" :peeringdb-id="setPeeringdbId" />
         </QTabPanel>
         <QTabPanel name="monitoring">
           <ASMonitoring
@@ -232,34 +205,19 @@ onMounted(() => {
           />
         </QTabPanel>
         <QTabPanel name="routing">
-          <ASRouting
-            :as-number="asNumber"
-            :page-title="pageTitle"
-          />
+          <ASRouting :as-number="asNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="dns">
-          <ASDNS
-            :as-number="asNumber"
-            :page-title="pageTitle"
-          />
+          <ASDNS :as-number="asNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="peering">
-          <ASPeering
-            :as-number="asNumber"
-            :page-title="pageTitle"
-          />
+          <ASPeering :as-number="asNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="registration">
-          <ASRegistration
-            :as-number="asNumber"
-            :page-title="pageTitle"
-          />
+          <ASRegistration :as-number="asNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="rankings">
-          <ASRankings
-            :as-number="asNumber"
-            :page-title="pageTitle"
-          />
+          <ASRankings :as-number="asNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="custom">
           <ASCustom
diff --git a/src/components/networks/Country.vue b/src/components/networks/Country.vue
index a6f30ce9..b73a9b5c 100644
--- a/src/components/networks/Country.vue
+++ b/src/components/networks/Country.vue
@@ -139,10 +139,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -157,9 +154,7 @@ onMounted(() => {
           @input="setReportDate"
         />
       </div>
-      <div v-else>
-        Weekly report
-      </div>
+      <div v-else>Weekly report</div>
     </h3>
     <QCard flat>
       <QTabs
@@ -170,30 +165,15 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab name="overview">
-          Overview
-        </QTab>
-        <QTab name="monitoring">
-          Monitoring
-        </QTab>
-        <QTab name="routing">
-          Routing
-        </QTab>
-        <QTab name="peering">
-          Peering
-        </QTab>
-        <QTab name="rankings">
-          Rankings
-        </QTab>
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="overview"> Overview </QTab>
+        <QTab name="monitoring"> Monitoring </QTab>
+        <QTab name="routing"> Routing </QTab>
+        <QTab name="peering"> Peering </QTab>
+        <QTab name="rankings"> Rankings </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <QTabPanel name="overview">
           <CountryOverview :country-code="countryCode" />
         </QTabPanel>
@@ -208,22 +188,13 @@ onMounted(() => {
           />
         </QTabPanel>
         <QTabPanel name="routing">
-          <CountryRouting
-            :country-code="countryCode"
-            :page-title="pageTitle"
-          />
+          <CountryRouting :country-code="countryCode" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="peering">
-          <CountryPeering
-            :country-code="countryCode"
-            :page-title="pageTitle"
-          />
+          <CountryPeering :country-code="countryCode" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="rankings">
-          <CountryRankings
-            :country-code="countryCode"
-            :page-title="pageTitle"
-          />
+          <CountryRankings :country-code="countryCode" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="custom">
           <CountryCustom
diff --git a/src/components/networks/HostName.vue b/src/components/networks/HostName.vue
index 98430f1e..21db7533 100644
--- a/src/components/networks/HostName.vue
+++ b/src/components/networks/HostName.vue
@@ -90,10 +90,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -110,51 +107,27 @@ onMounted(() => {
         narrow-indicator
       >
         <!-- <QTab name="overview">Overview</QTab> -->
-        <QTab name="routing">
-          Routing
-        </QTab>
-        <QTab name="dns">
-          DNS
-        </QTab>
-        <QTab name="rankings">
-          Rankings
-        </QTab>
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="routing"> Routing </QTab>
+        <QTab name="dns"> DNS </QTab>
+        <QTab name="rankings"> Rankings </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <!-- <QTabPanel name="overview">
           
         </QTabPanel> -->
         <QTabPanel name="routing">
-          <HostNameRouting
-            :page-title="pageTitle"
-            :host-name="domainName"
-          />
+          <HostNameRouting :page-title="pageTitle" :host-name="domainName" />
         </QTabPanel>
         <QTabPanel name="dns">
-          <HostNameDNS
-            :page-title="pageTitle"
-            :host-name="domainName"
-          />
+          <HostNameDNS :page-title="pageTitle" :host-name="domainName" />
         </QTabPanel>
         <QTabPanel name="rankings">
-          <HostNameRankings
-            :page-title="pageTitle"
-            :host-name="domainName"
-          />
+          <HostNameRankings :page-title="pageTitle" :host-name="domainName" />
         </QTabPanel>
         <QTabPanel name="custom">
-          <HostNameCustom
-            :page-title="pageTitle"
-            :host-name="domainName"
-            :hash="routeHash"
-          />
+          <HostNameCustom :page-title="pageTitle" :host-name="domainName" :hash="routeHash" />
         </QTabPanel>
       </QTabPanels>
     </QCard>
diff --git a/src/components/networks/IXP.vue b/src/components/networks/IXP.vue
index 5310b631..bd58522b 100644
--- a/src/components/networks/IXP.vue
+++ b/src/components/networks/IXP.vue
@@ -141,11 +141,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -160,9 +156,7 @@ onMounted(() => {
           @input="setReportDate"
         />
       </div>
-      <div v-else>
-        Weekly report
-      </div>
+      <div v-else>Weekly report</div>
     </h3>
     <QCard flat>
       <QTabs
@@ -173,27 +167,14 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab name="overview">
-          Overview
-        </QTab>
-        <QTab name="monitoring">
-          Monitoring
-        </QTab>
-        <QTab name="routing">
-          Routing
-        </QTab>
-        <QTab name="peering">
-          Peering
-        </QTab>
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="overview"> Overview </QTab>
+        <QTab name="monitoring"> Monitoring </QTab>
+        <QTab name="routing"> Routing </QTab>
+        <QTab name="peering"> Peering </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <QTabPanel name="overview">
           <IXPOverview :ixp-number="ixpNumber" />
         </QTabPanel>
@@ -209,16 +190,10 @@ onMounted(() => {
           />
         </QTabPanel>
         <QTabPanel name="routing">
-          <IXPRouting
-            :ixp-number="ixpNumber"
-            :page-title="pageTitle"
-          />
+          <IXPRouting :ixp-number="ixpNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="peering">
-          <IXPPeering
-            :ixp-number="ixpNumber"
-            :page-title="pageTitle"
-          />
+          <IXPPeering :ixp-number="ixpNumber" :page-title="pageTitle" />
         </QTabPanel>
         <QTabPanel name="custom">
           <IXPCustom
diff --git a/src/components/networks/Prefix.vue b/src/components/networks/Prefix.vue
index 60a2a557..7a635362 100644
--- a/src/components/networks/Prefix.vue
+++ b/src/components/networks/Prefix.vue
@@ -93,10 +93,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -112,42 +109,21 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab name="overview">
-          Overview
-        </QTab>
-        <QTab name="routing">
-          Routing
-        </QTab>
-        <QTab name="dns">
-          DNS
-        </QTab>
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="overview"> Overview </QTab>
+        <QTab name="routing"> Routing </QTab>
+        <QTab name="dns"> DNS </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <QTabPanel name="overview">
-          <PrefixOverview
-            :host="host"
-            :prefix-length="prefixLength"
-            :get-prefix="getPrefix()"
-          />
+          <PrefixOverview :host="host" :prefix-length="prefixLength" :get-prefix="getPrefix()" />
         </QTabPanel>
         <QTabPanel name="routing">
-          <PrefixRouting
-            :page-title="pageTitle"
-            :get-prefix="getPrefix()"
-          />
+          <PrefixRouting :page-title="pageTitle" :get-prefix="getPrefix()" />
         </QTabPanel>
         <QTabPanel name="dns">
-          <PrefixDNS
-            :page-title="pageTitle"
-            :get-prefix="getPrefix()"
-          />
+          <PrefixDNS :page-title="pageTitle" :get-prefix="getPrefix()" />
         </QTabPanel>
         <QTabPanel name="custom">
           <PrefixCustom
diff --git a/src/components/networks/Rank.vue b/src/components/networks/Rank.vue
index 467a6e35..1af3c53b 100644
--- a/src/components/networks/Rank.vue
+++ b/src/components/networks/Rank.vue
@@ -87,10 +87,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -106,21 +103,12 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <QTabPanel name="custom">
-          <RankCustom
-            :rank="rank"
-            :page-title="pageTitle"
-            :hash="routeHash"
-          />
+          <RankCustom :rank="rank" :page-title="pageTitle" :hash="routeHash" />
         </QTabPanel>
       </QTabPanels>
     </QCard>
diff --git a/src/components/networks/Tag.vue b/src/components/networks/Tag.vue
index e0425089..5432c1ac 100644
--- a/src/components/networks/Tag.vue
+++ b/src/components/networks/Tag.vue
@@ -88,10 +88,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <h1 class="text-center">
       {{ pageTitle }}
     </h1>
@@ -108,25 +105,17 @@ onMounted(() => {
         narrow-indicator
       >
         <!-- <QTab name="overview">Overview</QTab> -->
-        <QTab name="custom">
-          Custom
-        </QTab>
+        <QTab name="custom"> Custom </QTab>
       </QTabs>
       <QSeparator />
-      <QTabPanels
-        v-if="pageTitle"
-        v-model="menu"
-      >
+      <QTabPanels v-if="pageTitle" v-model="menu">
         <!-- <QTabPanel name="overview">
           <TagOverview
             :tag="tag"
           />
         </QTabPanel> -->
         <QTabPanel name="custom">
-          <TagCustom
-            :tag="tag"
-            :hash="routeHash"
-          />
+          <TagCustom :tag="tag" :hash="routeHash" />
         </QTabPanel>
       </QTabPanels>
     </QCard>
diff --git a/src/components/networks/as/ASCustom.vue b/src/components/networks/as/ASCustom.vue
index 508485bf..d7e3fc04 100644
--- a/src/components/networks/as/ASCustom.vue
+++ b/src/components/networks/as/ASCustom.vue
@@ -42,7 +42,7 @@ const router = useRouter()
 
 const { t } = useI18n()
 
-const emit = defineEmits(['toggle-ip-family']);
+const emit = defineEmits(['toggle-ip-family'])
 
 const fetch = ref(true)
 const displayWidgets = ref(route.query.display ? JSON.parse(route.query.display) : [])
@@ -98,8 +98,8 @@ const hashToDisplay = (hash) => {
 }
 
 const toggleIpFamily = () => {
-  emit('toggle-ip-family');
-};
+  emit('toggle-ip-family')
+}
 
 watch(selects.value, () => {
   pushRoute()
@@ -123,14 +123,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
@@ -140,10 +135,7 @@ onMounted(() => {
         v-model="select.value"
         :label="select.label"
       />
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Overview -->
@@ -235,10 +227,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.atlas.info.description')"
     class="card"
   >
-    <ASRipeAtlas
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRipeAtlas :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 
   <!-- <GenericCardController
@@ -284,10 +273,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.ipPrefix.info.description')"
     class="card"
   >
-    <ASOriginatedPrefixes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASOriginatedPrefixes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[8].value"
@@ -297,10 +283,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.peers.info.description')"
     class="card"
   >
-    <ASConnectedASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASConnectedASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[9].value"
@@ -310,10 +293,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.upstreams.info.description')"
     class="card"
   >
-    <ASUpstreamASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASUpstreamASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[10].value"
@@ -323,10 +303,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.downstreams.info.description')"
     class="card"
   >
-    <ASDownstreamsASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASDownstreamsASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[11].value"
@@ -336,10 +313,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.roas.info.description')"
     class="card"
   >
-    <ASRPKIRouteOriginAuthorization
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRPKIRouteOriginAuthorization :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <!-- DNS -->
   <GenericCardController
@@ -350,10 +324,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.popularDomains.info.description')"
     class="card"
   >
-    <ASPopularDomains
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASPopularDomains :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[13].value"
@@ -363,10 +334,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.popularHostNames.info.description')"
     class="card"
   >
-    <ASPopularHostNames
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASPopularHostNames :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[14].value"
@@ -376,10 +344,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.authoritativeNameservers.info.description')"
     class="card"
   >
-    <ASAuthoritativeNameservers
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASAuthoritativeNameservers :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Peering -->
   <GenericCardController
@@ -390,10 +355,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.ixp.info.description')"
     class="card"
   >
-    <ASIXPs
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASIXPs :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[16].value"
@@ -403,10 +365,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.facilities.info.description')"
     class="card"
   >
-    <ASCoLocatedASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASCoLocatedASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Registration -->
   <GenericCardController
@@ -417,10 +376,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.siblings.info.description')"
     class="card"
   >
-    <ASSiblingASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASSiblingASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Rankings -->
   <GenericCardController
@@ -431,10 +387,7 @@ onMounted(() => {
     :info-description="$t('iyp.as.rankings.info.description')"
     class="card"
   >
-    <ASRankings
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRankings :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/as/ASDNS.vue b/src/components/networks/as/ASDNS.vue
index 2644aa6f..1895445d 100644
--- a/src/components/networks/as/ASDNS.vue
+++ b/src/components/networks/as/ASDNS.vue
@@ -14,10 +14,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-title="$t('iyp.as.popularDomains.info.title')"
     :info-description="$t('iyp.as.popularDomains.info.description')"
   >
-    <ASPopularDomains
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASPopularDomains :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.popularHostNames.title')"
@@ -26,10 +23,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.popularHostNames.info.description')"
     class="card"
   >
-    <ASPopularHostNames
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASPopularHostNames :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.authoritativeNameservers.title')"
@@ -38,10 +32,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.authoritativeNameservers.info.description')"
     class="card"
   >
-    <ASAuthoritativeNameservers
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASAuthoritativeNameservers :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/as/ASMonitoring.vue b/src/components/networks/as/ASMonitoring.vue
index 9aa4452e..5312bd26 100644
--- a/src/components/networks/as/ASMonitoring.vue
+++ b/src/components/networks/as/ASMonitoring.vue
@@ -14,13 +14,13 @@ const props = defineProps(['startTime', 'endTime', 'asNumber', 'family', 'pageTi
 
 const route = useRoute()
 
-const emit = defineEmits(['toggle-ip-family']);
+const emit = defineEmits(['toggle-ip-family'])
 
 const fetch = ref(true)
 
 const toggleIpFamily = () => {
-  emit('toggle-ip-family');
-};
+  emit('toggle-ip-family')
+}
 </script>
 
 <template>
@@ -99,10 +99,7 @@ const toggleIpFamily = () => {
     :info-description="$t('iyp.as.atlas.info.description')"
     class="card"
   >
-    <ASRipeAtlas
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRipeAtlas :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 
   <!-- <GenericCardController
diff --git a/src/components/networks/as/ASOverview.vue b/src/components/networks/as/ASOverview.vue
index 828ada2a..023e9833 100644
--- a/src/components/networks/as/ASOverview.vue
+++ b/src/components/networks/as/ASOverview.vue
@@ -146,35 +146,23 @@ onMounted(() => {
 <template>
   <div>
     <QMarkupTable separator="horizontal">
-      <div
-        v-if="loading > 0"
-        class="IHR_loading-spinner"
-      >
-        <QSpinner
-          color="secondary"
-          size="15em"
-        />
+      <div v-if="loading > 0" class="IHR_loading-spinner">
+        <QSpinner color="secondary" size="15em" />
       </div>
       <thead>
         <tr>
-          <th class="text-left">
-            Summary
-          </th>
+          <th class="text-left">Summary</th>
           <th
             v-if="
               (queries[1].data.length > 0) &
-                (queries[1].data[0] ? (queries[1].data[0].rank ? true : false) : false)
+              (queries[1].data[0] ? (queries[1].data[0].rank ? true : false) : false)
             "
             class="text-left"
           >
             Top Rank
           </th>
-          <th class="text-left">
-            Popular Hostnames
-          </th>
-          <th class="text-left">
-            External Links
-          </th>
+          <th class="text-left">Popular Hostnames</th>
+          <th class="text-left">External Links</th>
         </tr>
       </thead>
       <tbody>
@@ -235,11 +223,7 @@ onMounted(() => {
               </div>
               <div>
                 Website:
-                <a
-                  :href="queries[0].data[0].website"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >{{
+                <a :href="queries[0].data[0].website" target="_blank" rel="noopener noreferrer">{{
                   queries[0].data[0].website
                 }}</a>
               </div>
@@ -248,7 +232,7 @@ onMounted(() => {
           <td
             v-if="
               (queries[1].data.length > 0) &
-                (queries[1].data[0] ? (queries[1].data[0].rank ? true : false) : false)
+              (queries[1].data[0] ? (queries[1].data[0].rank ? true : false) : false)
             "
             class="text-left"
           >
@@ -256,10 +240,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[2].data.length > 0">
-              <div
-                v-for="item in queries[2].data"
-                :key="item.hostname"
-              >
+              <div v-for="item in queries[2].data" :key="item.hostname">
                 <RouterLink
                   :to="Tr.i18nRoute({ name: 'hostname', params: { hostname: item.hostname } })"
                 >
@@ -270,10 +251,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[0].data.length > 0">
-              <div
-                v-for="(value, key) in references"
-                :key="key"
-              >
+              <div v-for="(value, key) in references" :key="key">
                 <a
                   v-if="handleReference(key)"
                   :href="handleReference(key)"
@@ -288,16 +266,12 @@ onMounted(() => {
         </tr>
       </tbody>
     </QMarkupTable>
-    <br>
+    <br />
     <QMarkupTable separator="horizontal">
       <thead>
         <tr>
-          <th class="text-left">
-            IPv4 Network Topology
-          </th>
-          <th class="text-left">
-            IPv6 Network Topology
-          </th>
+          <th class="text-left">IPv4 Network Topology</th>
+          <th class="text-left">IPv6 Network Topology</th>
         </tr>
       </thead>
       <tbody>
@@ -311,34 +285,22 @@ onMounted(() => {
             />
           </td>
           <td class="topology">
-            <NetworkTopologyChart
-              :search-input="String(asNumber)"
-              af="IPv6"
-              :is-component="true"
-            />
+            <NetworkTopologyChart :search-input="String(asNumber)" af="IPv6" :is-component="true" />
           </td>
         </tr>
       </tbody>
     </QMarkupTable>
-    <br>
+    <br />
     <QMarkupTable>
       <thead>
         <tr>
-          <th
-            class="text-left"
-            :colspan="5"
-          >
-            Tags
-          </th>
+          <th class="text-left" :colspan="5">Tags</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td :colspan="5">
-            <div
-              v-if="queries[0].data.length > 0"
-              class="row"
-            >
+            <div v-if="queries[0].data.length > 0" class="row">
               <RouterLink
                 v-for="tag in queries[0].data[0].tags"
                 :key="tag"
@@ -346,12 +308,7 @@ onMounted(() => {
                   Tr.i18nRoute({ name: 'tag', params: { tag: tag }, hash: '#Autonomous-Systems' })
                 "
               >
-                <QChip
-                  dense
-                  size="md"
-                  color="info"
-                  text-color="white"
-                >
+                <QChip dense size="md" color="info" text-color="white">
                   {{ tag }}
                 </QChip>
               </RouterLink>
@@ -370,7 +327,7 @@ p {
 }
 h3 {
   font-size: 1rem;
-  line-height: 1.5
+  line-height: 1.5;
 }
 .overview-footer {
   text-decoration: underline;
diff --git a/src/components/networks/as/ASPeering.vue b/src/components/networks/as/ASPeering.vue
index 4346748f..20ad0527 100644
--- a/src/components/networks/as/ASPeering.vue
+++ b/src/components/networks/as/ASPeering.vue
@@ -16,10 +16,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-title="$t('iyp.as.peers.info.title')"
     :info-description="$t('iyp.as.peers.info.description')"
   >
-    <ASConnectedASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASConnectedASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.upstreams.title')"
@@ -28,10 +25,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.upstreams.info.description')"
     class="card"
   >
-    <ASUpstreamASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASUpstreamASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.downstreams.title')"
@@ -40,10 +34,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.downstreams.info.description')"
     class="card"
   >
-    <ASDownstreamsASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASDownstreamsASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.ixp.title')"
@@ -52,10 +43,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.ixp.info.description')"
     class="card"
   >
-    <ASIXPs
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASIXPs :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.facilities.title')"
@@ -64,10 +52,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.facilities.info.description')"
     class="card"
   >
-    <ASCoLocatedASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASCoLocatedASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/as/ASRankings.vue b/src/components/networks/as/ASRankings.vue
index 29fdc18c..009f5d88 100644
--- a/src/components/networks/as/ASRankings.vue
+++ b/src/components/networks/as/ASRankings.vue
@@ -12,10 +12,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-title="$t('iyp.as.rankings.info.title')"
     :info-description="$t('iyp.as.rankings.info.description')"
   >
-    <ASRankings
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRankings :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/as/ASRegistration.vue b/src/components/networks/as/ASRegistration.vue
index 386cecd1..27998f3e 100644
--- a/src/components/networks/as/ASRegistration.vue
+++ b/src/components/networks/as/ASRegistration.vue
@@ -13,10 +13,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-title="$t('iyp.as.ipPrefix.info.title')"
     :info-description="$t('iyp.as.ipPrefix.info.description')"
   >
-    <ASOriginatedPrefixes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASOriginatedPrefixes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.siblings.title')"
@@ -25,10 +22,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.siblings.info.description')"
     class="card"
   >
-    <ASSiblingASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASSiblingASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/as/ASRouting.vue b/src/components/networks/as/ASRouting.vue
index a4bd5104..f3436364 100644
--- a/src/components/networks/as/ASRouting.vue
+++ b/src/components/networks/as/ASRouting.vue
@@ -16,10 +16,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-title="$t('iyp.as.ipPrefix.info.title')"
     :info-description="$t('iyp.as.ipPrefix.info.description')"
   >
-    <ASOriginatedPrefixes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASOriginatedPrefixes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.peers.title')"
@@ -28,10 +25,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.peers.info.description')"
     class="card"
   >
-    <ASConnectedASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASConnectedASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.upstreams.title')"
@@ -40,10 +34,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.upstreams.info.description')"
     class="card"
   >
-    <ASUpstreamASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASUpstreamASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.downstreams.title')"
@@ -52,10 +43,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.downstreams.info.description')"
     class="card"
   >
-    <ASDownstreamsASes
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASDownstreamsASes :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.as.roas.title')"
@@ -64,10 +52,7 @@ const props = defineProps(['asNumber', 'pageTitle'])
     :info-description="$t('iyp.as.roas.info.description')"
     class="card"
   >
-    <ASRPKIRouteOriginAuthorization
-      :as-number="asNumber"
-      :page-title="pageTitle"
-    />
+    <ASRPKIRouteOriginAuthorization :as-number="asNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/country/CountryCustom.vue b/src/components/networks/country/CountryCustom.vue
index 958ff8a2..3100a28a 100644
--- a/src/components/networks/country/CountryCustom.vue
+++ b/src/components/networks/country/CountryCustom.vue
@@ -106,14 +106,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
@@ -123,18 +118,11 @@ onMounted(() => {
         v-model="select.value"
         :label="select.label"
       />
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Overview -->
-  <CountryOverview
-    v-if="selects[0].value"
-    :country-code="countryCode"
-    class="card"
-  />
+  <CountryOverview v-if="selects[0].value" :country-code="countryCode" class="card" />
   <!-- Monitoring -->
   <GenericCardController
     v-if="selects[1].value"
@@ -226,10 +214,7 @@ onMounted(() => {
     :info-description="$t('iyp.country.atlas.info.description')"
     class="card"
   >
-    <CountryRipeAtlas
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryRipeAtlas :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Routing -->
   <GenericCardController
@@ -240,10 +225,7 @@ onMounted(() => {
     :info-description="$t('iyp.country.ases.info.description')"
     class="card"
   >
-    <CountryAutonomousSystems
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryAutonomousSystems :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[7].value"
@@ -253,10 +235,7 @@ onMounted(() => {
     :info-description="$t('iyp.country.prefixes.info.description')"
     class="card"
   >
-    <CountryIPPrefixes
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryIPPrefixes :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Peering -->
   <GenericCardController
@@ -267,10 +246,7 @@ onMounted(() => {
     :info-description="$t('iyp.country.ixps.info.description')"
     class="card"
   >
-    <CountryInternetExchangePoints
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryInternetExchangePoints :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Rankings -->
   <GenericCardController
@@ -281,10 +257,7 @@ onMounted(() => {
     :info-description="$t('iyp.country.rankings.info.description')"
     class="card"
   >
-    <CountryASRankings
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryASRankings :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/country/CountryMonitoring.vue b/src/components/networks/country/CountryMonitoring.vue
index 7b2ab6b8..1ac7c361 100644
--- a/src/components/networks/country/CountryMonitoring.vue
+++ b/src/components/networks/country/CountryMonitoring.vue
@@ -117,10 +117,7 @@ const setMajorEyeballs = (asns) => {
     :info-description="$t('iyp.country.atlas.info.description')"
     class="card"
   >
-    <CountryRipeAtlas
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryRipeAtlas :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/country/CountryOverview.vue b/src/components/networks/country/CountryOverview.vue
index f23f3904..7d049624 100644
--- a/src/components/networks/country/CountryOverview.vue
+++ b/src/components/networks/country/CountryOverview.vue
@@ -111,29 +111,15 @@ onMounted(() => {
 <template>
   <div>
     <QMarkupTable separator="horizontal">
-      <div
-        v-if="loading > 0"
-        class="IHR_loading-spinner"
-      >
-        <QSpinner
-          color="secondary"
-          size="15em"
-        />
+      <div v-if="loading > 0" class="IHR_loading-spinner">
+        <QSpinner color="secondary" size="15em" />
       </div>
       <thead>
         <tr>
-          <th class="text-left">
-            Summary
-          </th>
-          <th class="text-left">
-            Prominent ISPs
-          </th>
-          <th class="text-left">
-            Prominent Hosting Providers
-          </th>
-          <th class="text-left">
-            External Links
-          </th>
+          <th class="text-left">Summary</th>
+          <th class="text-left">Prominent ISPs</th>
+          <th class="text-left">Prominent Hosting Providers</th>
+          <th class="text-left">External Links</th>
         </tr>
       </thead>
       <tbody>
@@ -200,10 +186,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[1].data.length > 0">
-              <div
-                v-for="item in queries[1].data"
-                :key="Number(item.asn)"
-              >
+              <div v-for="item in queries[1].data" :key="Number(item.asn)">
                 <RouterLink
                   :to="Tr.i18nRoute({ name: 'network', params: { id: `AS${item.asn}` } })"
                 >
@@ -214,10 +197,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[2].data.length > 0">
-              <div
-                v-for="item in queries[2].data"
-                :key="Number(item.asn)"
-              >
+              <div v-for="item in queries[2].data" :key="Number(item.asn)">
                 <RouterLink
                   :to="Tr.i18nRoute({ name: 'network', params: { id: `AS${item.asn}` } })"
                 >
@@ -228,15 +208,8 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[0].data.length > 0">
-              <div
-                v-for="(value, key) in references"
-                :key="key"
-              >
-                <a
-                  :href="handleReference(key)"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+              <div v-for="(value, key) in references" :key="key">
+                <a :href="handleReference(key)" target="_blank" rel="noreferrer">
                   {{ key }}
                 </a>
               </div>
@@ -255,7 +228,7 @@ p {
 }
 h3 {
   font-size: 1rem;
-  line-height: 1.5
+  line-height: 1.5;
 }
 .overview-footer {
   text-decoration: underline;
diff --git a/src/components/networks/country/CountryPeering.vue b/src/components/networks/country/CountryPeering.vue
index c8d058cd..c62b5748 100644
--- a/src/components/networks/country/CountryPeering.vue
+++ b/src/components/networks/country/CountryPeering.vue
@@ -12,10 +12,7 @@ const props = defineProps(['countryCode', 'pageTitle'])
     :info-title="$t('iyp.country.ixps.info.title')"
     :info-description="$t('iyp.country.ixps.info.description')"
   >
-    <CountryInternetExchangePoints
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryInternetExchangePoints :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/country/CountryRankings.vue b/src/components/networks/country/CountryRankings.vue
index 1c976ea3..34a21862 100644
--- a/src/components/networks/country/CountryRankings.vue
+++ b/src/components/networks/country/CountryRankings.vue
@@ -13,10 +13,7 @@ const props = defineProps(['countryCode', 'pageTitle'])
     :info-title="$t('iyp.country.rankings.info.title')"
     :info-description="$t('iyp.country.rankings.info.description')"
   >
-    <CountryASRankings
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryASRankings :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/country/CountryRouting.vue b/src/components/networks/country/CountryRouting.vue
index 0e76b652..433afc12 100644
--- a/src/components/networks/country/CountryRouting.vue
+++ b/src/components/networks/country/CountryRouting.vue
@@ -13,10 +13,7 @@ const props = defineProps(['countryCode', 'pageTitle'])
     :info-title="$t('iyp.country.ases.info.title')"
     :info-description="$t('iyp.country.ases.info.description')"
   >
-    <CountryAutonomousSystems
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryAutonomousSystems :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.country.prefixes.title')"
@@ -25,10 +22,7 @@ const props = defineProps(['countryCode', 'pageTitle'])
     :info-description="$t('iyp.country.prefixes.info.description')"
     class="card"
   >
-    <CountryIPPrefixes
-      :country-code="countryCode"
-      :page-title="pageTitle"
-    />
+    <CountryIPPrefixes :country-code="countryCode" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/hostName/HostNameCustom.vue b/src/components/networks/hostName/HostNameCustom.vue
index 478b2c93..6e365820 100644
--- a/src/components/networks/hostName/HostNameCustom.vue
+++ b/src/components/networks/hostName/HostNameCustom.vue
@@ -76,14 +76,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
@@ -93,10 +88,7 @@ onMounted(() => {
         v-model="select.value"
         :label="select.label"
       />
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Routing -->
@@ -108,10 +100,7 @@ onMounted(() => {
     :info-description="$t('iyp.domainname.ips.info.description')"
     class="card"
   >
-    <HostNameIPAddressesPrefixes
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameIPAddressesPrefixes :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <!-- DNS -->
   <GenericCardController
@@ -122,10 +111,7 @@ onMounted(() => {
     :info-description="$t('iyp.domainname.nameservers.info.description')"
     class="card"
   >
-    <HostNameAuthoritativeNameservers
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameAuthoritativeNameservers :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[2].value"
@@ -135,10 +121,7 @@ onMounted(() => {
     :info-description="$t('iyp.domainname.country_query.info.description')"
     class="card"
   >
-    <HostNameQueryingCountries
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameQueryingCountries :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[3].value"
@@ -148,10 +131,7 @@ onMounted(() => {
     :info-description="$t('iyp.domainname.as_query.info.description')"
     class="card"
   >
-    <HostNameQueryingASes
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameQueryingASes :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <!-- Rankings -->
   <GenericCardController
@@ -162,10 +142,7 @@ onMounted(() => {
     :info-description="$t('iyp.domainname.rankings.info.description')"
     class="card"
   >
-    <HostNameRankings
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameRankings :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/hostName/HostNameDNS.vue b/src/components/networks/hostName/HostNameDNS.vue
index 0d7e489d..9d4ce9df 100644
--- a/src/components/networks/hostName/HostNameDNS.vue
+++ b/src/components/networks/hostName/HostNameDNS.vue
@@ -14,10 +14,7 @@ const props = defineProps(['pageTitle', 'hostName'])
     :info-title="$t('iyp.domainname.nameservers.info.title')"
     :info-description="$t('iyp.domainname.nameservers.info.description')"
   >
-    <HostNameAuthoritativeNameservers
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameAuthoritativeNameservers :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.domainname.country_query.title')"
@@ -26,10 +23,7 @@ const props = defineProps(['pageTitle', 'hostName'])
     :info-description="$t('iyp.domainname.country_query.info.description')"
     class="card"
   >
-    <HostNameQueryingCountries
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameQueryingCountries :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.domainname.as_query.title')"
@@ -38,10 +32,7 @@ const props = defineProps(['pageTitle', 'hostName'])
     :info-description="$t('iyp.domainname.as_query.info.description')"
     class="card"
   >
-    <HostNameQueryingASes
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameQueryingASes :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/hostName/HostNameRankings.vue b/src/components/networks/hostName/HostNameRankings.vue
index c8fa4b44..94e7cfd0 100644
--- a/src/components/networks/hostName/HostNameRankings.vue
+++ b/src/components/networks/hostName/HostNameRankings.vue
@@ -12,10 +12,7 @@ const props = defineProps(['pageTitle', 'hostName'])
     :info-title="$t('iyp.domainname.rankings.info.title')"
     :info-description="$t('iyp.domainname.rankings.info.description')"
   >
-    <HostNameRankings
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameRankings :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/hostName/HostNameRouting.vue b/src/components/networks/hostName/HostNameRouting.vue
index de02519a..78ab0a80 100644
--- a/src/components/networks/hostName/HostNameRouting.vue
+++ b/src/components/networks/hostName/HostNameRouting.vue
@@ -12,10 +12,7 @@ const props = defineProps(['pageTitle', 'hostName'])
     :info-title="$t('iyp.domainname.ips.info.title')"
     :info-description="$t('iyp.domainname.ips.info.description')"
   >
-    <HostNameIPAddressesPrefixes
-      :page-title="pageTitle"
-      :host-name="hostName"
-    />
+    <HostNameIPAddressesPrefixes :page-title="pageTitle" :host-name="hostName" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/ixp/IXPCustom.vue b/src/components/networks/ixp/IXPCustom.vue
index 452e9461..51b89dc6 100644
--- a/src/components/networks/ixp/IXPCustom.vue
+++ b/src/components/networks/ixp/IXPCustom.vue
@@ -89,14 +89,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
@@ -106,18 +101,11 @@ onMounted(() => {
         v-model="select.value"
         :label="select.label"
       />
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Overview -->
-  <IXPOverview
-    v-if="selects[0].value"
-    :ixp-number="peeringdbId"
-    class="card"
-  />
+  <IXPOverview v-if="selects[0].value" :ixp-number="peeringdbId" class="card" />
   <!-- Monitoring -->
   <GenericCardController
     v-if="selects[1].value && caidaId"
@@ -182,10 +170,7 @@ onMounted(() => {
     :info-description="$t('iyp.ixp.members.info.description')"
     class="card"
   >
-    <IXPMembers
-      :ixp-number="peeringdbId"
-      :page-title="pageTitle"
-    />
+    <IXPMembers :ixp-number="peeringdbId" :page-title="pageTitle" />
   </GenericCardController>
   <!-- Peering -->
   <GenericCardController
@@ -196,10 +181,7 @@ onMounted(() => {
     :info-description="$t('iyp.ixp.facilities.info.description')"
     class="card"
   >
-    <IXPCoLocationFacilities
-      :ixp-number="peeringdbId"
-      :page-title="pageTitle"
-    />
+    <IXPCoLocationFacilities :ixp-number="peeringdbId" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[6].value"
@@ -209,10 +191,7 @@ onMounted(() => {
     :info-description="$t('iyp.ixp.peeringLANs.info.description')"
     class="card"
   >
-    <IXPPeeringLANs
-      :ixp-number="peeringdbId"
-      :page-title="pageTitle"
-    />
+    <IXPPeeringLANs :ixp-number="peeringdbId" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/ixp/IXPOverview.vue b/src/components/networks/ixp/IXPOverview.vue
index 9033da9a..381d8edb 100644
--- a/src/components/networks/ixp/IXPOverview.vue
+++ b/src/components/networks/ixp/IXPOverview.vue
@@ -80,29 +80,15 @@ onMounted(() => {
 <template>
   <div>
     <QMarkupTable separator="horizontal">
-      <div
-        v-if="loadingStatus"
-        class="IHR_loading-spinner"
-      >
-        <QSpinner
-          color="secondary"
-          size="15em"
-        />
+      <div v-if="loadingStatus" class="IHR_loading-spinner">
+        <QSpinner color="secondary" size="15em" />
       </div>
       <thead>
         <tr>
-          <th class="text-left">
-            Summary
-          </th>
-          <th class="text-left">
-            Stats
-          </th>
-          <th class="text-left">
-            Peering LAN
-          </th>
-          <th class="text-left">
-            External Links
-          </th>
+          <th class="text-left">Summary</th>
+          <th class="text-left">Stats</th>
+          <th class="text-left">Peering LAN</th>
+          <th class="text-left">External Links</th>
         </tr>
       </thead>
       <tbody>
@@ -112,19 +98,13 @@ onMounted(() => {
               <div>
                 Country:
                 <RouterLink :to="Tr.i18nRoute({ name: 'country', params: { cc: overview.cc } })">
-                  {{
-                    overview.country
-                  }}
+                  {{ overview.country }}
                 </RouterLink>
               </div>
               <div>Organization: {{ overview.organization }}</div>
               <div>
                 Website:
-                <a
-                  :href="overview.website"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >{{
+                <a :href="overview.website" target="_blank" rel="noopener noreferrer">{{
                   overview.website
                 }}</a>
               </div>
@@ -137,10 +117,7 @@ onMounted(() => {
             </div>
           </td>
           <td class="text-left">
-            <div
-              v-for="item in overview.peer_lan"
-              :key="item.prefix"
-            >
+            <div v-for="item in overview.peer_lan" :key="item.prefix">
               <RouterLink
                 :to="
                   Tr.i18nRoute({
@@ -155,10 +132,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="overview.name">
-              <div
-                v-for="(value, key) in references"
-                :key="key"
-              >
+              <div v-for="(value, key) in references" :key="key">
                 <a
                   v-if="handleReference(key)"
                   :href="handleReference(key)"
@@ -183,7 +157,7 @@ p {
 }
 h3 {
   font-size: 1rem;
-  line-height: 1.5
+  line-height: 1.5;
 }
 .overview-footer {
   text-decoration: underline;
diff --git a/src/components/networks/ixp/IXPPeering.vue b/src/components/networks/ixp/IXPPeering.vue
index 4e1a2d21..1ac259fa 100644
--- a/src/components/networks/ixp/IXPPeering.vue
+++ b/src/components/networks/ixp/IXPPeering.vue
@@ -14,10 +14,7 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
     :info-title="$t('iyp.ixp.members.info.title')"
     :info-description="$t('iyp.ixp.members.info.description')"
   >
-    <IXPMembers
-      :ixp-number="ixpNumber"
-      :page-title="pageTitle"
-    />
+    <IXPMembers :ixp-number="ixpNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.ixp.facilities.title')"
@@ -26,10 +23,7 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
     :info-description="$t('iyp.ixp.facilities.info.description')"
     class="card"
   >
-    <IXPCoLocationFacilities
-      :ixp-number="ixpNumber"
-      :page-title="pageTitle"
-    />
+    <IXPCoLocationFacilities :ixp-number="ixpNumber" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.ixp.peeringLANs.title')"
@@ -38,10 +32,7 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
     :info-description="$t('iyp.ixp.peeringLANs.info.description')"
     class="card"
   >
-    <IXPPeeringLANs
-      :ixp-number="ixpNumber"
-      :page-title="pageTitle"
-    />
+    <IXPPeeringLANs :ixp-number="ixpNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/ixp/IXPRouting.vue b/src/components/networks/ixp/IXPRouting.vue
index a743f48d..ca547dc1 100644
--- a/src/components/networks/ixp/IXPRouting.vue
+++ b/src/components/networks/ixp/IXPRouting.vue
@@ -12,10 +12,7 @@ const props = defineProps(['ixpNumber', 'pageTitle'])
     :info-title="$t('iyp.ixp.roas.info.title')"
     :info-description="$t('iyp.ixp.roas.info.description')"
   >
-    <IXPRPKIRouteOriginAuthorization
-      :ixp-number="ixpNumber"
-      :page-title="pageTitle"
-    />
+    <IXPRPKIRouteOriginAuthorization :ixp-number="ixpNumber" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/prefix/PrefixCustom.vue b/src/components/networks/prefix/PrefixCustom.vue
index 52e4542c..57173a00 100644
--- a/src/components/networks/prefix/PrefixCustom.vue
+++ b/src/components/networks/prefix/PrefixCustom.vue
@@ -82,14 +82,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
@@ -99,10 +94,7 @@ onMounted(() => {
         v-model="select.value"
         :label="select.label"
       />
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Overview -->
@@ -122,10 +114,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.upstreams.info.description')"
     class="card"
   >
-    <PrefixUpstreamASes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixUpstreamASes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[2].value"
@@ -135,10 +124,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.roas.info.description')"
     class="card"
   >
-    <PrefixRPKIRouteOriginAuthorization
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixRPKIRouteOriginAuthorization :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[3].value"
@@ -148,10 +134,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.lessSpecific.info.description')"
     class="card"
   >
-    <PrefixLessSpecificPrefixes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixLessSpecificPrefixes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[4].value"
@@ -161,10 +144,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.moreSpecific.info.description')"
     class="card"
   >
-    <PrefixMoreSpecificPrefixes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixMoreSpecificPrefixes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <!-- DNS -->
   <GenericCardController
@@ -175,10 +155,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.popularDomains.info.description')"
     class="card"
   >
-    <PrefixPopularDomains
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixPopularDomains :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[6].value"
@@ -188,10 +165,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.popularHostNames.info.description')"
     class="card"
   >
-    <PrefixPopularHostNames
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixPopularHostNames :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[7].value"
@@ -201,10 +175,7 @@ onMounted(() => {
     :info-description="$t('iyp.prefix.nameservers.info.description')"
     class="card"
   >
-    <PrefixAuthoritativeNameservers
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixAuthoritativeNameservers :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/prefix/PrefixDNS.vue b/src/components/networks/prefix/PrefixDNS.vue
index e2819b40..eff116c2 100644
--- a/src/components/networks/prefix/PrefixDNS.vue
+++ b/src/components/networks/prefix/PrefixDNS.vue
@@ -14,10 +14,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-title="$t('iyp.prefix.popularDomains.info.title')"
     :info-description="$t('iyp.prefix.popularDomains.info.description')"
   >
-    <PrefixPopularDomains
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixPopularDomains :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.prefix.popularHostNames.title')"
@@ -26,10 +23,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-description="$t('iyp.prefix.popularHostNames.info.description')"
     class="card"
   >
-    <PrefixPopularHostNames
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixPopularHostNames :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.prefix.nameservers.title')"
@@ -38,10 +32,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-description="$t('iyp.prefix.nameservers.info.description')"
     class="card"
   >
-    <PrefixAuthoritativeNameservers
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixAuthoritativeNameservers :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/prefix/PrefixOverview.vue b/src/components/networks/prefix/PrefixOverview.vue
index 97d67d71..444003a5 100644
--- a/src/components/networks/prefix/PrefixOverview.vue
+++ b/src/components/networks/prefix/PrefixOverview.vue
@@ -136,29 +136,15 @@ onMounted(() => {
 <template>
   <div>
     <QMarkupTable separator="horizontal">
-      <div
-        v-if="loading > 0"
-        class="IHR_loading-spinner"
-      >
-        <QSpinner
-          color="secondary"
-          size="15em"
-        />
+      <div v-if="loading > 0" class="IHR_loading-spinner">
+        <QSpinner color="secondary" size="15em" />
       </div>
       <thead>
         <tr>
-          <th class="text-left">
-            Summary
-          </th>
-          <th class="text-left">
-            Originated By
-          </th>
-          <th class="text-left">
-            Popular Hostnames
-          </th>
-          <th class="text-left">
-            External Links
-          </th>
+          <th class="text-left">Summary</th>
+          <th class="text-left">Originated By</th>
+          <th class="text-left">Popular Hostnames</th>
+          <th class="text-left">External Links</th>
         </tr>
       </thead>
       <tbody>
@@ -179,10 +165,7 @@ onMounted(() => {
           <td>
             <div v-if="queries[0].data.length > 0">
               <div v-if="queries[0].data[0].asn[0][0]">
-                <div
-                  v-for="item in queries[0].data[0].asn"
-                  :key="item[0]"
-                >
+                <div v-for="item in queries[0].data[0].asn" :key="item[0]">
                   <RouterLink
                     :to="Tr.i18nRoute({ name: 'network', params: { id: `AS${item[0]}` } })"
                   >
@@ -197,10 +180,7 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[1].data.length > 0">
-              <div
-                v-for="item in queries[1].data"
-                :key="item.hostname"
-              >
+              <div v-for="item in queries[1].data" :key="item.hostname">
                 <RouterLink
                   :to="Tr.i18nRoute({ name: 'hostname', params: { hostname: item.hostname } })"
                 >
@@ -211,15 +191,8 @@ onMounted(() => {
           </td>
           <td class="text-left">
             <div v-if="queries[0].data.length > 0">
-              <div
-                v-for="(value, key) in references"
-                :key="key"
-              >
-                <a
-                  :href="handleReference(key)"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+              <div v-for="(value, key) in references" :key="key">
+                <a :href="handleReference(key)" target="_blank" rel="noreferrer">
                   {{ key }}
                 </a>
               </div>
@@ -228,13 +201,11 @@ onMounted(() => {
         </tr>
       </tbody>
     </QMarkupTable>
-    <br>
+    <br />
     <QMarkupTable separator="horizontal">
       <thead>
         <tr>
-          <th class="text-left">
-            Network Topology
-          </th>
+          <th class="text-left">Network Topology</th>
         </tr>
       </thead>
       <tbody>
@@ -249,36 +220,23 @@ onMounted(() => {
         </tr>
       </tbody>
     </QMarkupTable>
-    <br>
+    <br />
     <QMarkupTable>
       <thead>
         <tr>
-          <th
-            class="text-left"
-            :colspan="5"
-          >
-            Tags
-          </th>
+          <th class="text-left" :colspan="5">Tags</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td :colspan="5">
-            <div
-              v-if="queries[0].data.length > 0"
-              class="row"
-            >
+            <div v-if="queries[0].data.length > 0" class="row">
               <RouterLink
                 v-for="tag in queries[0].data[0].tags"
                 :key="tag"
                 :to="Tr.i18nRoute({ name: 'tag', params: { tag: tag }, hash: '#Prefixes' })"
               >
-                <QChip
-                  dense
-                  size="md"
-                  color="info"
-                  text-color="white"
-                >
+                <QChip dense size="md" color="info" text-color="white">
                   {{ tag }}
                 </QChip>
               </RouterLink>
diff --git a/src/components/networks/prefix/PrefixRouting.vue b/src/components/networks/prefix/PrefixRouting.vue
index b96d87e8..03029c6b 100644
--- a/src/components/networks/prefix/PrefixRouting.vue
+++ b/src/components/networks/prefix/PrefixRouting.vue
@@ -15,10 +15,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-title="$t('iyp.prefix.upstreams.info.title')"
     :info-description="$t('iyp.prefix.upstreams.info.description')"
   >
-    <PrefixUpstreamASes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixUpstreamASes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.prefix.roas.title')"
@@ -27,10 +24,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-description="$t('iyp.prefix.roas.info.description')"
     class="card"
   >
-    <PrefixRPKIRouteOriginAuthorization
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixRPKIRouteOriginAuthorization :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.prefix.lessSpecific.title')"
@@ -39,10 +33,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-description="$t('iyp.prefix.lessSpecific.info.description')"
     class="card"
   >
-    <PrefixLessSpecificPrefixes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixLessSpecificPrefixes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
   <GenericCardController
     :title="$t('iyp.prefix.moreSpecific.title')"
@@ -51,10 +42,7 @@ const props = defineProps(['getPrefix', 'pageTitle'])
     :info-description="$t('iyp.prefix.moreSpecific.info.description')"
     class="card"
   >
-    <PrefixMoreSpecificPrefixes
-      :page-title="pageTitle"
-      :get-prefix="getPrefix"
-    />
+    <PrefixMoreSpecificPrefixes :page-title="pageTitle" :get-prefix="getPrefix" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/rank/RankCustom.vue b/src/components/networks/rank/RankCustom.vue
index ad51d740..b02acfbf 100644
--- a/src/components/networks/rank/RankCustom.vue
+++ b/src/components/networks/rank/RankCustom.vue
@@ -98,31 +98,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
-      <span
-        v-for="select in selects"
-        :key="select.value"
-      >
-        <QCheckbox
-          v-if="select.hasData"
-          v-model="select.value"
-          :label="select.label"
-        />
+      <span v-for="select in selects" :key="select.value">
+        <QCheckbox v-if="select.hasData" v-model="select.value" :label="select.label" />
       </span>
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <GenericCardController
@@ -133,10 +118,7 @@ onMounted(() => {
     :info-description="$t('iyp.rank.topAs.info.description')"
     class="card"
   >
-    <RankASRankings
-      :rank="rank"
-      :page-title="pageTitle"
-    />
+    <RankASRankings :rank="rank" :page-title="pageTitle" />
   </GenericCardController>
   <GenericCardController
     v-if="selects[1].value"
@@ -146,10 +128,7 @@ onMounted(() => {
     :info-description="$t('iyp.rank.topHostnames.info.description')"
     class="card"
   >
-    <RankHostNameRankings
-      :rank="rank"
-      :page-title="pageTitle"
-    />
+    <RankHostNameRankings :rank="rank" :page-title="pageTitle" />
   </GenericCardController>
 </template>
 
diff --git a/src/components/networks/tag/TagCustom.vue b/src/components/networks/tag/TagCustom.vue
index 7e75aab4..901cbe1b 100644
--- a/src/components/networks/tag/TagCustom.vue
+++ b/src/components/networks/tag/TagCustom.vue
@@ -109,31 +109,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <QCard
-    flat
-    bordered
-  >
+  <QCard flat bordered>
     <QCardSection>
-      <div class="text-h6">
-        Select widgets to show
-      </div>
+      <div class="text-h6">Select widgets to show</div>
     </QCardSection>
     <QSeparator inset />
     <QCardSection>
-      <span
-        v-for="select in selects"
-        :key="select.value"
-      >
-        <QCheckbox
-          v-if="select.hasData"
-          v-model="select.value"
-          :label="select.label"
-        />
+      <span v-for="select in selects" :key="select.value">
+        <QCheckbox v-if="select.hasData" v-model="select.value" :label="select.label" />
       </span>
-      <QCheckbox
-        v-model="selectAll"
-        label="All"
-      />
+      <QCheckbox v-model="selectAll" label="All" />
     </QCardSection>
   </QCard>
   <!-- Overview -->
@@ -172,9 +157,9 @@ onMounted(() => {
     :title="$t('iyp.tag.prefixes.title')"
     :sub-title="
       $t('iyp.tag.prefixes.caption') +
-        tag +
-        ' by ' +
-        selectedWidgets.data_source_prefixes.join(', ')
+      tag +
+      ' by ' +
+      selectedWidgets.data_source_prefixes.join(', ')
     "
     :info-title="$t('iyp.tag.prefixes.info.title')"
     :info-description="$t('iyp.tag.prefixes.info.description')"
diff --git a/src/components/networks/tag/TagOverview.vue b/src/components/networks/tag/TagOverview.vue
index 94492a20..ab1a7a0b 100644
--- a/src/components/networks/tag/TagOverview.vue
+++ b/src/components/networks/tag/TagOverview.vue
@@ -64,24 +64,13 @@ onMounted(() => {
 
 <template>
   <div class="IYP_chart">
-    <div
-      v-if="loading > 0"
-      class="IYP_loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="3em"
-      />
+    <div v-if="loading > 0" class="IYP_loading-spinner">
+      <QSpinner color="secondary" size="3em" />
     </div>
-    <div
-      v-else
-      class="row justify-center"
-    >
+    <div v-else class="row justify-center">
       <div class="col-4">
         <h3>Summary</h3>
-        <p class="text-center">
-          Data Sources: {{ allSources(queries[0].data[0]).join(', ') }}
-        </p>
+        <p class="text-center">Data Sources: {{ allSources(queries[0].data[0]).join(', ') }}</p>
       </div>
     </div>
   </div>
@@ -94,7 +83,7 @@ p {
 }
 h3 {
   font-size: 1rem;
-  line-height: 1.5
+  line-height: 1.5;
 }
 .overview-footer {
   text-decoration: underline;
diff --git a/src/components/ripe/Bgplay.vue b/src/components/ripe/Bgplay.vue
index c63a0e9f..d300f0e1 100644
--- a/src/components/ripe/Bgplay.vue
+++ b/src/components/ripe/Bgplay.vue
@@ -95,20 +95,11 @@ onMounted(() => {
 
 <template>
   <div>
-    <QCard
-      v-if="loaded === false"
-      negative
-    >
+    <QCard v-if="loaded === false" negative>
       <QCardSection> {{ $t('genericErrors.cloudNotLoad') }} BGPlay </QCardSection>
     </QCard>
-    <div
-      v-if="loaded === null"
-      class="IHR_loading-spinner"
-    >
-      <QSpinner
-        color="secondary"
-        size="15em"
-      />
+    <div v-if="loaded === null" class="IHR_loading-spinner">
+      <QSpinner color="secondary" size="15em" />
     </div>
     <div :id="myId" />
   </div>
diff --git a/src/components/ripe/Latencymon.vue b/src/components/ripe/Latencymon.vue
index 215f1f56..56bbfe72 100644
--- a/src/components/ripe/Latencymon.vue
+++ b/src/components/ripe/Latencymon.vue
@@ -60,7 +60,7 @@ onMounted(() => {
 
     try {
       //see https://atlas.ripe.net/docs/tools-latencymon/ for more options and details
-       
+
       lm.value = initLatencymon(
         `#${myId.value}`,
         {
@@ -82,10 +82,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    :id="myId"
-    class="IHR_nowrap"
-  />
+  <div :id="myId" class="IHR_nowrap" />
 </template>
 
 <style>
diff --git a/src/components/ripe/ReverseDnsIp.vue b/src/components/ripe/ReverseDnsIp.vue
index ecf71e93..bd96e783 100644
--- a/src/components/ripe/ReverseDnsIp.vue
+++ b/src/components/ripe/ReverseDnsIp.vue
@@ -57,14 +57,8 @@ onMounted(() => {
 
 <template>
   <div>
-    <div
-      v-if="loaded === null"
-      class="IHR_loading-spin"
-    >
-      <QSpinner
-        color="secondary"
-        size="2em"
-      />
+    <div v-if="loaded === null" class="IHR_loading-spin">
+      <QSpinner color="secondary" size="2em" />
       Loading RIPEstat widgets...
     </div>
     <div :id="myId" />
diff --git a/src/components/search/LocationSearchBar.vue b/src/components/search/LocationSearchBar.vue
index d22362a1..0bb5d29b 100644
--- a/src/components/search/LocationSearchBar.vue
+++ b/src/components/search/LocationSearchBar.vue
@@ -158,29 +158,16 @@ watch(
   >
     <template #append>
       <div v-if="!loading">
-        <QIcon
-          v-if="!readonly"
-          name="fas fa-search"
-          style="font-size: 0.82em; margin-right: 4px"
-        />
+        <QIcon v-if="!readonly" name="fas fa-search" style="font-size: 0.82em; margin-right: 4px" />
       </div>
       <div v-else>
-        <QSpinner
-          color="primary"
-          size="0.82em"
-        />
+        <QSpinner color="primary" size="0.82em" />
       </div>
     </template>
     <template #loading />
     <template #option="scope">
-      <QItem
-        v-bind="scope.itemProps"
-        @click="selectLocation(scope.opt.value)"
-      >
-        <QItemSection
-          side
-          color="accent"
-        >
+      <QItem v-bind="scope.itemProps" @click="selectLocation(scope.opt.value)">
+        <QItemSection side color="accent">
           {{ ihr_api.readableType(scope.opt.type) }}
         </QItemSection>
         <QItemSection class="IHR_asn-element-name">
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 50178e7c..fdc330ba 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -483,16 +483,8 @@ watch(
     @filter="filter"
   >
     <template #append>
-      <div
-        v-if="!props.noCountry"
-        @click="showMap"
-      >
-        <QBtn
-          :color="label"
-          icon="fas fa-map"
-          flat
-          dense
-        />
+      <div v-if="!props.noCountry" @click="showMap">
+        <QBtn :color="label" icon="fas fa-map" flat dense />
         <QDialog v-model="showMapDialog">
           <WorldMap @country-selected="handleCountryClicked" />
         </QDialog>
@@ -501,27 +493,19 @@ watch(
         <div
           v-if="
             !loadingQueryAS &&
-              !loadingQueryPrefixes &&
-              !loadingQueryIXPs &&
-              !loadingQueryCountries &&
-              !loadingQueryASNames &&
-              !loadingQueryHostNames &&
-              !loadingQueryTags &&
-              !loadingQueryRanks
+            !loadingQueryPrefixes &&
+            !loadingQueryIXPs &&
+            !loadingQueryCountries &&
+            !loadingQueryASNames &&
+            !loadingQueryHostNames &&
+            !loadingQueryTags &&
+            !loadingQueryRanks
           "
         >
-          <QBtn
-            :color="label"
-            icon="fas fa-search"
-            flat
-            dense
-          />
+          <QBtn :color="label" icon="fas fa-search" flat dense />
         </div>
         <div v-else>
-          <QSpinner
-            :color="label"
-            size="0.82em"
-          />
+          <QSpinner :color="label" size="0.82em" />
         </div>
       </div>
     </template>
@@ -532,12 +516,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToAS(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          AS{{ scope.opt.value }}
-        </QItemSection>
+        <QItemSection side color="accent"> AS{{ scope.opt.value }} </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -547,12 +526,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToPrefix(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          Prefix
-        </QItemSection>
+        <QItemSection side color="accent"> Prefix </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -562,12 +536,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToIXP(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          IXP{{ scope.opt.value }}
-        </QItemSection>
+        <QItemSection side color="accent"> IXP{{ scope.opt.value }} </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -577,12 +546,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToCountry(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          Country
-        </QItemSection>
+        <QItemSection side color="accent"> Country </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -592,12 +556,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToHostName(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          Hostname
-        </QItemSection>
+        <QItemSection side color="accent"> Hostname </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -607,14 +566,7 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToTag(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-          &&
-          activate-search
-        >
-          Tag
-        </QItemSection>
+        <QItemSection side color="accent" && activate-search> Tag </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
@@ -624,20 +576,12 @@ watch(
         v-bind="scope.itemProps"
         @click="routeToRank(scope.opt.value)"
       >
-        <QItemSection
-          side
-          color="accent"
-        >
-          Rank
-        </QItemSection>
+        <QItemSection side color="accent"> Rank </QItemSection>
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
         </QItemSection>
       </QItem>
-      <QItem
-        v-if="scope.opt.type == 'Fail' && activateSearch"
-        v-bind="scope.itemProps"
-      >
+      <QItem v-if="scope.opt.type == 'Fail' && activateSearch" v-bind="scope.itemProps">
         <!-- <QItemSection side color="accent">Country</QItemSection> -->
         <QItemSection class="IHR_asn-element-name">
           {{ scope.opt.name }}
diff --git a/src/components/tables/AggregatedAlarmsTable.vue b/src/components/tables/AggregatedAlarmsTable.vue
index de192eb5..b1e86569 100644
--- a/src/components/tables/AggregatedAlarmsTable.vue
+++ b/src/components/tables/AggregatedAlarmsTable.vue
@@ -450,10 +450,7 @@ watch(
   >
     <template #body="props">
       <QTr :props="props">
-        <QTd
-          v-for="(column) in columns"
-          :key="column.name"
-        >
+        <QTd v-for="column in columns" :key="column.name">
           <div
             v-if="column.name.endsWith('overview')"
             :key="`${tableKeyCurrent}.${column.name}`"
@@ -461,10 +458,7 @@ watch(
           >
             <QToggle v-model="toggle[`${props.row.key_normalized}_${column.name}`]" />
           </div>
-          <div
-            v-else-if="column.name === tableKeyCurrent"
-            :style="{ 'text-align': column.align }"
-          >
+          <div v-else-if="column.name === tableKeyCurrent" :style="{ 'text-align': column.align }">
             <RouterLink
               :to="
                 Tr.i18nRoute({
@@ -524,34 +518,22 @@ watch(
             :style="{ 'text-align': column.align }"
           >
             <div>{{ alternativeASNKeySubtitle(props.row[column.name], column.label) }}</div>
-            <div
-              class="alternative_key_body"
-              v-html="props.row[column.name]"
-            />
+            <div class="alternative_key_body" v-html="props.row[column.name]" />
           </div>
-          <div
-            v-else
-            :style="{ 'text-align': column.align }"
-          >
+          <div v-else :style="{ 'text-align': column.align }">
             {{ column.format(props.row[column.name], props.row) }}
           </div>
         </QTd>
         <QTd
-          v-for="(aggregatedColumn) in aggregatedColumns"
+          v-for="aggregatedColumn in aggregatedColumns"
           :key="aggregatedColumn.name"
           :style="{ 'text-align': aggregatedColumn.align }"
         >
           <div>{{ aggregatedColumn.format(props.row[aggregatedColumn.name], props.row) }}</div>
         </QTd>
       </QTr>
-      <QTr
-        v-if="toggle[`${props.row.key_normalized}_overview`]"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          bordered
-        >
+      <QTr v-if="toggle[`${props.row.key_normalized}_overview`]" :props="props">
+        <QTd colspan="100%" bordered>
           <div>
             <div v-if="alternativeKey">
               <div class="row">
@@ -567,10 +549,7 @@ watch(
                         :max="maxTimeFormatted"
                       />
                     </div>
-                    <div
-                      class="col-auto"
-                      style="width: 40px"
-                    />
+                    <div class="col-auto" style="width: 40px" />
                     <div class="col">
                       <QInput
                         v-model="endTimeFormatted[props.row.key_normalized]"
@@ -582,10 +561,7 @@ watch(
                       />
                     </div>
                   </div>
-                  <div
-                    class="row"
-                    style="margin-top: 20px; margin-bottom: 10px"
-                  >
+                  <div class="row" style="margin-top: 20px; margin-bottom: 10px">
                     <div class="col-7 text-center">
                       <QBtn
                         color="primary"
@@ -737,21 +713,17 @@ watch(
           </div>
         </QTd>
       </QTr>
-      <QTr
-        v-if="toggle[`${props.row.key_normalized}_asn_overview`]"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          bordered
-        >
+      <QTr v-if="toggle[`${props.row.key_normalized}_asn_overview`]" :props="props">
+        <QTd colspan="100%" bordered>
           <div
             v-for="af in getOverviewIPAddressFamilies(props.row[`${tableKeyCurrent}_af`])"
             :key="af"
           >
             <div v-if="selectedTableAlarmType == 'hegemony'">
               <div style="text-align: center; font-size: 18px">
-                {{ `${props.row[`${tableKeyCurrent}`]} ${getColumnLabel('asn_overview')} IPv${af}` }}
+                {{
+                  `${props.row[`${tableKeyCurrent}`]} ${getColumnLabel('asn_overview')} IPv${af}`
+                }}
               </div>
               <AsInterdependenciesChart
                 :as-number="props.row.key_normalized"
@@ -824,14 +796,8 @@ watch(
           </div>
         </QTd>
       </QTr>
-      <QTr
-        v-if="toggle[`${props.row.key_normalized}_country_overview`]"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          bordered
-        >
+      <QTr v-if="toggle[`${props.row.key_normalized}_country_overview`]" :props="props">
+        <QTd colspan="100%" bordered>
           <div v-if="selectedTableDataSource == 'ioda'">
             <div style="text-align: center; font-size: 18px">
               {{ `${props.row[`${tableKeyCurrent}_country`]} Internet Overview` }}
diff --git a/src/components/tables/AsInterdependenciesTable.vue b/src/components/tables/AsInterdependenciesTable.vue
index 4a7df85f..25d60bcc 100644
--- a/src/components/tables/AsInterdependenciesTable.vue
+++ b/src/components/tables/AsInterdependenciesTable.vue
@@ -185,14 +185,8 @@ const getCalssByHegemony = (props) => {
           :class="col.name == 'hegemony' ? ['IHR_important-cell', getCalssByHegemony(props)] : ''"
         >
           <div v-if="col.name == 'direct'">
-            <QIcon
-              v-if="props.row.direct"
-              name="fas fa-check"
-            />
-            <QIcon
-              v-if="!props.row.direct"
-              name="fas fa-times"
-            />
+            <QIcon v-if="props.row.direct" name="fas fa-check" />
+            <QIcon v-if="!props.row.direct" name="fas fa-times" />
           </div>
           {{ col.format(col.field(props.row)) }}
         </QTd>
diff --git a/src/components/tables/BGPMessagesTable.vue b/src/components/tables/BGPMessagesTable.vue
index 58ae04c6..553b025d 100644
--- a/src/components/tables/BGPMessagesTable.vue
+++ b/src/components/tables/BGPMessagesTable.vue
@@ -126,31 +126,12 @@ watch(selectedPeersModel, () => {
     row-key="peer"
     selection="multiple"
   >
-    <template
-      v-if="props.filteredMessages.length !== 0"
-      #top-left
-    >
-      <QBtn
-        v-if="isLiveMode && isPlaying"
-        color="negative"
-        label="Live"
-      />
-      <QBtn
-        v-else
-        color="grey-9"
-        label="Go to Live"
-        @click="enableLiveMode"
-      />
+    <template v-if="props.filteredMessages.length !== 0" #top-left>
+      <QBtn v-if="isLiveMode && isPlaying" color="negative" label="Live" />
+      <QBtn v-else color="grey-9" label="Go to Live" @click="enableLiveMode" />
     </template>
     <template #top-right>
-      <QInput
-        v-model="search"
-        dense
-        outlined
-        debounce="300"
-        color="accent"
-        label="Search"
-      >
+      <QInput v-model="search" dense outlined debounce="300" color="accent" label="Search">
         <template #append>
           <QIcon name="search" />
         </template>
@@ -170,10 +151,7 @@ watch(selectedPeersModel, () => {
       <QTd :props="props">
         <span class="asn-list">
           <template v-if="props.row.path">
-            <span
-              v-for="(asn, index) in props.row.path"
-              :key="index"
-            >
+            <span v-for="(asn, index) in props.row.path" :key="index">
               <RouterLink
                 :to="Tr.i18nRoute({ name: 'network', params: { id: `AS${asn}` } })"
                 target="_blank"
diff --git a/src/components/tables/CountryHegemonyTable.vue b/src/components/tables/CountryHegemonyTable.vue
index 047adecb..732003fe 100644
--- a/src/components/tables/CountryHegemonyTable.vue
+++ b/src/components/tables/CountryHegemonyTable.vue
@@ -134,10 +134,7 @@ const getClassByHegemony = (hegemony) => {
     binary-state-sort
     flat
   >
-    <template
-      #header="props"
-      style="display: contents"
-    >
+    <template #header="props" style="display: contents">
       <QTr>
         <QTh colspan="2">
           <h3>Autonomous System</h3>
@@ -145,12 +142,7 @@ const getClassByHegemony = (hegemony) => {
         <QTh colspan="3">
           <h3>
             Population coverage
-            <QIcon
-              name="far fa-question-circle"
-              color="grey"
-              style="font-size: 0.9em"
-              right
-            />
+            <QIcon name="far fa-question-circle" color="grey" style="font-size: 0.9em" right />
             <QTooltip max-width="360px">
               <div
                 v-html="$t(`documentationPage.sections.countryasdependency.description.1.body`)"
@@ -161,12 +153,7 @@ const getClassByHegemony = (hegemony) => {
         <QTh colspan="1">
           <h3>
             AS coverage
-            <QIcon
-              name="far fa-question-circle"
-              color="grey"
-              style="font-size: 0.9em"
-              right
-            />
+            <QIcon name="far fa-question-circle" color="grey" style="font-size: 0.9em" right />
             <QTooltip max-width="360px">
               <div
                 v-html="$t(`documentationPage.sections.countryasdependency.description.2.body`)"
@@ -178,42 +165,16 @@ const getClassByHegemony = (hegemony) => {
       <QTr>
         <QTh />
         <QTh>
-          <QInput
-            v-model="tabFilter"
-            dense
-            debounce="300"
-            borderless
-            placeholder="Search"
-          >
+          <QInput v-model="tabFilter" dense debounce="300" borderless placeholder="Search">
             <template #prepend>
               <QIcon name="fas fa-search" />
             </template>
           </QInput>
         </QTh>
-        <QTh
-          key="allEyeball"
-          :props="props"
-        >
-          Total
-        </QTh>
-        <QTh
-          key="eyeball"
-          :props="props"
-        >
-          Direct
-        </QTh>
-        <QTh
-          key="transitingEyeball"
-          :props="props"
-        >
-          Indirect
-        </QTh>
-        <QTh
-          key="transitingAs"
-          :props="props"
-        >
-          Total
-        </QTh>
+        <QTh key="allEyeball" :props="props"> Total </QTh>
+        <QTh key="eyeball" :props="props"> Direct </QTh>
+        <QTh key="transitingEyeball" :props="props"> Indirect </QTh>
+        <QTh key="transitingAs" :props="props"> Total </QTh>
       </QTr>
     </template>
     <template #body="props">
diff --git a/src/components/tables/DelayAlarmsTable.vue b/src/components/tables/DelayAlarmsTable.vue
index d593444f..455df1cb 100644
--- a/src/components/tables/DelayAlarmsTable.vue
+++ b/src/components/tables/DelayAlarmsTable.vue
@@ -212,10 +212,7 @@ onMounted(() => {
         <QTd auto-width>
           <QToggle v-model="props.expand" />
         </QTd>
-        <QTd
-          key="asn"
-          :props="props"
-        >
+        <QTd key="asn" :props="props">
           <RouterLink
             v-for="(asn, index) in props.row.asn"
             :key="asn"
@@ -233,10 +230,7 @@ onMounted(() => {
             }}
           </RouterLink>
         </QTd>
-        <QTd
-          key="link"
-          :props="props"
-        >
+        <QTd key="link" :props="props">
           <a href="javascript:void(0)">
             {{ props.row.link[0] }}
             <QPopupProxy>
@@ -257,13 +251,8 @@ onMounted(() => {
             </QPopupProxy>
           </a>
         </QTd>
-        <QTd
-          key="delayChange"
-          :props="props"
-        >
-          {{
-            (props.row.diffmedian / props.row.nbalarms).toFixed(2)
-          }}
+        <QTd key="delayChange" :props="props">
+          {{ (props.row.diffmedian / props.row.nbalarms).toFixed(2) }}
         </QTd>
         <QTd
           key="deviation"
@@ -275,25 +264,13 @@ onMounted(() => {
         >
           {{ (props.row.deviation / props.row.nbalarms).toFixed(2) }}
         </QTd>
-        <QTd
-          key="nbprobes"
-          :props="props"
-        >
+        <QTd key="nbprobes" :props="props">
           {{ Math.floor(props.row.nbprobes / props.row.nbalarms) }}
         </QTd>
       </QTr>
-      <QTr
-        v-if="props.expand"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          class="IHR_nohover"
-          bordered
-        >
-          <div class="text-h3 text-center">
-            RTTs of traceroutes crossing reported link
-          </div>
+      <QTr v-if="props.expand" :props="props">
+        <QTd colspan="100%" class="IHR_nohover" bordered>
+          <div class="text-h3 text-center">RTTs of traceroutes crossing reported link</div>
           <div class="IHR_side_borders">
             <Latencymon
               :start-time="dateHourShift(props.row.starttime, -6)"
@@ -350,7 +327,12 @@ onMounted(() => {
   margin: 0px;
   padding-bottom: 10px;
 }
-.IHR_reverse-dns-ip-improved > div:first-child > .box-content > div:last-child > .res_info_holder > a {
+.IHR_reverse-dns-ip-improved
+  > div:first-child
+  > .box-content
+  > div:last-child
+  > .res_info_holder
+  > a {
   color: #405057 !important;
 }
 </style>
diff --git a/src/components/tables/DiscoAlarmsTable.vue b/src/components/tables/DiscoAlarmsTable.vue
index 238c4eb9..424796f4 100644
--- a/src/components/tables/DiscoAlarmsTable.vue
+++ b/src/components/tables/DiscoAlarmsTable.vue
@@ -143,10 +143,7 @@ const msmPrbIds = (probes) => {
         <QTd auto-width>
           <QToggle v-model="props.expand" />
         </QTd>
-        <QTd
-          key="location"
-          align
-        >
+        <QTd key="location" align>
           <div v-if="props.row.streamtype == 'asn'">
             <RouterLink
               :to="Tr.i18nRoute({ name: 'network', params: { id: 'AS' + props.row.streamname } })"
@@ -171,18 +168,9 @@ const msmPrbIds = (probes) => {
           {{ props.row.nbdiscoprobes }}
         </QTd>
       </QTr>
-      <QTr
-        v-if="props.expand"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          class="IHR_nohover"
-          bordered
-        >
-          <div class="text-h3 text-center">
-            Pings from disconnected probes
-          </div>
+      <QTr v-if="props.expand" :props="props">
+        <QTd colspan="100%" class="IHR_nohover" bordered>
+          <div class="text-h3 text-center">Pings from disconnected probes</div>
           <div class="IHR_side_borders">
             <Latencymon
               :start-time="
diff --git a/src/components/tables/ForwardingAlarmsTable.vue b/src/components/tables/ForwardingAlarmsTable.vue
index 4b251d31..438d9280 100644
--- a/src/components/tables/ForwardingAlarmsTable.vue
+++ b/src/components/tables/ForwardingAlarmsTable.vue
@@ -101,56 +101,31 @@ const columns = ref([
         <QTd auto-width>
           <QToggle v-model="props.expand" />
         </QTd>
-        <QTd
-          key="reportedIp"
-          :props="props"
-        >
+        <QTd key="reportedIp" :props="props">
           <a href="javascript:void(0)">
             {{ props.row.ip }}
             <QPopupProxy>
-              <ReverseDnsIp
-                :ip="props.row.ip"
-                class="IHR_reverse-dns-ip-improved"
-              />
+              <ReverseDnsIp :ip="props.row.ip" class="IHR_reverse-dns-ip-improved" />
             </QPopupProxy>
           </a>
         </QTd>
-        <QTd
-          key="usualPrecedingIp"
-          :props="props"
-        >
+        <QTd key="usualPrecedingIp" :props="props">
           <a href="javascript:void(0)">
             {{ props.row.previoushop }}
             <QPopupProxy>
-              <ReverseDnsIp
-                :ip="props.row.previoushop"
-                class="IHR_reverse-dns-ip-improved"
-              />
+              <ReverseDnsIp :ip="props.row.previoushop" class="IHR_reverse-dns-ip-improved" />
             </QPopupProxy>
           </a>
         </QTd>
-        <QTd
-          key="correlation"
-          :props="props"
-        >
+        <QTd key="correlation" :props="props">
           {{ props.row.correlation }}
         </QTd>
-        <QTd
-          key="responsibility"
-          :props="props"
-        >
+        <QTd key="responsibility" :props="props">
           {{ props.row.responsibility }}
         </QTd>
       </QTr>
-      <QTr
-        v-if="props.expand"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          class="IHR_nohover"
-          bordered
-        >
+      <QTr v-if="props.expand" :props="props">
+        <QTd colspan="100%" class="IHR_nohover" bordered>
           <div class="IHR_side_borders">
             <Tracemon
               :start-time="dateHourShift(props.row.timebin, -1)"
diff --git a/src/components/tables/IypGenericTable.vue b/src/components/tables/IypGenericTable.vue
index cbeab683..df9fb963 100644
--- a/src/components/tables/IypGenericTable.vue
+++ b/src/components/tables/IypGenericTable.vue
@@ -314,10 +314,7 @@ onMounted(() => {
       class="IHR_loading-spinner"
       style="z-index: 1000"
     >
-      <QSpinner
-        color="secondary"
-        size="15em"
-      />
+      <QSpinner color="secondary" size="15em" />
     </div>
     <div>
       <QTabs
@@ -328,78 +325,36 @@ onMounted(() => {
         align="justify"
         narrow-indicator
       >
-        <QTab
-          name="chart"
-          label="CHART"
-          :disable="slotLength <= 0 ? true : false"
-        />
-        <QTab
-          name="data"
-          label="DATA"
-        />
-        <QTab
-          name="api"
-          label="CYPHER QUERY"
-        />
-        <QTab
-          name="metadata"
-          label="METADATA"
-        />
+        <QTab name="chart" label="CHART" :disable="slotLength <= 0 ? true : false" />
+        <QTab name="data" label="DATA" />
+        <QTab name="api" label="CYPHER QUERY" />
+        <QTab name="metadata" label="METADATA" />
       </QTabs>
-      <QTabPanels
-        v-model="activeTab"
-        animated
-        @transition="transition"
-      >
+      <QTabPanels v-model="activeTab" animated @transition="transition">
         <QTabPanel name="chart">
           <div id="chartContainer">
             <slot />
           </div>
         </QTabPanel>
         <QTabPanel name="data">
-          <QTable
-            :rows="data"
-            :columns="columns"
-            :filter="filter"
-            :pagination="pagination"
-            flat
-          >
+          <QTable :rows="data" :columns="columns" :filter="filter" :pagination="pagination" flat>
             <template #header-cell="props">
               <QTh :props="props">
-                <QTooltip
-                  v-if="props.col.description"
-                  anchor="bottom start"
-                  self="bottom start"
-                >
-                  {{
-                    props.col.description
-                  }}
+                <QTooltip v-if="props.col.description" anchor="bottom start" self="bottom start">
+                  {{ props.col.description }}
                 </QTooltip>
                 {{ props.col.label }}
               </QTh>
             </template>
             <template #top-right>
-              <QInput
-                v-model="filter"
-                debounce="300"
-                placeholder="Search"
-              >
+              <QInput v-model="filter" debounce="300" placeholder="Search">
                 <template #append>
                   <QIcon name="search" />
-                  <QTooltip class="bg-accent">
-                    Search in the table
-                  </QTooltip>
+                  <QTooltip class="bg-accent"> Search in the table </QTooltip>
                 </template>
               </QInput>
-              <QBtn
-                flat
-                rounded
-                icon-right="archive"
-                @click="exportTable"
-              >
-                <QTooltip class="bg-accent">
-                  Download CSV file
-                </QTooltip>
+              <QBtn flat rounded icon-right="archive" @click="exportTable">
+                <QTooltip class="bg-accent"> Download CSV file </QTooltip>
               </QBtn>
             </template>
             <template #body="props">
@@ -417,80 +372,48 @@ onMounted(() => {
             </template>
           </QTable>
         </QTabPanel>
-        <QTabPanel
-          name="api"
-          class="text-left q-pa-lg"
-          light
-        >
-          <QBtn
-            no-caps
-            dense
-            flat
-            @click="copyToClipboard(cypherQuery)"
-          >
+        <QTabPanel name="api" class="text-left q-pa-lg" light>
+          <QBtn no-caps dense flat @click="copyToClipboard(cypherQuery)">
             <code>{{ cypherQuery }}</code>
             <QTooltip>Click to copy</QTooltip>
           </QBtn>
           <div>
-            <br>IYP Public Instance Link:
+            <br />IYP Public Instance Link:
             <a href="https://iyp.iijlab.net/">https://iyp.iijlab.net/</a>
           </div>
         </QTabPanel>
         <QTabPanel name="metadata">
-          <QMarkupTable
-            v-if="!loadingStatus"
-            flat
-            bordered
-          >
+          <QMarkupTable v-if="!loadingStatus" flat bordered>
             <thead>
               <tr>
-                <th class="text-left">
-                  Data Source
-                </th>
-                <th class="text-left">
-                  Fetched Time
-                </th>
-                <th class="text-left">
-                  Modification Time
-                </th>
-                <th class="text-left">
-                  URL
-                </th>
+                <th class="text-left">Data Source</th>
+                <th class="text-left">Fetched Time</th>
+                <th class="text-left">Modification Time</th>
+                <th class="text-left">URL</th>
               </tr>
             </thead>
             <tbody>
-              <tr
-                v-for="key in Object.keys(metadata)"
-                :key="key"
-              >
+              <tr v-for="key in Object.keys(metadata)" :key="key">
                 <td class="text-left">
                   <a
                     v-if="metadata[key].reference_url_info[0]"
                     :href="metadata[key].reference_url_info[0]"
-                  >{{ key }}</a>
+                    >{{ key }}</a
+                  >
                   <span v-else>{{ key }}</span>
                 </td>
                 <td class="text-left">
-                  <div
-                    v-for="time in metadata[key].reference_time_fetch"
-                    :key="time"
-                  >
+                  <div v-for="time in metadata[key].reference_time_fetch" :key="time">
                     {{ time }}
                   </div>
                 </td>
                 <td class="text-left">
-                  <div
-                    v-for="time in metadata[key].reference_time_modification"
-                    :key="time"
-                  >
+                  <div v-for="time in metadata[key].reference_time_modification" :key="time">
                     {{ time }}
                   </div>
                 </td>
                 <td class="text-left">
-                  <div
-                    v-for="url in metadata[key].reference_url_data"
-                    :key="url"
-                  >
+                  <div v-for="url in metadata[key].reference_url_data" :key="url">
                     <a :href="url">{{ url }}</a>
                   </div>
                 </td>
diff --git a/src/components/tables/MetisTable.vue b/src/components/tables/MetisTable.vue
index 99e6738b..da417280 100644
--- a/src/components/tables/MetisTable.vue
+++ b/src/components/tables/MetisTable.vue
@@ -104,25 +104,15 @@ const exportTable = () => {
     flat
   >
     <template #top>
-      <div class="q-table__title">
-        Selected ASes
-      </div>
+      <div class="q-table__title">Selected ASes</div>
       <QSpace />
-      <QInput
-        v-model="tabFilter"
-        debounce="300"
-        placeholder="Search"
-      >
+      <QInput v-model="tabFilter" debounce="300" placeholder="Search">
         <template #prepend>
           <QIcon name="search" />
         </template>
       </QInput>
       <QSpace />
-      <QBtn
-        color="secondary"
-        label="Export to CSV"
-        @click="exportTable"
-      />
+      <QBtn color="secondary" label="Export to CSV" @click="exportTable" />
     </template>
   </QTable>
 </template>
diff --git a/src/components/tables/NetworkDelayAlarmsTable.vue b/src/components/tables/NetworkDelayAlarmsTable.vue
index f4802c73..e8b0b675 100644
--- a/src/components/tables/NetworkDelayAlarmsTable.vue
+++ b/src/components/tables/NetworkDelayAlarmsTable.vue
@@ -207,10 +207,7 @@ onMounted(() => {
         <QTd auto-width>
           <QToggle v-model="props.expand" />
         </QTd>
-        <QTd
-          key="asNumber"
-          align
-        >
+        <QTd key="asNumber" align>
           <RouterLink
             :to="
               Tr.i18nRoute({
@@ -222,10 +219,7 @@ onMounted(() => {
             {{ ihr_api.ihr_NumberToAsOrIxp(props.row.asNumber) }}
           </RouterLink>
         </QTd>
-        <QTd
-          key="destinations"
-          class="IHR_ndelay_table_cell"
-        >
+        <QTd key="destinations" class="IHR_ndelay_table_cell">
           <div>{{ destinationsSubtitle(props.row.endpoints) }}</div>
           <div class="IHR_ndelay_destinations">
             {{ destinationsBody(props.row.endpoints) }}
@@ -238,15 +232,8 @@ onMounted(() => {
           {{ (props.row.cumdev / props.row.nbalarms).toFixed(2) }}
         </QTd>
       </QTr>
-      <QTr
-        v-if="props.expand"
-        :props="props"
-      >
-        <QTd
-          colspan="100%"
-          class="IHR_nohover"
-          bordered
-        >
+      <QTr v-if="props.expand" :props="props">
+        <QTd colspan="100%" class="IHR_nohover" bordered>
           <div class="IHR_side_borders">
             <NetworkDelayChart
               :start-time="startTime"
@@ -269,7 +256,7 @@ onMounted(() => {
 }
 .IHR_ndelay_destinations {
   text-overflow: ellipsis;
-/* Required for text-overflow to do anything */
+  /* Required for text-overflow to do anything */
   white-space: nowrap;
   overflow: hidden;
   font-style: italic;
diff --git a/src/components/tables/NetworkDelayTable.vue b/src/components/tables/NetworkDelayTable.vue
index 6133dd9c..5c7cf6ee 100644
--- a/src/components/tables/NetworkDelayTable.vue
+++ b/src/components/tables/NetworkDelayTable.vue
@@ -135,41 +135,22 @@ onMounted(() => {
   >
     <template #body="props">
       <QTr :props="props">
-        <QTd
-          v-if="showStart"
-          key="startpoint"
-          :props="props"
-        >
+        <QTd v-if="showStart" key="startpoint" :props="props">
           {{ prettyName(getCellValue(props, 'startpoint')) }}
         </QTd>
-        <QTd
-          key="endpoint"
-          :props="props"
-        >
+        <QTd key="endpoint" :props="props">
           {{ prettyName(getCellValue(props, 'endpoint')) }}
         </QTd>
-        <QTd
-          key="median"
-          :props="props"
-        >
+        <QTd key="median" :props="props">
           {{ getCellValue(props, 'median') }}
         </QTd>
-        <QTd
-          key="nbtracks"
-          :props="props"
-        >
+        <QTd key="nbtracks" :props="props">
           {{ getCellValue(props, 'nbtracks') }}
         </QTd>
-        <QTd
-          key="realrtt"
-          :props="props"
-        >
+        <QTd key="realrtt" :props="props">
           {{ getCellValue(props, 'realrtt') }}
         </QTd>
-        <QTd
-          key="nbprobes"
-          :props="props"
-        >
+        <QTd key="nbprobes" :props="props">
           {{ getCellValue(props, 'nbprobes') }}
         </QTd>
       </QTr>
diff --git a/src/components/tables/PrefixHegemonyTable.vue b/src/components/tables/PrefixHegemonyTable.vue
index 622e5684..0d2d7c30 100644
--- a/src/components/tables/PrefixHegemonyTable.vue
+++ b/src/components/tables/PrefixHegemonyTable.vue
@@ -179,11 +179,7 @@ const simpleDependenciesFormat = (val) => {
 <template>
   <div>
     <div>
-      <QInput
-        v-model="tabFilter"
-        debounce="300"
-        placeholder="Search"
-      >
+      <QInput v-model="tabFilter" debounce="300" placeholder="Search">
         <template #prepend>
           <QIcon name="fas fa-search" />
         </template>
@@ -201,10 +197,7 @@ const simpleDependenciesFormat = (val) => {
       binary-state-sort
       flat
     >
-      <template
-        #header="props"
-        style="display: contents"
-      >
+      <template #header="props" style="display: contents">
         <QTr>
           <QTh :colspan="showCountry ? 3 : 2">
             <h3>Route</h3>
@@ -212,12 +205,7 @@ const simpleDependenciesFormat = (val) => {
           <QTh colspan="5">
             <h3>
               Status
-              <QIcon
-                name="far fa-question-circle"
-                color="grey"
-                style="font-size: 0.9em"
-                right
-              />
+              <QIcon name="far fa-question-circle" color="grey" style="font-size: 0.9em" right />
               <QTooltip max-width="360px">
                 <div
                   v-html="$t(`documentationPage.sections.prefixasdependency.description.1.body`)"
@@ -228,12 +216,7 @@ const simpleDependenciesFormat = (val) => {
           <QTh colspan="2">
             <h3>
               AS dependency
-              <QIcon
-                name="far fa-question-circle"
-                color="grey"
-                style="font-size: 0.9em"
-                right
-              />
+              <QIcon name="far fa-question-circle" color="grey" style="font-size: 0.9em" right />
               <QTooltip max-width="360px">
                 <div
                   v-html="$t(`documentationPage.sections.prefixasdependency.description.2.body`)"
@@ -243,60 +226,15 @@ const simpleDependenciesFormat = (val) => {
           </QTh>
         </QTr>
         <QTr>
-          <QTh
-            key="country"
-            :props="props"
-          >
-            Country
-          </QTh>
-          <QTh
-            key="originASN"
-            :props="props"
-          >
-            Origin ASN
-          </QTh>
-          <QTh
-            key="prefix"
-            :props="props"
-          >
-            Prefix
-          </QTh>
-          <QTh
-            key="rpkiStatus"
-            :props="props"
-          >
-            RPKI
-          </QTh>
-          <QTh
-            key="irrStatus"
-            :props="props"
-          >
-            IRR
-          </QTh>
-          <QTh
-            key="delegatedPrefixStatus"
-            :props="props"
-          >
-            Prefix
-          </QTh>
-          <QTh
-            key="delegatedASNStatus"
-            :props="props"
-          >
-            Origin ASN
-          </QTh>
-          <QTh
-            key="visibility"
-            :props="props"
-          >
-            Visibility
-          </QTh>
-          <QTh
-            key="dependencies"
-            :props="props"
-          >
-            Main Transits
-          </QTh>
+          <QTh key="country" :props="props"> Country </QTh>
+          <QTh key="originASN" :props="props"> Origin ASN </QTh>
+          <QTh key="prefix" :props="props"> Prefix </QTh>
+          <QTh key="rpkiStatus" :props="props"> RPKI </QTh>
+          <QTh key="irrStatus" :props="props"> IRR </QTh>
+          <QTh key="delegatedPrefixStatus" :props="props"> Prefix </QTh>
+          <QTh key="delegatedASNStatus" :props="props"> Origin ASN </QTh>
+          <QTh key="visibility" :props="props"> Visibility </QTh>
+          <QTh key="dependencies" :props="props"> Main Transits </QTh>
         </QTr>
       </template>
 
@@ -349,11 +287,7 @@ const simpleDependenciesFormat = (val) => {
 
       <template #body-cell-dependencies="props">
         <QTd :props="props">
-          <span
-            v-for="dep in sorted(props.row.dependencies)"
-            :key="dep.prefix"
-            class="comma"
-          >
+          <span v-for="dep in sorted(props.row.dependencies)" :key="dep.prefix" class="comma">
             <RouterLink
               class="IHR_delikify"
               :to="
@@ -393,39 +327,20 @@ const simpleDependenciesFormat = (val) => {
 
       <template #body-cell-rpkiStatus="props">
         <QTd :props="props">
-          <span
-            v-if="props.row.rpki_status == 'Invalid'"
-            justify
-          >
-            <QIcon
-              name="fas fa-times"
-              color="red"
-              left
-            />
+          <span v-if="props.row.rpki_status == 'Invalid'" justify>
+            <QIcon name="fas fa-times" color="red" left />
             {{ props.row.rpki_status }}
           </span>
           <span v-else-if="props.row.rpki_status == 'Invalid,more-specific'">
-            <QIcon
-              name="fas fa-times"
-              color="red"
-              left
-            />
+            <QIcon name="fas fa-times" color="red" left />
             Invalid (more specific)
           </span>
           <span v-else-if="props.row.rpki_status.startsWith('Valid')">
-            <QIcon
-              name="fas fa-check"
-              color="green"
-              left
-            />
+            <QIcon name="fas fa-check" color="green" left />
             {{ props.row.rpki_status }}
           </span>
           <span v-else>
-            <QIcon
-              name="fas fa-question"
-              color="grey"
-              left
-            />
+            <QIcon name="fas fa-question" color="grey" left />
             {{ props.row.rpki_status }}
           </span>
         </QTd>
@@ -434,35 +349,19 @@ const simpleDependenciesFormat = (val) => {
       <template #body-cell-irrStatus="props">
         <QTd :props="props">
           <span v-if="props.row.irr_status == 'Invalid'">
-            <QIcon
-              name="fas fa-times"
-              color="red"
-              left
-            />
+            <QIcon name="fas fa-times" color="red" left />
             {{ props.row.irr_status }}
           </span>
           <span v-else-if="props.row.irr_status == 'Invalid,more-specific'">
-            <QIcon
-              name="fas fa-times"
-              color="orange"
-              left
-            />
+            <QIcon name="fas fa-times" color="orange" left />
             Invalid (more specific)
           </span>
           <span v-else-if="props.row.irr_status.startsWith('Valid')">
-            <QIcon
-              name="fas fa-check"
-              color="green"
-              left
-            />
+            <QIcon name="fas fa-check" color="green" left />
             {{ props.row.irr_status }}
           </span>
           <span v-else>
-            <QIcon
-              name="fas fa-question"
-              color="grey"
-              left
-            />
+            <QIcon name="fas fa-question" color="grey" left />
             {{ props.row.irr_status }}
           </span>
         </QTd>
@@ -477,27 +376,15 @@ const simpleDependenciesFormat = (val) => {
             "
             color="red"
           >
-            <QIcon
-              name="fas fa-times"
-              color="red"
-              left
-            />
+            <QIcon name="fas fa-times" color="red" left />
             {{ props.row.delegated_prefix_status }}
           </span>
           <span v-else-if="props.row.delegated_prefix_status == 'assigned'">
-            <QIcon
-              name="fas fa-check"
-              color="green"
-              left
-            />
+            <QIcon name="fas fa-check" color="green" left />
             {{ props.row.delegated_prefix_status }}
           </span>
           <span v-else>
-            <QIcon
-              name="fas fa-question"
-              color="grey"
-              left
-            />
+            <QIcon name="fas fa-question" color="grey" left />
             {{ props.row.delegated_prefix_status }}
           </span>
         </QTd>
@@ -512,27 +399,15 @@ const simpleDependenciesFormat = (val) => {
             "
             color="red"
           >
-            <QIcon
-              name="fas fa-times"
-              color="red"
-              left
-            />
+            <QIcon name="fas fa-times" color="red" left />
             {{ props.row.delegated_asn_status }}
           </span>
           <span v-else-if="props.row.delegated_asn_status == 'assigned'">
-            <QIcon
-              name="fas fa-check"
-              color="green"
-              left
-            />
+            <QIcon name="fas fa-check" color="green" left />
             {{ props.row.delegated_asn_status }}
           </span>
           <span v-else>
-            <QIcon
-              name="fas fa-question"
-              color="grey"
-              left
-            />
+            <QIcon name="fas fa-question" color="grey" left />
             {{ props.row.delegated_asn_status }}
           </span>
         </QTd>
@@ -543,6 +418,6 @@ const simpleDependenciesFormat = (val) => {
 
 <style>
 .comma:not(:empty) ~ .comma:not(:empty):before {
-  content: ", ";
+  content: ', ';
 }
 </style>
diff --git a/src/components/tables/PrefixHegemonyTableStats.vue b/src/components/tables/PrefixHegemonyTableStats.vue
index 75160f5d..fda0a2d4 100644
--- a/src/components/tables/PrefixHegemonyTableStats.vue
+++ b/src/components/tables/PrefixHegemonyTableStats.vue
@@ -120,17 +120,13 @@ const getClassByHegemony = (hegemony) => {
 <template>
   <div>
     <div>
-      <QInput
-        v-model="tabFilter"
-        debounce="300"
-        placeholder="Search"
-      >
+      <QInput v-model="tabFilter" debounce="300" placeholder="Search">
         <template #prepend>
           <QIcon name="fas fa-search" />
         </template>
       </QInput>
     </div>
-    <br>
+    <br />
     <QTable
       :rows="rows"
       :columns="columns"
@@ -145,36 +141,13 @@ const getClassByHegemony = (hegemony) => {
       <template #header="props">
         <div style="display: contents">
           <QTr>
-            <q-th
-              key="ASN"
-              :props="props"
-            >
-              ASN
-            </q-th>
-            <q-th
-              key="ASName"
-              :props="props"
-            >
-              Name
-            </q-th>
-            <q-th
-              key="invalid"
-              :props="props"
-            >
+            <q-th key="ASN" :props="props"> ASN </q-th>
+            <q-th key="ASName" :props="props"> Name </q-th>
+            <q-th key="invalid" :props="props">
               {{ columnName }}
             </q-th>
-            <q-th
-              key="specific"
-              :props="props"
-            >
-              {{ columnName }} (more specific)
-            </q-th>
-            <q-th
-              key="total"
-              :props="props"
-            >
-              Total
-            </q-th>
+            <q-th key="specific" :props="props"> {{ columnName }} (more specific) </q-th>
+            <q-th key="total" :props="props"> Total </q-th>
           </QTr>
         </div>
       </template>
@@ -231,6 +204,6 @@ const getClassByHegemony = (hegemony) => {
 
 <style>
 .comma:not(:empty) ~ .comma:not(:empty):before {
-  content: ", ";
+  content: ', ';
 }
 </style>
diff --git a/src/components/tables/TracerouteDestinationsTable.vue b/src/components/tables/TracerouteDestinationsTable.vue
index 924f3ee9..ee34f212 100644
--- a/src/components/tables/TracerouteDestinationsTable.vue
+++ b/src/components/tables/TracerouteDestinationsTable.vue
@@ -88,19 +88,10 @@ watch(selectDestinationsModel, () => {
     :disable="Object.keys(nodes).length < 1"
     @input="emit('loadMeasurementOnSearchQuery')"
   />
-  <QTable
-    :rows="filteredDestinationRows"
-    :columns="destinationColumns"
-    row-key="destination"
-    flat
-  >
+  <QTable :rows="filteredDestinationRows" :columns="destinationColumns" row-key="destination" flat>
     <template #header="props">
       <QTr :props="props">
-        <QTd
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props.colProps"
-        >
+        <QTd v-for="col in props.cols" :key="col.name" :props="props.colProps">
           <template v-if="col.name === 'destination'">
             <QCheckbox
               v-model="selectAllDestinationsModel"
diff --git a/src/components/tables/TracerouteProbesTable.vue b/src/components/tables/TracerouteProbesTable.vue
index be94c531..34008919 100644
--- a/src/components/tables/TracerouteProbesTable.vue
+++ b/src/components/tables/TracerouteProbesTable.vue
@@ -83,19 +83,10 @@ watch(selectedProbesModel, () => {
     :disable="Object.keys(nodes).length < 1"
     @input="emit('loadMeasurementOnSearchQuery')"
   />
-  <QTable
-    :rows="paginatedProbes"
-    :columns="columns"
-    row-key="probe"
-    flat
-  >
+  <QTable :rows="paginatedProbes" :columns="columns" row-key="probe" flat>
     <template #header="props">
       <QTr :props="props">
-        <QTd
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props.colProps"
-        >
+        <QTd v-for="col in props.cols" :key="col.name" :props="props.colProps">
           <template v-if="col.name === 'probe'">
             <QCheckbox
               v-model="selectAllProbes"
diff --git a/src/views/BGPMonitor.vue b/src/views/BGPMonitor.vue
index ae0ac3c6..4b58f0bd 100644
--- a/src/views/BGPMonitor.vue
+++ b/src/views/BGPMonitor.vue
@@ -378,9 +378,7 @@ onMounted(() => {
 
 <template>
   <div class="IHR_char-container">
-    <h1 class="text-center q-pa-xl">
-      Real-Time BGP Monitor
-    </h1>
+    <h1 class="text-center q-pa-xl">Real-Time BGP Monitor</h1>
     <div class="controls justify-center q-pa-md flex">
       <QInput
         v-model="params.prefix"
@@ -422,12 +420,7 @@ onMounted(() => {
           :disable="disableButton || params.prefix === ''"
           @click="toggleConnection"
         />
-        <QBtn
-          color="negative"
-          :label="'Reset'"
-          :disable="isPlaying"
-          @click="resetData"
-        />
+        <QBtn color="negative" :label="'Reset'" :disable="isPlaying" @click="resetData" />
       </div>
       <div class="stats">
         <span>Displaying Unique Peer messages: {{ filteredMessages.length }}</span>
@@ -490,9 +483,7 @@ onMounted(() => {
     <QDialog v-model="isWsDisconnected">
       <QCard style="width: 1000px; height: auto">
         <QCardSection>
-          <div class="text-h6">
-            Failed to connect to the server.
-          </div>
+          <div class="text-h6">Failed to connect to the server.</div>
         </QCardSection>
         <QCardSection class="q-pt-none">
           <p>
@@ -502,12 +493,7 @@ onMounted(() => {
           </p>
         </QCardSection>
         <QCardActions align="right">
-          <QBtn
-            v-close-popup
-            flat
-            label="Close"
-            color="primary"
-          />
+          <QBtn v-close-popup flat label="Close" color="primary" />
         </QCardActions>
       </QCard>
     </QDialog>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 6a6c983e..edc5d156 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -6,10 +6,9 @@
       <h1>Feedback</h1>
       <p class="IHR_description">
         Please submit bug reports and feature requests on Github:
-        <a
-          href="https://github.com/InternetHealthReport/ihr-website/issues"
-          target="_blank"
-        >https://github.com/InternetHealthReport/ihr-website/issues</a>
+        <a href="https://github.com/InternetHealthReport/ihr-website/issues" target="_blank"
+          >https://github.com/InternetHealthReport/ihr-website/issues</a
+        >
       </p>
       <h1>Others</h1>
       <p>
diff --git a/src/views/Corona.vue b/src/views/Corona.vue
index 133898b6..2c2b4805 100644
--- a/src/views/Corona.vue
+++ b/src/views/Corona.vue
@@ -101,14 +101,9 @@ watch(selected, (newValue) => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer">
     <div>
-      <h1 class="text-center">
-        Network Delays During National Lockdowns
-      </h1>
+      <h1 class="text-center">Network Delays During National Lockdowns</h1>
 
       <div class="row justify-center">
         <div class="IHR_description q-pa-lg">
@@ -117,7 +112,8 @@ watch(selected, (newValue) => {
             <a
               href="https://labs.ripe.net/Members/becha/hackathons-in-the-time-of-corona"
               targeet="_blank"
-            >RIPE Hackathon on the health of the Internet during the COVID-19 crisis</a>, we hacked this experimental interface to look at network delays during national
+              >RIPE Hackathon on the health of the Internet during the COVID-19 crisis</a
+            >, we hacked this experimental interface to look at network delays during national
             lockdowns. This is an attempt to monitor and study congestion that could occur at large
             eyeball networks during mass quarantines.
           </p>
@@ -129,10 +125,7 @@ watch(selected, (newValue) => {
           </p>
           <p>
             Displayed delays are computed from
-            <a
-              href="https://atlas.ripe.net/"
-              target="_blank"
-            >RIPE Atlas</a> traceroutes towards
+            <a href="https://atlas.ripe.net/" target="_blank">RIPE Atlas</a> traceroutes towards
             Google DNS, the networks' main upstream providers, and, for European countries, two
             large IXPs (AMS-IX and DE-CIX), and the E-root DNS server for other countries. See also
             our
@@ -143,40 +136,28 @@ watch(selected, (newValue) => {
             <a
               href="https://labs.ripe.net/Members/romain_fontugne/network-delays-in-times-of-corona"
               target="_blank"
-            >RIPE Labs article</a>.
+              >RIPE Labs article</a
+            >.
           </p>
           <p>Be patient. Loading all graphs may take some time for certain countries.</p>
         </div>
       </div>
       <div class="row justify-center box_corona">
         <div class="col-3">
-          <QSelect
-            v-model="selected"
-            :options="selection"
-            label="Select a country"
-          />
+          <QSelect v-model="selected" :options="selection" label="Select a country" />
         </div>
       </div>
       <div class="row toolbox">
         <div>
           <h3>Toolbox</h3>
-          <QToggle
-            v-model="searchBar"
-            label="Add more destination networks"
-          />
+          <QToggle v-model="searchBar" label="Add more destination networks" />
         </div>
       </div>
       <div v-if="selected" />
-      <div
-        v-for="asn in asns"
-        :key="`${asn.name}-${asn.as}`"
-      >
+      <div v-for="asn in asns" :key="`${asn.name}-${asn.as}`">
         <div class="row">
           <div class="col-12 text-center q-pa-md">
-            <div
-              :id="asn.as"
-              class="IHR_anchor"
-            />
+            <div :id="asn.as" class="IHR_anchor" />
             <h2>{{ asn.name }} (AS{{ asn.as }})</h2>
           </div>
           <div class="column_corona">
@@ -192,9 +173,7 @@ watch(selected, (newValue) => {
               :search-bar="searchBar"
               @max-value="updateYaxis"
             />
-            <p class="center">
-              One month before Lockdown
-            </p>
+            <p class="center">One month before Lockdown</p>
           </div>
           <div class="column_corona">
             <NetworkDelayChart
@@ -209,9 +188,7 @@ watch(selected, (newValue) => {
               :search-bar="searchBar"
               @max-value="updateYaxis"
             />
-            <p class="center">
-              Lockdown({{ countriesInfo[selected['value']].start }})
-            </p>
+            <p class="center">Lockdown({{ countriesInfo[selected['value']].start }})</p>
           </div>
           <div class="column_corona">
             <NetworkDelayChart
@@ -226,9 +203,7 @@ watch(selected, (newValue) => {
               :search-bar="searchBar"
               @max-value="updateYaxis"
             />
-            <p class="center">
-              Latest
-            </p>
+            <p class="center">Latest</p>
           </div>
         </div>
       </div>
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index 06da3b5f..daeec60e 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -31,19 +31,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div v-if="route.params.cc">
       <Country v-if="countryString" />
     </div>
     <div v-else>
       <div>
-        <h1 class="text-center q-pa-xl">
-          Country Report
-        </h1>
+        <h1 class="text-center q-pa-xl">Country Report</h1>
         <div class="row justify-center">
           <div class="col-6">
             <SearchBar
diff --git a/src/views/Documentation.vue b/src/views/Documentation.vue
index 469ef3e7..39a2c562 100644
--- a/src/views/Documentation.vue
+++ b/src/views/Documentation.vue
@@ -140,25 +140,14 @@ const sectionActive = ref('')
 
 <template>
   <div>
-    <QDrawer
-      v-model="showSidebar"
-      side="left"
-      bordered
-      class="IHR_documentation-page-sidebar"
-    >
+    <QDrawer v-model="showSidebar" side="left" bordered class="IHR_documentation-page-sidebar">
       <h3>{{ $t('documentationPage.title') }}</h3>
-      <div
-        v-for="(sec, idx) in sections"
-        :key="idx"
-      >
+      <div v-for="(sec, idx) in sections" :key="idx">
         <div class="text-weight-light">
           {{ $t(`documentationPage.sectionsTitle.${sec.sectionsTitle}`) }}
         </div>
         <ul>
-          <li
-            v-for="(secB, idx) in sec.sectionsBody.map((key) => key.name)"
-            :key="idx"
-          >
+          <li v-for="(secB, idx) in sec.sectionsBody.map((key) => key.name)" :key="idx">
             <RouterLink
               :to="
                 Tr.i18nRoute({
@@ -181,10 +170,7 @@ const sectionActive = ref('')
     </QDrawer>
 
     <div id="IHR_documentation-page">
-      <div
-        v-for="(mainSec, mainIdx) in sections"
-        :key="mainIdx"
-      >
+      <div v-for="(mainSec, mainIdx) in sections" :key="mainIdx">
         <div
           v-for="(bodySec, bodyIdx) in mainSec.sectionsBody"
           :key="bodyIdx"
@@ -199,10 +185,7 @@ const sectionActive = ref('')
             class="text-left text-body1"
             v-html="$t(`documentationPage.sections.${bodySec.name}.summary`)"
           />
-          <div
-            v-for="idx in bodySec.numberOfDescriptions"
-            :key="idx"
-          >
+          <div v-for="idx in bodySec.numberOfDescriptions" :key="idx">
             <h2
               v-html="$t(`documentationPage.sections.${bodySec.name}.description.${idx}.header`)"
             />
@@ -216,7 +199,7 @@ const sectionActive = ref('')
                 )
               "
               :style="$t(`documentationPage.sections.${bodySec.name}.description.${idx}.img.style`)"
-            >
+            />
             <p
               class="text-left text-body1"
               v-html="$t(`documentationPage.sections.${bodySec.name}.description.${idx}.body`)"
diff --git a/src/views/GlobalReport.vue b/src/views/GlobalReport.vue
index 549f4230..4984cc86 100644
--- a/src/views/GlobalReport.vue
+++ b/src/views/GlobalReport.vue
@@ -255,11 +255,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div class="q-mb-xs">
       <div class="text-center">
         <div class="text-h1">
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d233b490..2f8d2156 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -88,10 +88,7 @@ const organizations = ref(ORGANIZATIONS)
 
 <template>
   <div id="IHR_home">
-    <div
-      id="IHR_actions"
-      class="row"
-    >
+    <div id="IHR_actions" class="row">
       <div class="col">
         <div>Internet Health Report</div>
         <div class="IHR_actions-area">
@@ -108,27 +105,16 @@ const organizations = ref(ORGANIZATIONS)
       </div>
     </div>
 
-    <div
-      class="IHR_home-description-main"
-      v-html="$t('homePage.globalReport.description')"
-    />
+    <div class="IHR_home-description-main" v-html="$t('homePage.globalReport.description')" />
     <div class="IHR_home-description-main">
       See latest alarms in the
-      <RouterLink :to="Tr.i18nRoute({ name: 'global-report' })">
-        global report
-      </RouterLink>
+      <RouterLink :to="Tr.i18nRoute({ name: 'global-report' })"> global report </RouterLink>
       and network metrics in
-      <RouterLink :to="Tr.i18nRoute({ name: 'network' })">
-        network reports
-      </RouterLink>.
+      <RouterLink :to="Tr.i18nRoute({ name: 'network' })"> network reports </RouterLink>.
     </div>
 
     <div class="row wrap justify-center q-gutter-md IHR_home-description-main">
-      <QCard
-        v-for="graphT in graphTypes"
-        :key="graphT.name"
-        class="analysis-modules"
-      >
+      <QCard v-for="graphT in graphTypes" :key="graphT.name" class="analysis-modules">
         <QCardSection class="bg-primary text-white q-pa-sm">
           <div>
             <QAvatar :icon="graphT.icon" />
@@ -136,10 +122,7 @@ const organizations = ref(ORGANIZATIONS)
           </div>
         </QCardSection>
         <QCardSection class="q-pa-xs">
-          <div
-            class="IHR_home-description_text"
-            v-html="$t(`${graphT.name}.description`)"
-          />
+          <div class="IHR_home-description_text" v-html="$t(`${graphT.name}.description`)" />
           <div class="IHR_home-description_text IHR_home-description-link">
             <RouterLink
               :to="
@@ -177,20 +160,11 @@ const organizations = ref(ORGANIZATIONS)
       </h2>
 
       <div class="row wrap justify-center">
-        <div
-          v-for="(org, index) in organizations"
-          :key="index"
-        >
-          <a
-            :href="$t(`homePage.ack.organizations.${org.name}.url`)"
-            target="_blank"
-          >
+        <div v-for="(org, index) in organizations" :key="index">
+          <a :href="$t(`homePage.ack.organizations.${org.name}.url`)" target="_blank">
             <div class="IHR_ack-logo">
               <span />
-              <img
-                :src="org.logo"
-                :alt="$t(`homePage.ack.organizations.${org.name}.name`)"
-              >
+              <img :src="org.logo" :alt="$t(`homePage.ack.organizations.${org.name}.name`)" />
             </div>
           </a>
         </div>
diff --git a/src/views/HostNames.vue b/src/views/HostNames.vue
index 7a59e5b6..ee53fd39 100644
--- a/src/views/HostNames.vue
+++ b/src/views/HostNames.vue
@@ -30,19 +30,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div v-if="route.params.hostname">
       <HostName v-if="hostName" />
     </div>
     <div v-else>
       <div>
-        <h1 class="text-center q-pa-xl">
-          Hostname Report
-        </h1>
+        <h1 class="text-center q-pa-xl">Hostname Report</h1>
         <div class="row justify-center">
           <div class="col-6">
             <SearchBar
diff --git a/src/views/MetisDeployment.vue b/src/views/MetisDeployment.vue
index ce536d5c..de160bf5 100644
--- a/src/views/MetisDeployment.vue
+++ b/src/views/MetisDeployment.vue
@@ -9,9 +9,7 @@ const nbprobes = ref('100')
 
 <template>
   <div>
-    <h1 class="text-center">
-      Metis: Atlas probe deployment recommendations
-    </h1>
+    <h1 class="text-center">Metis: Atlas probe deployment recommendations</h1>
     <div class="row justify-center">
       <div class="IHR_description">
         <p>
@@ -28,8 +26,8 @@ const nbprobes = ref('100')
           The recommendations are updated every Sunday/Monday night at midnight UTC. For historical
           queries, or more recommendations, check out the
           <router-link :to="Tr.i18nRoute({ name: 'api' })">
-            Metis section of the IHR API
-          </router-link>.
+            Metis section of the IHR API </router-link
+          >.
         </p>
       </div>
     </div>
@@ -43,20 +41,10 @@ const nbprobes = ref('100')
         />
       </div>
       <div class="col-4 q-px-md">
-        <MetisWidget
-          widget-title="IPv4 RTT"
-          af="4"
-          metric="rtt"
-          :nbprobes="nbprobes"
-        />
+        <MetisWidget widget-title="IPv4 RTT" af="4" metric="rtt" :nbprobes="nbprobes" />
       </div>
       <div class="col-4 q-px-md">
-        <MetisWidget
-          widget-title="IPv4 IP hops"
-          af="4"
-          metric="ip_hops"
-          :nbprobes="nbprobes"
-        />
+        <MetisWidget widget-title="IPv4 IP hops" af="4" metric="ip_hops" :nbprobes="nbprobes" />
       </div>
     </div>
     <div class="row justify-center">
@@ -69,20 +57,10 @@ const nbprobes = ref('100')
         />
       </div>
       <div class="col-4 q-px-md">
-        <MetisWidget
-          widget-title="IPv6 RTT"
-          af="6"
-          metric="rtt"
-          :nbprobes="nbprobes"
-        />
+        <MetisWidget widget-title="IPv6 RTT" af="6" metric="rtt" :nbprobes="nbprobes" />
       </div>
       <div class="col-4 q-px-md">
-        <MetisWidget
-          widget-title="IPv6 IP hops"
-          af="6"
-          metric="ip_hops"
-          :nbprobes="nbprobes"
-        />
+        <MetisWidget widget-title="IPv6 IP hops" af="6" metric="ip_hops" :nbprobes="nbprobes" />
       </div>
     </div>
   </div>
diff --git a/src/views/MetisHome.vue b/src/views/MetisHome.vue
index 8928aa6f..1c1432f8 100644
--- a/src/views/MetisHome.vue
+++ b/src/views/MetisHome.vue
@@ -7,9 +7,7 @@ import '@/styles/chart.css'
 
 <template>
   <div>
-    <h1 class="text-center">
-      Metis
-    </h1>
+    <h1 class="text-center">Metis</h1>
     <div class="row justify-center metis-component">
       <div class="IHR_description">
         <p>Welcome to Metis! A data-driven method to select diverse vantage points.</p>
@@ -20,19 +18,15 @@ import '@/styles/chart.css'
         </p>
         <p>
           We developed Metis to solve a problem that we faced while running experiments with RIPE's
-          <a
-            href="https://atlas.ripe.net/"
-            target="_blank"
-          >Atlas</a> measurement platform: How can
+          <a href="https://atlas.ripe.net/" target="_blank">Atlas</a> measurement platform: How can
           we be certain that the measurement results are not skewed by the distribution of available
           VPs?
         </p>
         <p>
           Looking at the
-          <a
-            href="https://atlas.ripe.net/results/maps/network-coverage/"
-            target="_blank"
-          >probe map</a>
+          <a href="https://atlas.ripe.net/results/maps/network-coverage/" target="_blank"
+            >probe map</a
+          >
           already makes it clear, that simply using all probes will yield unbalanced results. Now,
           one approach might be to try and somehow adjust the results to account for this imbalance,
           however, it might be difficult.
@@ -47,10 +41,9 @@ import '@/styles/chart.css'
           <a
             href="https://tma.ifip.org/2022/wp-content/uploads/sites/11/2022/06/tma2022-paper18.pdf"
           >
-            "Metis: Better Atlas Vantage Point Selection for Everyone”</a>. We are also working on a high-level explanation for the
-          <RouterLink :to="Tr.i18nRoute({ name: 'documentation' })">
-            documentation
-          </RouterLink>.
+            "Metis: Better Atlas Vantage Point Selection for Everyone”</a
+          >. We are also working on a high-level explanation for the
+          <RouterLink :to="Tr.i18nRoute({ name: 'documentation' })"> documentation </RouterLink>.
         </p>
         <p>
           Although the approach is applicable to any kind of measurement platform, we currently only
diff --git a/src/views/MetisSelection.vue b/src/views/MetisSelection.vue
index 0b81c5a4..b30fa83f 100644
--- a/src/views/MetisSelection.vue
+++ b/src/views/MetisSelection.vue
@@ -180,9 +180,7 @@ const copyAPI = () => {
 
 <template>
   <div>
-    <h1 class="text-center">
-      Metis: Atlas probe selection
-    </h1>
+    <h1 class="text-center">Metis: Atlas probe selection</h1>
     <div class="row justify-center q-pa-md">
       <div class="IHR_description">
         <p>
@@ -194,10 +192,9 @@ const copyAPI = () => {
           We actually provide a list of autonomous systems (ASes) instead of probes. This is because
           the connected probes are constantly changing. In order to avoid querying the Atlas API
           each time in parallel, we provide the API specification that can be directly used with the
-          <a
-            href="https://atlas.ripe.net/measurements/form/"
-            target="_blank"
-          >template that Atlas provides when creating a new measurement</a>. The specification is a bit bulky, but Atlas currently does not provide a way to enter a
+          <a href="https://atlas.ripe.net/measurements/form/" target="_blank"
+            >template that Atlas provides when creating a new measurement</a
+          >. The specification is a bit bulky, but Atlas currently does not provide a way to enter a
           <i>list</i> of ASes.
         </p>
         <p>
@@ -208,43 +205,24 @@ const copyAPI = () => {
         </p>
         <p>
           If you are looking for historical data or want to automate the process, check out the
-          <RouterLink :to="Tr.i18nRoute({ name: 'api' })">
-            Metis section of the IHR API
-          </RouterLink>.
+          <RouterLink :to="Tr.i18nRoute({ name: 'api' })"> Metis section of the IHR API </RouterLink
+          >.
         </p>
       </div>
     </div>
     <div class="row justify-center">
       <div class="col-3">
-        <QInput
-          v-model="nbprobes"
-          label="Number of probes"
-        />
-        <QSelect
-          v-model="metric"
-          :options="metricoptions"
-          label="Distance metric"
-        />
-        <QSelect
-          v-model="af"
-          :options="afoptions"
-          label="IP version"
-        />
-        <QBtn
-          class="q-mt-sm"
-          label="Go"
-          @click="apiCall"
-        />
+        <QInput v-model="nbprobes" label="Number of probes" />
+        <QSelect v-model="metric" :options="metricoptions" label="Distance metric" />
+        <QSelect v-model="af" :options="afoptions" label="IP version" />
+        <QBtn class="q-mt-sm" label="Go" @click="apiCall" />
       </div>
     </div>
     <div v-if="fetch">
       <div class="q-pa-md">
         <div class="row justify-evenly">
           <div class="col-6 q-px-md">
-            <MetisTable
-              :data="tableData"
-              :loading="loading"
-            />
+            <MetisTable :data="tableData" :loading="loading" />
           </div>
           <div class="col-5 q-px-xl">
             <h2>Country distribution</h2>
@@ -254,17 +232,8 @@ const copyAPI = () => {
         <div class="row justify-center">
           <div class="IHR_block q-px-md">
             <h2>Atlas API specification</h2>
-            <QBtn
-              class="q-mb-sm"
-              color="secondary"
-              label="Copy"
-              @click="copyAPI"
-            />
-            <textarea
-              v-model="apiJson"
-              class="apiTextarea"
-              readonly
-            />
+            <QBtn class="q-mb-sm" color="secondary" label="Copy" @click="copyAPI" />
+            <textarea v-model="apiJson" class="apiTextarea" readonly />
           </div>
         </div>
         <div class="row justify-center">
diff --git a/src/views/NetworkTopology.vue b/src/views/NetworkTopology.vue
index 613775d3..07f0c2a2 100644
--- a/src/views/NetworkTopology.vue
+++ b/src/views/NetworkTopology.vue
@@ -153,14 +153,9 @@ onMounted(async () => {
 
 <template>
   <div class="IHR_char-container">
-    <h1 class="text-center">
-      Network Topology Overview
-    </h1>
+    <h1 class="text-center">Network Topology Overview</h1>
     <div class="row justify-center">
-      <div
-        v-if="chartAmount == 0"
-        class="IHR_description"
-      >
+      <div v-if="chartAmount == 0" class="IHR_description">
         <p>
           This tool provides a comprehensive platform for researchers and network professionals to
           explore and analyze the topology of an AS or a network prefix.
@@ -177,23 +172,13 @@ onMounted(async () => {
         <div class="row justify-center">
           <div class="row examples">
             <ul class="ul_styles">
-              <li @click="incrementChart(`2497`, `4`)">
-                IIJ (AS2497)
-              </li>
-              <li @click="incrementChart(`15169`, `4`)">
-                Google (AS15169)
-              </li>
-              <li @click="incrementChart(`2501`, `4`)">
-                University of Tokyo (AS2501)
-              </li>
+              <li @click="incrementChart(`2497`, `4`)">IIJ (AS2497)</li>
+              <li @click="incrementChart(`15169`, `4`)">Google (AS15169)</li>
+              <li @click="incrementChart(`2501`, `4`)">University of Tokyo (AS2501)</li>
             </ul>
             <ul class="ul_styles">
-              <li @click="incrementChart(`157.8.16.0/23`, `4`)">
-                IIJ (157.8.16.0/23)
-              </li>
-              <li @click="incrementChart(`152.65.235.0/24`, `4`)">
-                Google (152.65.235.0/24)
-              </li>
+              <li @click="incrementChart(`157.8.16.0/23`, `4`)">IIJ (157.8.16.0/23)</li>
+              <li @click="incrementChart(`152.65.235.0/24`, `4`)">Google (152.65.235.0/24)</li>
               <li @click="incrementChart(`192.51.208.0/20`, `4`)">
                 University of Tokyo (192.51.208.0/20)
               </li>
@@ -203,16 +188,9 @@ onMounted(async () => {
       </div>
     </div>
     <div class="addTopologyButton">
-      <QBtn
-        color="secondary"
-        label="Add Topology"
-        @click="incrementChart(`2501`, `4`)"
-      />
+      <QBtn color="secondary" label="Add Topology" @click="incrementChart(`2501`, `4`)" />
     </div>
-    <GridLayout
-      v-model:layout="layout"
-      :row-height="30"
-    >
+    <GridLayout v-model:layout="layout" :row-height="30">
       <GridItem
         v-for="(item, index) in layout"
         :key="item.i"
diff --git a/src/views/Networks.vue b/src/views/Networks.vue
index ab380880..ea7ff901 100644
--- a/src/views/Networks.vue
+++ b/src/views/Networks.vue
@@ -71,10 +71,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" class="IHR_char-container">
     <div v-if="route.params.id || route.params.ip">
       <AS v-if="asNumber" />
       <IXP v-if="ixpNumber" />
@@ -82,9 +79,7 @@ onMounted(() => {
     </div>
     <div v-else>
       <div>
-        <h1 class="text-center q-pa-xl">
-          Network Report
-        </h1>
+        <h1 class="text-center q-pa-xl">Network Report</h1>
         <div class="row justify-center">
           <div class="col-6">
             <SearchBar
diff --git a/src/views/Observable.vue b/src/views/Observable.vue
index 746197bb..9af689d9 100644
--- a/src/views/Observable.vue
+++ b/src/views/Observable.vue
@@ -27,10 +27,7 @@ const tree = [
 
 <template>
   <div>
-    <QSplitter
-      v-model="splitterModel"
-      style="height: 100vh"
-    >
+    <QSplitter v-model="splitterModel" style="height: 100vh">
       <template #before>
         <div class="q-pa-md">
           <QTree
@@ -44,12 +41,7 @@ const tree = [
         </div>
       </template>
       <template #after>
-        <QTabPanels
-          v-model="selected"
-          animated
-          transition-prev="jump-up"
-          transition-next="jump-up"
-        >
+        <QTabPanels v-model="selected" animated transition-prev="jump-up" transition-next="jump-up">
           <QTabPanel name="Root">
             <h1>Community Observable Notebook Showcase</h1>
             <p>
@@ -79,10 +71,7 @@ const tree = [
               matters related to Internet governance, infrastructure, and security.
             </p>
           </QTabPanel>
-          <QTabPanel
-            name="Internet outages as seen by RIPE Atlas"
-            style="height: 100vh"
-          >
+          <QTabPanel name="Internet outages as seen by RIPE Atlas" style="height: 100vh">
             <iframe
               width="100%"
               height="100%"
@@ -90,10 +79,7 @@ const tree = [
               src="https://observablehq.com/embed/@ripencc/internet-outages-as-seen-by-ripe-atlas?cell=*"
             />
           </QTabPanel>
-          <QTabPanel
-            name="Atlas Latency World Map"
-            style="height: 100vh"
-          >
+          <QTabPanel name="Atlas Latency World Map" style="height: 100vh">
             <iframe
               width="100%"
               height="100%"
@@ -116,10 +102,7 @@ const tree = [
               collaboration.
             </p>
           </QTabPanel>
-          <QTabPanel
-            name="Plug and Plot with Internet data"
-            style="height: 100vh"
-          >
+          <QTabPanel name="Plug and Plot with Internet data" style="height: 100vh">
             <iframe
               width="100%"
               height="100%"
diff --git a/src/views/PageNotFound.vue b/src/views/PageNotFound.vue
index 1591d384..f8a27677 100644
--- a/src/views/PageNotFound.vue
+++ b/src/views/PageNotFound.vue
@@ -11,12 +11,7 @@ import { QBtn } from 'quasar'
       </div>
       <h2>What on Internet are you doing here !</h2>
       <p>Well this is sad the page that you were looking for is not here</p>
-      <QBtn
-        class="sec"
-        :to="Tr.i18nRoute({ name: 'home' })"
-      >
-        Get Yourself Home
-      </QBtn>
+      <QBtn class="sec" :to="Tr.i18nRoute({ name: 'home' })"> Get Yourself Home </QBtn>
     </div>
   </div>
 </template>
@@ -52,11 +47,11 @@ import { QBtn } from 'quasar'
   margin: 0px;
   color: #232323;
 }
-.notfound .image404 h1>span {
+.notfound .image404 h1 > span {
   display: inline-block;
   width: 100px;
   height: 100px;
-  background-image: url("../assets/imgs/ihr_logo.svg");
+  background-image: url('../assets/imgs/ihr_logo.svg');
   background-size: cover;
   -webkit-transform: scale(1.4);
   -ms-transform: scale(1.4);
@@ -101,7 +96,7 @@ import { QBtn } from 'quasar'
   .notfound .image404 h1 {
     font-size: 66px;
   }
-  .notfound .image404 h1>span {
+  .notfound .image404 h1 > span {
     width: 40px;
     height: 40px;
   }
@@ -116,7 +111,7 @@ import { QBtn } from 'quasar'
   .notfound .image404 h1 {
     font-size: 86px;
   }
-  .notfound .image404 h1>span {
+  .notfound .image404 h1 > span {
     width: 60px;
     height: 60px;
   }
diff --git a/src/views/ROV.vue b/src/views/ROV.vue
index 897613d8..a0a4e1c9 100644
--- a/src/views/ROV.vue
+++ b/src/views/ROV.vue
@@ -126,15 +126,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div>
-      <h1 class="text-center">
-        <q-icon name="fas fa-route" />&nbsp; Route Origin Validation
-      </h1>
+      <h1 class="text-center"><q-icon name="fas fa-route" />&nbsp; Route Origin Validation</h1>
       <h3 class="text-center">
         {{ interval.dayDiff() }}-day report ending on {{ reportDateFmt }}
         <DateTimePicker
@@ -146,11 +140,7 @@ onMounted(() => {
         />
       </h3>
     </div>
-    <PrefixHegemonyChart
-      :start-time="startTime"
-      :end-time="endTime"
-      :fetch="fetch"
-    />
+    <PrefixHegemonyChart :start-time="startTime" :end-time="endTime" :fetch="fetch" />
     <!-- <button @click="generateReport()" class="np-btn">Generate Report</button> -->
   </div>
   <Feedback />
diff --git a/src/views/Ranks.vue b/src/views/Ranks.vue
index 08c722f3..38192304 100644
--- a/src/views/Ranks.vue
+++ b/src/views/Ranks.vue
@@ -30,19 +30,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div v-if="route.params.rank">
       <Rank v-if="rankName" />
     </div>
     <div v-else>
       <div>
-        <h1 class="text-center q-pa-xl">
-          Rank Report
-        </h1>
+        <h1 class="text-center q-pa-xl">Rank Report</h1>
         <div class="row justify-center">
           <div class="col-6">
             <SearchBar
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index f0a2c865..d21bfbcd 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -30,19 +30,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="IHR_as-and-ixp-container"
-    ref="ihrAsAndIxpContainer"
-    class="IHR_char-container"
-  >
+  <div id="IHR_as-and-ixp-container" ref="ihrAsAndIxpContainer" class="IHR_char-container">
     <div v-if="route.params.tag">
       <Tag v-if="tagName" />
     </div>
     <div v-else>
       <div>
-        <h1 class="text-center q-pa-xl">
-          Tag Report
-        </h1>
+        <h1 class="text-center q-pa-xl">Tag Report</h1>
         <div class="row justify-center">
           <div class="col-6">
             <SearchBar
@@ -147,5 +141,4 @@ onMounted(() => {
   margin: 0;
   list-style-position: inside;
 }
-
 </style>
diff --git a/src/views/TracerouteVisualizationTool.vue b/src/views/TracerouteVisualizationTool.vue
index ae4dcaf5..90693bd1 100644
--- a/src/views/TracerouteVisualizationTool.vue
+++ b/src/views/TracerouteVisualizationTool.vue
@@ -62,15 +62,7 @@ onMounted(() => {
       <template #prepend>
         <QIcon name="web" />
       </template>
-      <QBtn
-        round
-        dense
-        flat
-        :ripple="false"
-        no-caps
-        size="22px"
-        @click="loadMeasurement"
-      >
+      <QBtn round dense flat :ripple="false" no-caps size="22px" @click="loadMeasurement">
         <QIcon name="search" />
       </QBtn>
     </QInput>