From 9f4d4b725a8fe7a3db47fefe13dc02a838c12058 Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Tue, 4 Apr 2023 22:00:01 +0530
Subject: [PATCH 1/8] Implemented a web page for prefix report

---
 src/router.js                                 |  11 +
 src/views/Prefixes.vue                        | 365 +++++++++++
 src/views/charts/PrefixDependenciesChart.vue  | 600 ++++++++++++++++++
 src/views/charts/layouts.js                   |   9 +
 .../charts/tables/PrefixDependenciesTable.vue | 145 +++++
 5 files changed, 1130 insertions(+)
 create mode 100644 src/views/Prefixes.vue
 create mode 100644 src/views/charts/PrefixDependenciesChart.vue
 create mode 100644 src/views/charts/tables/PrefixDependenciesTable.vue

diff --git a/src/router.js b/src/router.js
index 65c6acff..6316b157 100644
--- a/src/router.js
+++ b/src/router.js
@@ -8,6 +8,7 @@ import API from '@/views/Api'
 import Contact from '@/views/Contact'
 import Countries from '@/views/Countries'
 import Networks from '@/views/Networks'
+import Prefixes from '@/views/Prefixes'
 import Corona from '@/views/Corona'
 import ROV from '@/views/ROV'
 import MetisHome from '@/views/MetisHome'
@@ -104,6 +105,16 @@ export default new Router({
       },
       meta: { title: 'Network Report - IHR' },
     },
+    {
+      name: 'prefixes',
+      path: `${routerBase}prefixes/:asn?`,
+      components: {
+        header: Header,
+        footer: Footer,
+        default: Prefixes,
+      },
+      meta: { title: 'Prefix Report - IHR' },
+    },
     {
       name: 'rov',
       path: `${routerBase}rov`,
diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
new file mode 100644
index 00000000..128c62cc
--- /dev/null
+++ b/src/views/Prefixes.vue
@@ -0,0 +1,365 @@
+<template>
+  <div id="IHR_as-and-ixp-container" class="IHR_char-container">
+    <div v-if="asNumber">
+      <div>
+        <h1 class="text-center">{{ subHeader }} - {{ headerString }}</h1>
+        <h3 class="text-center">
+          {{ interval.dayDiff() }}-day report ending on {{ reportDateFmt }}
+          <date-time-picker :min="minDate" :max="maxDate" :value="maxDate" @input="setReportDate" hideTime class="IHR_subtitle_calendar" />
+        </h3>
+      </div>
+      <!-- <button @click="generateReport()" class="np-btn">Generate Report</button> -->
+      <q-list v-if="showGraphs">
+        <q-expansion-item
+          :label="$t('charts.asInterdependencies.title')"
+          caption="BGP data"
+          header-class="IHR_charts-title"
+          icon="fas fa-project-diagram"
+          :disable="show.hegemony_disable"
+          v-model="show.hegemony"
+        >
+          <q-separator />
+          <q-card class="IHR_charts-body">
+            <q-card-section>
+              <prefix-dependencies-chart
+                :start-time="startTime"
+                :end-time="endTime"
+                :as-number="asNumber"
+                :address-family="family"
+                :fetch="fetch"
+                ref="prefixDependenciesChart"
+              />
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+
+        <q-expansion-item
+          :label="$t('charts.prefixHegemony.title')"
+          caption="BGP / IRR / RPKI / delegated"
+          header-class="IHR_charts-title"
+          icon="fas fa-route"
+          :disable="show.rov_disable"
+          v-model="show.rov"
+        >
+          <q-separator />
+          <q-card class="IHR_charts-body">
+            <q-card-section>
+              <prefix-hegemony-chart
+                :start-time="startTime"
+                :end-time="endTime"
+                :as-number="asNumber"
+                :fetch="fetch"
+                ref="prefixHegemonyChart"
+              />
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+
+        <q-expansion-item
+          :label="$t('charts.networkDelay.title')"
+          caption="Traceroute data"
+          header-class="IHR_charts-title"
+          icon="fas fa-shipping-fast"
+          v-model="show.net_delay"
+          :disable="show.net_delay_disable"
+        >
+          <q-separator />
+          <q-card class="IHR_charts-body">
+            <q-card-section>
+              <network-delay-chart
+                :start-time="startTime"
+                :end-time="endTime"
+                :startPointName="Math.abs(asNumber).toString()"
+                :startPointType="this.$route.params.asn.substring(0, 2)"
+                :fetch="fetch"
+                searchBar
+                ref="networkDelayChart"
+                @display="displayNetDelay"
+              />
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+
+        <q-expansion-item
+          :label="$t('charts.delayAndForwarding.title')"
+          caption="Traceroute data"
+          header-class="IHR_charts-title"
+          icon="fas fa-exchange-alt"
+          :disable="show.delayAndForwarding_disable"
+          v-model="show.delayAndForwarding"
+        >
+          <q-separator />
+          <q-card class="IHR_charts-body">
+            <q-card-section>
+              <delay-and-forwarding-chart
+                :start-time="startTime"
+                :end-time="endTime"
+                :as-number="asNumber"
+                :fetch="fetch"
+                ref="delayAndForwardingChart"
+              />
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-expansion-item
+          :label="$t('charts.disconnections.title')"
+          caption="RIPE Atlas log"
+          header-class="IHR_charts-title"
+          icon="fas fa-plug"
+          :disable="show.disco_disable"
+          v-model="show.disco"
+        >
+          <q-separator />
+          <q-card class="IHR_charts-body">
+            <q-card-section>
+              <disco-chart
+                :streamName="asNumber"
+                :start-time="startTime"
+                :end-time="endTime"
+                :fetch="fetch"
+                :minAvgLevel="9"
+                ref="ihrChartDisco"
+              />
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <div class="IHR_last-element">&nbsp;</div>
+      </q-list>
+    </div>
+    <div v-else>
+      <div>
+        <h1 class="text-center q-pa-xl">Prefix Report</h1>
+        <div class="row justify-center">
+          <div class="col-8">
+            <network-search-bar
+              bg="white"
+              label="grey-8"
+              input="black"
+              labelTxt="Enter an ASN, IXP ID, or network name (at least 3 characters)"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- <div class="q-pa-xl">
+        <div class="row justify-center">
+          <div class="col-6">
+            <h3>Examples:</h3>
+          </div>
+        </div>
+        <div class="row justify-center">
+          <div class="col-3">
+            <ul>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'AS2497' } }" class="IHR_delikify">IIJ (AS2497)</router-link>
+              </li>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'AS15169' } }" class="IHR_delikify">Google (AS15169)</router-link>
+              </li>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'AS2501' } }" class="IHR_delikify"
+                  >University of Tokyo (AS2501)</router-link
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="col-3">
+            <ul>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'AS7922' } }" class="IHR_delikify">Comcast (AS7922)</router-link>
+              </li>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'AS25152' } }" class="IHR_delikify"
+                  >K-Root server (AS25152)</router-link
+                >
+              </li>
+              <li>
+                <router-link :to="{ name: 'networks', params: { asn: 'IXP208' } }" class="IHR_delikify">DE-CIX (IXP208)</router-link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import reportMixin from '@/views/mixin/reportMixin'
+import PrefixDependenciesChart from '@/views/charts/PrefixDependenciesChart'
+import PrefixHegemonyChart from '@/views/charts/PrefixHegemonyChart'
+import DiscoChart, { DEFAULT_DISCO_AVG_LEVEL } from '@/views/charts/global/DiscoChart'
+import DelayAndForwardingChart from '@/views/charts/DelayAndForwardingChart'
+import NetworkDelayChart from '@/views/charts/NetworkDelayChart'
+import { AS_FAMILY, NetworkQuery, HegemonyPrefixQuery } from '@/plugins/IhrApi'
+import DateTimePicker from '@/components/DateTimePicker'
+import NetworkSearchBar from '@/components/search_bar/NetworkSearchBar'
+import html2pdf from 'html2pdf.js'
+
+const LOADING_STATUS = {
+  ERROR: -3,
+  EXPIRED: -2,
+  NOT_FOUND: -1,
+  LOADING: 0,
+  LOADED: 1,
+}
+
+const CHART_REFS = ['prefixDependenciesChart', 'prefixHegemonyChart', 'networkDelayChart', 'delayAndForwardingChart', 'ihrChartDisco']
+
+export default {
+  name: 'PrefixesReport',
+  mixins: [reportMixin],
+  components: {
+    PrefixDependenciesChart,
+    PrefixHegemonyChart,
+    DiscoChart,
+    DelayAndForwardingChart,
+    NetworkDelayChart,
+    DateTimePicker,
+    NetworkSearchBar,
+  },
+  data() {
+    // let asNumber = this.$options.filters.ihr_AsOrIxpToNumber(this.$route.params.asn)
+    let prefix = this.$route.query.prefix
+    let addressFamily = this.$route.query.af
+    return {
+      addressFamily: addressFamily == undefined ? 4 : addressFamily,
+      loadingStatus: LOADING_STATUS.LOADING,
+      prefix: prefix,
+      asName: null,
+      charRefs: CHART_REFS,
+      minAvgLevel: DEFAULT_DISCO_AVG_LEVEL,
+      show: {
+        rov: true,
+        rov_disable: false,
+        delayAndForwarding: true,
+        delayAndForwarding_disable: false,
+        disco: true,
+        disco_disable: false,
+        hegemony: true,
+        hegemony_disable: false,
+        net_delay: true,
+        net_delay_disable: false,
+        measurementLab: true,
+      },
+    }
+  },
+  methods: {
+    pushRoute() {
+      this.$router.replace({
+        //this.$router.replace({ query: Object.assign({}, this.$route.query, { hege_dt: clickData.points[0].x, hege_tb: table }) });
+        query: Object.assign({}, this.$route.query, {
+          af: this.family,
+          last: this.interval.dayDiff(),
+          date: this.$options.filters.ihrUtcString(this.interval.end, false),
+        }),
+      })
+    },
+    netName() {
+      let filter = new HegemonyPrefixQuery().prefix(this.prefix)
+      this.$ihr_api.hegemony_prefix(filter, results => {
+        if (results.count < 1) {
+          this.loadingStatus = LOADING_STATUS.NOT_FOUND
+          return
+        }
+        // Hide tabs if not necessary
+        this.$nextTick(function () {
+          this.show.delayAndForwarding_disable = !results.results[0].delay_forwarding
+          this.show.delayAndForwarding = results.results[0].delay_forwarding
+          this.show.disco_disable = !results.results[0].disco
+          this.show.disco = results.results[0].disco
+          this.show.hegemony_disable = !results.results[0].hegemony
+          this.show.hegemony = results.results[0].hegemony
+        })
+
+        this.prefix = results.results[0].prefix
+        this.loadingStatus = LOADING_STATUS.LOADED
+        this.fetch = true
+      })
+    },
+    displayNetDelay(displayValue) {
+      this.show.net_delay = displayValue
+      this.$nextTick(function () {
+        this.show.net_delay_disable = !displayValue
+      })
+    },
+    generateReport() {
+      let element = document.getElementById('IHR_as-and-ixp-container')
+      let opt = {
+        margin: 0,
+        filename: 'Prefixes.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: 'in', format: 'a3', orientation: 'l' },
+      }
+      html2pdf(element, opt)
+      console.log('button is clicked')
+    },
+  },
+  mounted() {
+    this.netName()
+  },
+  computed: {
+    family() {
+      return this.addressFamily == 6 ? AS_FAMILY.v6 : AS_FAMILY.v4
+    },
+    addressFamilyText() {
+      return this.addressFamily ? 'IPv4' : 'IPv6'
+    },
+    showGraphs() {
+      return this.loadingStatus == LOADING_STATUS.LOADED
+    },
+    headerString() {
+      switch (this.loadingStatus) {
+        case LOADING_STATUS.LOADING:
+          return this.$t('Prefixes.headerString.loading')
+        case LOADING_STATUS.NOT_FOUND:
+          return this.$t('Prefixes.headerString.notFound')
+        case LOADING_STATUS.EXPIRED:
+          return this.$t('Prefixes.headerString.expired')
+        case LOADING_STATUS.LOADED:
+          return this.prefix
+        default:
+        case LOADING_STATUS.ERROR:
+          return this.$t('genericErrors.ups')
+      }
+    },
+    subHeader() {
+      switch (this.loadingStatus) {
+        case LOADING_STATUS.LOADING:
+          return this.$t('Prefixes.subHeader.loading')
+        case LOADING_STATUS.NOT_FOUND:
+          return this.$t('Prefixes.subHeader.notFound')
+        case LOADING_STATUS.EXPIRED:
+          return this.$t('Prefixes.subHeader.expired')
+        case LOADING_STATUS.LOADED:
+          return this.$route.params.prefix
+        default:
+        case LOADING_STATUS.ERROR:
+          return this.$t('genericErrors.badHappened')
+      }
+    },
+  },
+  watch: {
+    addressFamily() {
+      this.pushRoute()
+    },
+    '$route.params.prefix': {
+      handler: function (prefix) {
+        console.log(this.prefix)
+        console.log(prefix)
+
+        if (this.$route.query.prefix != this.prefix) {
+          this.loadingStatus = LOADING_STATUS.LOADING
+          this.prefix = this.$route.query.prefix
+          this.netName()
+        }
+      },
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+@import '../styles/quasar.variables';
+</style>
diff --git a/src/views/charts/PrefixDependenciesChart.vue b/src/views/charts/PrefixDependenciesChart.vue
new file mode 100644
index 00000000..f7caaa82
--- /dev/null
+++ b/src/views/charts/PrefixDependenciesChart.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="IHR_chart">
+    <reactive-chart :layout="layout" :traces="traces" @plotly-click="plotClick" :ref="myId" :no-data="noData" />
+    <div v-if="loading" class="IHR_loading-spinner">
+      <q-spinner color="secondary" size="15em" />
+    </div>
+    <q-card v-if="details.tableVisible" class="bg-accent q-ma-xl" dark>
+      <q-card-section class="q-pa-xs">
+        <div class="row items-center">
+          <div class="col">
+            <div class="text-h3">{{ details.date | ihrUtcString }}</div>
+          </div>
+          <div class="col-auto">
+            <q-btn
+              class="IHR_table-close-button"
+              size="sm"
+              round
+              flat
+              @click="details.tableVisible = false"
+              icon="fa fa-times-circle"
+            ></q-btn>
+          </div>
+        </div>
+      </q-card-section>
+      <q-tabs
+        dense
+        v-model="details.activeTab"
+        class="table-card text-grey inset-shadow justify"
+        indicator-color="secondary"
+        active-color="primary"
+        active-bg-color="white"
+        narrow-indicator
+      >
+        <q-tab name="dependency" :label="$t('charts.prefixDependencies.table.dependencyTitle')" />
+        <q-tab name="bgpPlay" label="AS Graph" />
+        <q-tab name="api" label="API" />
+      </q-tabs>
+      <q-tab-panels v-model="details.activeTab" animated>
+        <q-tab-panel name="dependency">
+          <prefix-dependencies-table :data="networkDependencyData" :loading="details.tablesData.dependency.loading" />
+        </q-tab-panel>
+        <q-tab-panel name="bgpPlay">
+          <div class="bgplay-container">
+            <iframe frameborder="0" :src="bgplay"></iframe>
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="api" class="IHR_api-table q-pa-lg" light>
+          <h3>{{ $t('charts.prefixDependencies.table.apiTitle') }}</h3>
+          <table>
+            <tr>
+              <td>
+                <p class="text-subtitle1">
+                  {{ $t('charts.prefixDependencies.table.dependencyTitle') }}
+                </p>
+              </td>
+              <td>
+                <a :href="dependencyUrl" target="_blank" id="tableUrl">{{ dependencyUrl }}</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <p class="text-subtitle1">
+                  {{ $t('charts.prefixDependencies.table.dependentTitle') }}
+                </p>
+              </td>
+              <td>
+                <a :href="dependentUrl" target="_blank" id="tableUrl">{{ dependentUrl }}</a>
+              </td>
+            </tr>
+          </table>
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </div>
+</template>
+
+<script>
+import CommonChartMixin from './CommonChartMixin'
+import { extend } from 'quasar'
+import PrefixDependenciesTable from './tables/PrefixDependenciesTable'
+import { PREFIX_DEPENDENCIES_LAYOUT } from './layouts'
+import i18n from '@/locales/i18n'
+import { HegemonyPrefixQuery, HegemonyConeQuery, AS_FAMILY } from '@/plugins/IhrApi'
+import ripeApi from '@/plugins/RipeApi'
+
+const DEFAULT_TRACE = [
+  {
+    // First trace is used for the hegemony cone
+    x: [],
+    y: [],
+    yaxis: 'y2',
+    name: i18n.t('charts.prefixDependencies.defaultTrace'),
+    showlegend: false,
+    hovertemplate: '%{x}<br>' + '%{yaxis.title.text}: <b>%{y:.2f}</b>' + '<extra></extra>',
+  },
+]
+
+const timeResolution = 900 * 1000
+
+export default {
+  mixins: [CommonChartMixin],
+  components: {
+    PrefixDependenciesTable,
+  },
+  props: {
+    prefix: {
+      type: String,
+      required: true,
+    },
+    addressFamily: {
+      type: Number,
+      default: AS_FAMILY.v4,
+    },
+    clear: {
+      type: Number,
+      default: 1,
+    },
+    noTable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    //prevent calls within 500ms and execute only the last one
+    return {
+      details: {
+        activeTab: null,
+        date: null,
+        tablesData: {
+          dependency: null,
+        },
+        tableVisible: false,
+        enableBgpPlay: false,
+      },
+      loadingHegemony: true,
+      loadingHegemonyCone: true,
+      hegemonyFilter: null,
+      hegemonyConeFilter: null,
+      traces: DEFAULT_TRACE,
+      layout: PREFIX_DEPENDENCIES_LAYOUT,
+      neighbours: [],
+    }
+  },
+  beforeMount() {
+    this.updateAxesLabel()
+  },
+  mounted() {
+    this.tableFromQuery()
+  },
+  methods: {
+    updateAxesLabel() {
+      this.layout.yaxis.title = 'Prefix' + this.prefix + ` ${this.$t('charts.prefixDependencies.yaxis')}`
+    },
+    makeHegemonyFilter() {
+      return new HegemonyPrefixQuery()
+        .prefix(this.prefix)
+        .addressFamily(this.addressFamily)
+        .timeInterval(this.startTime, this.endTime)
+        .orderedByTime()
+    },
+    makeHegemonyConeFilter() {
+      return new HegemonyConeQuery()
+        .prefix(this.prefix)
+        .addressFamily(this.addressFamily)
+        .timeInterval(this.startTime, this.endTime)
+        .orderedByTime()
+    },
+    apiCall() {
+      if (this.prefix == '') return
+      this.updateAxesLabel()
+      this.hegemonyFilter = this.makeHegemonyFilter()
+      this.hegemonyConeFilter = this.makeHegemonyConeFilter()
+      this.traces = extend(true, [], DEFAULT_TRACE)
+      this.loading = true
+      this.loadingHegemony = true
+      this.loadingHegemonyCone = true
+      this.queryHegemonyAPI()
+      this.queryHegemonyConeAPI()
+      this.neighbours = []
+      ripeApi.asnNeighbours(this.asNumber).then(res => {
+        res.data.neighbours.forEach(neighbour => {
+          this.neighbours.push(neighbour.asn)
+        })
+      })
+    },
+    plotClick(clickData) {
+      var table = 'dependency'
+      this.showTable(table, clickData.points[0].x)
+    },
+    tableFromQuery() {
+      // if query parameter have click information then show corresponding tables
+      let selectedDate = this.$route.query.hege_dt
+      let table = this.$route.query.hege_tb
+      if (selectedDate != undefined && table != undefined) {
+        this.showTable(table, selectedDate)
+      }
+    },
+    showTable(table, selectedDate) {
+      if (selectedDate.length < 14) {
+        // at midnight no time is given
+        this.details.date = Date.parse(selectedDate + ' 00:00 GMT') //adding timezone to string...
+      } else {
+        this.details.date = Date.parse(selectedDate + ' GMT') //adding timezone to string...
+      }
+
+      let intervalEnd = this.details.date
+      let intervalStart = new Date(intervalEnd.getTime() - 15 * 60000)
+
+      this.details.activeTab = table
+      let dependencyFilter = this.makeHegemonyFilter().timeInterval(intervalStart, intervalEnd)
+      let dependentFilter = dependencyFilter.clone().originAs().asNumber(this.asNumber)
+      this.updateTable('dependency', 'prefix', dependencyFilter, intervalStart, intervalEnd)
+    },
+    updateTable(tableType, hegemonyComparator, filter, intervalStart, intervalEnd) {
+      this.details.tablesData[tableType] = {
+        data: [],
+        loading: true,
+        filter: filter,
+      }
+
+      this.$ihr_api.hegemony(
+        filter,
+        results => {
+          if (intervalStart != intervalEnd) {
+            let startString = intervalStart.toISOString().replace('.000', '')
+            let data = {}
+            let res = []
+            results.results.forEach(elem => {
+              let asn = elem[hegemonyComparator]
+              if (asn != 0) {
+                if (elem.timebin == startString) {
+                  data[asn] = elem
+                } else {
+                  if (data[asn] != undefined) {
+                    elem.increment = 100 * ((elem.hege - data[asn].hege) / data[asn].hege)
+                    res.push(elem)
+                    delete data[asn]
+                  } else {
+                    elem.increment = 100
+                    res.push(elem)
+                  }
+                }
+                elem.direct = this.neighbours.includes(asn)
+              }
+            })
+
+            for (var unprocessed in data) {
+              data[unprocessed].increment = -100
+              data[unprocessed].hege = 0
+              res.push(data[unprocessed])
+            }
+            results.results = res
+          }
+
+          this.details.tableVisible = true
+          this.details.tablesData[tableType] = {
+            data: results.results,
+            loading: false,
+            filter: filter,
+          }
+        },
+        error => {
+          console.error(error) //TODO better error handling
+        }
+      )
+    },
+    queryHegemonyAPI() {
+      this.loadingHegemony = true
+      this.$ihr_api.hegemony(
+        this.hegemonyFilter,
+        result => {
+          this.fetchHegemony(result.results)
+          this.loadingHegemony = false
+          this.loading = this.loadingHegemony || this.loadingHegemonyCone
+        },
+        error => {
+          console.error(error) //FIXME do a correct alert
+        }
+      )
+    },
+    queryHegemonyConeAPI() {
+      this.loadingHegemonyCone = true
+      this.$ihr_api.hegemony_cone(
+        this.hegemonyConeFilter,
+        result => {
+          this.fetchHegemonyCone(result.results)
+          this.loadingHegemonyCone = false
+          this.loading = this.loadingHegemony || this.loadingHegemonyCone
+        },
+        error => {
+          console.error(error) //FIXME do a correct alert
+        }
+      )
+    },
+    fetchHegemony(data) {
+      console.log('fetchHegemony')
+      let traces = {}
+      let missingDataList = []
+
+      let anotherAsn
+      let minX, maxX
+
+      data.forEach(elem => {
+        if (elem.asn == this.asNumber) return
+        let trace = traces[elem.asn]
+
+        if (anotherAsn === undefined) anotherAsn = elem.asn
+        if (trace === undefined) {
+          trace = {
+            x: [],
+            y: [],
+            name: this.$options.filters.ihr_NumberToAsOrIxp(elem.asn) + ' ' + elem.asn_name.split(' ')[0],
+            hovertemplate:
+              '<b>' +
+              this.$options.filters.ihr_NumberToAsOrIxp(elem.asn) +
+              ' ' +
+              elem.asn_name.split(' ')[0] +
+              '</b><br><br>' +
+              '%{x}<br>' +
+              '%{yaxis.title.text}: <b>%{y:.2f}%</b>' +
+              '<extra></extra>',
+            connectgaps: false,
+            mode: 'lines',
+          }
+
+          traces[elem.asn] = trace
+          this.traces.push(trace)
+        }
+
+        if (!minX) {
+          minX = Date.parse(elem.timebin).getTime()
+          maxX = Date.parse(elem.timebin).getTime()
+        } else {
+          minX = Math.min(minX, Date.parse(elem.timebin).getTime())
+          maxX = Math.max(maxX, Date.parse(elem.timebin).getTime())
+        }
+
+        // Add null if there is missing data
+        let prevDate = Date.parse(trace.x.slice(-1)[0])
+        let currDate = Date.parse(elem.timebin)
+
+        // let prevDateSeconds = prevDate && prevDate.getTime()
+        // console.log(prevDate, prevDateSeconds, prevDate)
+
+        if (prevDate && currDate.getTime() > prevDate.getTime() + timeResolution + 1) {
+          if (anotherAsn === elem.asn) {
+            missingDataList.push({
+              start: trace.x.slice(-1)[0],
+              end: elem.timebin,
+            })
+          }
+
+          trace.y.push(null)
+          trace.x.push('nodate')
+        }
+        trace.y.push(elem.hege * 100)
+        trace.x.push(elem.timebin)
+      })
+      this.noData |= Object.keys(traces).length == 0
+      this.layout.datarevision = new Date().getTime()
+
+      // console.log('md', missingDataList)
+
+      let shapeList = []
+
+      missingDataList.forEach(interval => {
+        const intervalStartTime = Date.parse(interval.start).getTime()
+        const intervalEndTime = Date.parse(interval.end).getTime()
+        let skip = false
+        data.forEach(elem => {
+          const elemTime = Date.parse(elem.timebin).getTime()
+          if (elemTime > intervalStartTime && elemTime < intervalEndTime) {
+            console.log(elem)
+            skip = true
+          }
+        })
+
+        if (skip) return
+
+        shapeList.push({
+          type: 'rect',
+          xref: 'x',
+          yref: 'paper',
+          x0: interval.start,
+          y0: 0,
+          x1: interval.end,
+          y1: 1,
+          fillcolor: '#d3d3d3',
+          opacity: 0.2,
+          line: {
+            width: 0,
+          },
+        })
+        let prevDate = Date.parse(interval.start).getTime()
+        let currDate = Date.parse(interval.end).getTime()
+        let x = (currDate - prevDate) / 2
+        let d = new Date(x + prevDate)
+
+        const noDataTrace = {
+          mode: 'text',
+          text: ['no data'],
+          x: [d.toISOString()],
+          y: [15],
+          showlegend: false,
+        }
+        this.traces.push(noDataTrace)
+      })
+
+      this.layout['shapes'] = shapeList
+
+      // console.log('maxX', new Date(maxX).toISOString())
+      // console.log(new Date(maxX).toISOString())
+      let maxXIso = new Date(maxX).toISOString().split('.')[0] + 'Z'
+      let minXIso = new Date(minX).toISOString().split('.')[0] + 'Z'
+      // console.log(minXIso, maxXIso)
+
+      for (let i = 1; i < this.traces.length; i++) {
+        if (this.traces[i].mode && this.traces[i].mode === 'text') continue
+        let currentTrace = this.traces[i]
+        let lastDate = currentTrace.x.slice(-1)[0]
+        let firstDate = currentTrace.x[0]
+        console.log('first date, last date', firstDate, lastDate)
+        let lastDateMilliSeconds = Date.parse(lastDate).getTime()
+        let firstDateMilliSeconds = Date.parse(firstDate).getTime()
+
+        if (lastDate !== maxXIso) {
+          let noOfPointsToAdd
+          let interval = maxX - Date.parse(currentTrace.x.slice(-1)[0]).getTime()
+          noOfPointsToAdd = interval / timeResolution
+          // console.log('pts', interval / timeResolution)
+          for (let j = 1; j <= noOfPointsToAdd; j++) {
+            lastDateMilliSeconds += timeResolution
+            let skip = false
+            for (let k = 0; k < missingDataList.length; k++) {
+              if (
+                lastDateMilliSeconds > Date.parse(missingDataList[k].start).getTime() &&
+                lastDateMilliSeconds < Date.parse(missingDataList[k].end).getTime()
+              ) {
+                skip = true
+                break
+              }
+            }
+
+            if (skip) continue
+            let d = new Date(lastDateMilliSeconds).toISOString().split('.')[0] + 'Z'
+            this.traces[i].x.push(d)
+            this.traces[i].y.push(0)
+          }
+          // console.log('lin traces', this.traces[i])
+        }
+
+        if (firstDate !== minXIso) {
+          console.log('front defect', firstDate, this.traces[i], minXIso)
+          let noOfPointsToAdd
+          let interval = Date.parse(currentTrace.x[0]).getTime() - minX
+          noOfPointsToAdd = interval / timeResolution
+          console.log('npad', noOfPointsToAdd)
+
+          const tempX = []
+          const tempY = []
+          for (let j = 1; j <= noOfPointsToAdd; j++) {
+            firstDateMilliSeconds -= timeResolution
+            let skip = false
+            for (let k = 0; k < missingDataList.length; k++) {
+              if (
+                firstDateMilliSeconds > Date.parse(missingDataList[k].start).getTime() &&
+                firstDateMilliSeconds < Date.parse(missingDataList[k].end).getTime()
+              ) {
+                skip = true
+                break
+              }
+            }
+
+            if (skip) continue
+            let d = new Date(firstDateMilliSeconds).toISOString().split('.')[0] + 'Z'
+            tempX.push(d)
+            tempY.push(0)
+          }
+          tempX.reverse()
+          // console.log('tempx tempy', tempX, tempY)
+          this.traces[i].x = tempX.concat(this.traces[i].x)
+          this.traces[i].y = tempY.concat(this.traces[i].y)
+        }
+      }
+
+      // console.log(this.traces)
+      // console.log(traces)
+    },
+    fetchHegemonyCone(data) {
+      console.log('fetchHegemonyCone')
+      let trace = this.traces[0]
+      data.forEach(resp => {
+        let prevDate = Date.parse(trace.x.slice(-1)[0])
+        let currDate = Date.parse(resp.timebin)
+
+        if (prevDate && currDate.getTime() > prevDate.getTime() + timeResolution + 1) {
+          trace.y.push(null)
+          trace.x.push('nodate')
+        }
+
+        trace.y.push(resp.conesize)
+        trace.x.push(resp.timebin)
+      })
+      for (let i = 1; i < trace.length; i++) {
+        let a = new Date(trace[i - 1].x)
+        let b = new Date(trace[i].x)
+        if (isNaN(a) || isNaN(b) || b - a < 0) {
+          console.error('error', a, b, b - a)
+        }
+      }
+      this.noData |= trace.length == 0
+      this.layout.datarevision = new Date().getTime()
+    },
+    clearGraph() {
+      this.traces = []
+      this.layout.datarevision = new Date().getTime()
+    },
+  },
+  computed: {
+    bgplay() {
+      return `/ihr/widget/bgplay?prefix=${this.prefix}&date=${this.dateStr}`
+    },
+    dateStr() {
+      let year = this.details.date.getUTCFullYear()
+      var day = this.details.date.getUTCDate()
+      var month = this.details.date.getUTCMonth() + 1
+      var hours = this.details.date.getUTCHours()
+      var minutes = this.details.date.getUTCMinutes()
+      var seconds = this.details.date.getUTCSeconds()
+
+      if (day < 10) day = '0' + day
+      if (month < 10) month = '0' + month
+      if (hours < 10) hours = '0' + hours
+      if (minutes < 10) minutes = '0' + minutes
+      if (seconds < 10) seconds = '0' + seconds
+
+      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}Z`
+    },
+    networkDependencyData() {
+      return this.details.tablesData.dependency.data.filter(elem => {
+        return elem.asn != this.asNumber
+      })
+    },
+    dependentNetworksData() {
+      return this.details.tablesData.dependent.data.filter(elem => {
+        return elem.originasn != this.asNumber
+      })
+    },
+    hegemonyUrl() {
+      return this.$ihr_api.getUrl(this.hegemonyFilter)
+    },
+    hegemonyConeUrl() {
+      return this.$ihr_api.getUrl(this.hegemonyConeFilter)
+    },
+    dependencyUrl() {
+      return this.$ihr_api.getUrl(this.details.tablesData.dependency.filter)
+    },
+  },
+  watch: {
+    addressFamily() {
+      this.debouncedApiCall()
+    },
+    prefix() {
+      this.debouncedApiCall()
+      this.details.tableVisible = false
+    },
+    'details.activeTab'(newValue) {
+      this.updateQuery({ hege_tb: newValue })
+    },
+    'details.date'(newValue) {
+      const str = newValue.toISOString().slice(0, 16).replace('T', ' ')
+      this.updateQuery({ hege_dt: str })
+    },
+    clear() {
+      this.clearGraph()
+      this.$nextTick(function () {
+        this.loading = true
+      })
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+@import "~@/styles/charts/common.styl";
+.bgplay-container {
+  overflow: hidden;
+  padding-top: 1100px;
+  position: relative;
+}
+
+.bgplay-container iframe {
+   border: 0;
+   height: 100%;
+   left: 0;
+   position: absolute;
+   top: 0;
+   width: 100%;
+}
+</style>
diff --git a/src/views/charts/layouts.js b/src/views/charts/layouts.js
index e370387e..7661f666 100644
--- a/src/views/charts/layouts.js
+++ b/src/views/charts/layouts.js
@@ -81,6 +81,15 @@ var AS_INTERDEPENDENCIES_LAYOUT = {
   },
 }
 
+var PREFIX_DEPENDENCIES_LAYOUT = {
+  ...COMMON_WITH_LEGEND,
+  yaxis: {
+    title: '',
+    domain: [0.6, 1],
+    range: [0, 101],
+  },
+}
+
 var HEGEMONY_ALARMS_LAYOUT = {
   ...COMMON_WITH_LEGEND,
   yaxis: {
diff --git a/src/views/charts/tables/PrefixDependenciesTable.vue b/src/views/charts/tables/PrefixDependenciesTable.vue
new file mode 100644
index 00000000..70fd337d
--- /dev/null
+++ b/src/views/charts/tables/PrefixDependenciesTable.vue
@@ -0,0 +1,145 @@
+<template>
+  <q-table :data="rows" :columns="columns" row-key="prefix" :pagination.sync="pagination" :loading="loading" binary-state-sort flat>
+    <template v-slot:body="props">
+      <q-tr :props="props" @click.native="routeToAsn(props.colsMap.asNumber, props.row)" class="IHR_table-row">
+        <q-td
+          v-for="col in columns"
+          :key="col.name"
+          :props="props"
+          :class="col.name == 'hegemony' ? ['IHR_important-cell', getCalssByHegemony(props)] : ''"
+        >
+          <div v-if="col.name == 'direct'">
+            <q-icon name="fas fa-check" v-if="props.row.direct" />
+            <q-icon name="fas fa-times" v-if="!props.row.direct" />
+          </div>
+          {{ col.format(col.field(props.row)) }}</q-td
+        >
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script>
+import CommonTableMixin from './CommonTableMixin'
+
+export default {
+  mixins: [CommonTableMixin],
+  props: {
+    useOriginAsn: {
+      type: Boolean,
+    },
+  },
+  data() {
+    let columns
+    if (this.useOriginAsn) {
+      columns = [
+        {
+          name: 'asName',
+          required: true,
+          label: 'Autonomous System Name',
+          align: 'left',
+          field: row => {
+            return row.originasn_name == '' ? '--' : row.originasn_name
+          },
+          format: val => `${val}`,
+          sortable: true,
+        },
+        {
+          name: 'asNumber',
+          required: true,
+          label: 'ASN',
+          align: 'left',
+          field: row => row.originasn,
+          format: val => val,
+          sortable: true,
+        },
+      ]
+    } else {
+      columns = [
+        {
+          name: 'asName',
+          required: true,
+          label: 'Autonomous System Name',
+          align: 'left',
+          field: row => row.asn_name,
+          format: val => `${val}`,
+          sortable: true,
+        },
+        {
+          name: 'asNumber',
+          required: true,
+          label: 'ASN',
+          align: 'left',
+          field: row => row.asn,
+          format: val => val,
+          sortable: true,
+        },
+      ]
+    }
+
+    return {
+      pagination: {
+        sortBy: 'hegemony',
+        descending: true,
+        page: 1,
+        rowsPerPage: 10,
+      },
+      columns: [
+        ...columns,
+        {
+          name: 'hegemony',
+          label: 'Dependency',
+          align: 'center',
+          field: row => row.hege,
+          format: val => `${(val * 100).toFixed(1)}%`,
+          sortable: true,
+        },
+        {
+          name: 'hegemonyIncrement',
+          label: '% Change',
+          align: 'center',
+          field: row => row.increment,
+          format: val => {
+            if (val == undefined) return 0
+            if (val > 0) return '+' + val.toFixed(1) + '%'
+            return val.toFixed(1) + '%'
+          },
+          sortable: true,
+        },
+        {
+          name: 'direct',
+          label: 'Direct Neighbour',
+          align: 'center',
+          field: row => row.direct,
+          format: () => '',
+          sortable: true,
+        },
+      ],
+    }
+  },
+  methods: {
+    OLDrouteToAsn(asn, row) {
+      asn = asn.format(asn.field(row))
+      let path = this.$route.path
+      let link = '#'
+      link += path.substring(0, path.lastIndexOf('/') + 1)
+      link += this.$options.filters.ihr_NumberToAsOrIxp(asn)
+      window.open(link)
+    },
+    routeToAsn(asn, row) {
+      asn = asn.format(asn.field(row))
+      this.$router.push({
+        name: 'networks',
+        params: { asn: this.$options.filters.ihr_NumberToAsOrIxp(asn) },
+      })
+    },
+    getCalssByHegemony(props) {
+      let hegemony = this.getCellValue(props, 'hegemony')
+      if (hegemony >= 0.5) return 'IHR_color-deviation-high-threshold'
+      if (hegemony >= 0.25) return 'IHR_color-deviation-mid-threshold'
+      return ''
+    },
+  },
+}
+</script>
+<style lang="stylus"></style>

From f254fb30b247676221c1dc53c3a92862595df3e6 Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Fri, 7 Apr 2023 10:50:21 +0530
Subject: [PATCH 2/8] Revise work based on received feedback

---
 src/router.js                                |  3 +-
 src/views/Prefixes.vue                       | 36 +++++-----
 src/views/charts/PrefixDependenciesChart.vue | 75 ++------------------
 src/views/charts/layouts.js                  |  1 +
 4 files changed, 26 insertions(+), 89 deletions(-)

diff --git a/src/router.js b/src/router.js
index 6316b157..e9a10170 100644
--- a/src/router.js
+++ b/src/router.js
@@ -107,7 +107,8 @@ export default new Router({
     },
     {
       name: 'prefixes',
-      path: `${routerBase}prefixes/:asn?`,
+      path: `${routerBase}prefixes/:prefix?`,
+      //path: `${routerBase}prefixes/:prefix/:prefix_length?`,
       components: {
         header: Header,
         footer: Footer,
diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
index 128c62cc..9ee85938 100644
--- a/src/views/Prefixes.vue
+++ b/src/views/Prefixes.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="IHR_as-and-ixp-container" class="IHR_char-container">
-    <div v-if="asNumber">
+    <div v-if="prefix">
       <div>
         <h1 class="text-center">{{ subHeader }} - {{ headerString }}</h1>
         <h3 class="text-center">
@@ -8,10 +8,9 @@
           <date-time-picker :min="minDate" :max="maxDate" :value="maxDate" @input="setReportDate" hideTime class="IHR_subtitle_calendar" />
         </h3>
       </div>
-      <!-- <button @click="generateReport()" class="np-btn">Generate Report</button> -->
       <q-list v-if="showGraphs">
         <q-expansion-item
-          :label="$t('charts.asInterdependencies.title')"
+          :label="$t('charts.prefixDependencies.title')"
           caption="BGP data"
           header-class="IHR_charts-title"
           icon="fas fa-project-diagram"
@@ -24,7 +23,7 @@
               <prefix-dependencies-chart
                 :start-time="startTime"
                 :end-time="endTime"
-                :as-number="asNumber"
+                :prefix="prefix"
                 :address-family="family"
                 :fetch="fetch"
                 ref="prefixDependenciesChart"
@@ -47,7 +46,7 @@
               <prefix-hegemony-chart
                 :start-time="startTime"
                 :end-time="endTime"
-                :as-number="asNumber"
+                :prefix="prefix"
                 :fetch="fetch"
                 ref="prefixHegemonyChart"
               />
@@ -69,8 +68,8 @@
               <network-delay-chart
                 :start-time="startTime"
                 :end-time="endTime"
-                :startPointName="Math.abs(asNumber).toString()"
-                :startPointType="this.$route.params.asn.substring(0, 2)"
+                :startPointName="prefix.toString()"
+                :startPointType="prefix"
                 :fetch="fetch"
                 searchBar
                 ref="networkDelayChart"
@@ -80,7 +79,7 @@
           </q-card>
         </q-expansion-item>
 
-        <q-expansion-item
+        <!-- <q-expansion-item
           :label="$t('charts.delayAndForwarding.title')"
           caption="Traceroute data"
           header-class="IHR_charts-title"
@@ -94,13 +93,14 @@
               <delay-and-forwarding-chart
                 :start-time="startTime"
                 :end-time="endTime"
-                :as-number="asNumber"
+                :prefix="prefix"
                 :fetch="fetch"
                 ref="delayAndForwardingChart"
               />
             </q-card-section>
           </q-card>
-        </q-expansion-item>
+        </q-expansion-item> -->
+
         <q-expansion-item
           :label="$t('charts.disconnections.title')"
           caption="RIPE Atlas log"
@@ -113,7 +113,7 @@
           <q-card class="IHR_charts-body">
             <q-card-section>
               <disco-chart
-                :streamName="asNumber"
+                :streamName="prefix"
                 :start-time="startTime"
                 :end-time="endTime"
                 :fetch="fetch"
@@ -190,7 +190,7 @@ import PrefixHegemonyChart from '@/views/charts/PrefixHegemonyChart'
 import DiscoChart, { DEFAULT_DISCO_AVG_LEVEL } from '@/views/charts/global/DiscoChart'
 import DelayAndForwardingChart from '@/views/charts/DelayAndForwardingChart'
 import NetworkDelayChart from '@/views/charts/NetworkDelayChart'
-import { AS_FAMILY, NetworkQuery, HegemonyPrefixQuery } from '@/plugins/IhrApi'
+import { AS_FAMILY, HegemonyPrefixQuery } from '@/plugins/IhrApi'
 import DateTimePicker from '@/components/DateTimePicker'
 import NetworkSearchBar from '@/components/search_bar/NetworkSearchBar'
 import html2pdf from 'html2pdf.js'
@@ -218,14 +218,12 @@ export default {
     NetworkSearchBar,
   },
   data() {
-    // let asNumber = this.$options.filters.ihr_AsOrIxpToNumber(this.$route.params.asn)
-    let prefix = this.$route.query.prefix
+    let prefix = this.$route.params.prefix
     let addressFamily = this.$route.query.af
     return {
       addressFamily: addressFamily == undefined ? 4 : addressFamily,
       loadingStatus: LOADING_STATUS.LOADING,
       prefix: prefix,
-      asName: null,
       charRefs: CHART_REFS,
       minAvgLevel: DEFAULT_DISCO_AVG_LEVEL,
       show: {
@@ -246,7 +244,6 @@ export default {
   methods: {
     pushRoute() {
       this.$router.replace({
-        //this.$router.replace({ query: Object.assign({}, this.$route.query, { hege_dt: clickData.points[0].x, hege_tb: table }) });
         query: Object.assign({}, this.$route.query, {
           af: this.family,
           last: this.interval.dayDiff(),
@@ -344,15 +341,14 @@ export default {
       this.pushRoute()
     },
     '$route.params.prefix': {
-      handler: function (prefix) {
-        console.log(this.prefix)
-        console.log(prefix)
-
+      handler: function(prefix) {
         if (this.$route.query.prefix != this.prefix) {
           this.loadingStatus = LOADING_STATUS.LOADING
           this.prefix = this.$route.query.prefix
           this.netName()
         }
+        console.log(this.prefix)
+        console.log(prefix)
       },
       deep: true,
     },
diff --git a/src/views/charts/PrefixDependenciesChart.vue b/src/views/charts/PrefixDependenciesChart.vue
index f7caaa82..03598b10 100644
--- a/src/views/charts/PrefixDependenciesChart.vue
+++ b/src/views/charts/PrefixDependenciesChart.vue
@@ -57,16 +57,6 @@
                 <a :href="dependencyUrl" target="_blank" id="tableUrl">{{ dependencyUrl }}</a>
               </td>
             </tr>
-            <tr>
-              <td>
-                <p class="text-subtitle1">
-                  {{ $t('charts.prefixDependencies.table.dependentTitle') }}
-                </p>
-              </td>
-              <td>
-                <a :href="dependentUrl" target="_blank" id="tableUrl">{{ dependentUrl }}</a>
-              </td>
-            </tr>
           </table>
         </q-tab-panel>
       </q-tab-panels>
@@ -80,7 +70,7 @@ import { extend } from 'quasar'
 import PrefixDependenciesTable from './tables/PrefixDependenciesTable'
 import { PREFIX_DEPENDENCIES_LAYOUT } from './layouts'
 import i18n from '@/locales/i18n'
-import { HegemonyPrefixQuery, HegemonyConeQuery, AS_FAMILY } from '@/plugins/IhrApi'
+import { HegemonyPrefixQuery, AS_FAMILY } from '@/plugins/IhrApi'
 import ripeApi from '@/plugins/RipeApi'
 
 const DEFAULT_TRACE = [
@@ -132,10 +122,9 @@ export default {
         tableVisible: false,
         enableBgpPlay: false,
       },
+      asNumber: null,
       loadingHegemony: true,
-      loadingHegemonyCone: true,
       hegemonyFilter: null,
-      hegemonyConeFilter: null,
       traces: DEFAULT_TRACE,
       layout: PREFIX_DEPENDENCIES_LAYOUT,
       neighbours: [],
@@ -158,25 +147,17 @@ export default {
         .timeInterval(this.startTime, this.endTime)
         .orderedByTime()
     },
-    makeHegemonyConeFilter() {
-      return new HegemonyConeQuery()
-        .prefix(this.prefix)
-        .addressFamily(this.addressFamily)
-        .timeInterval(this.startTime, this.endTime)
-        .orderedByTime()
-    },
     apiCall() {
       if (this.prefix == '') return
       this.updateAxesLabel()
       this.hegemonyFilter = this.makeHegemonyFilter()
-      this.hegemonyConeFilter = this.makeHegemonyConeFilter()
       this.traces = extend(true, [], DEFAULT_TRACE)
       this.loading = true
       this.loadingHegemony = true
       this.loadingHegemonyCone = true
       this.queryHegemonyAPI()
-      this.queryHegemonyConeAPI()
       this.neighbours = []
+
       ripeApi.asnNeighbours(this.asNumber).then(res => {
         res.data.neighbours.forEach(neighbour => {
           this.neighbours.push(neighbour.asn)
@@ -208,7 +189,6 @@ export default {
 
       this.details.activeTab = table
       let dependencyFilter = this.makeHegemonyFilter().timeInterval(intervalStart, intervalEnd)
-      let dependentFilter = dependencyFilter.clone().originAs().asNumber(this.asNumber)
       this.updateTable('dependency', 'prefix', dependencyFilter, intervalStart, intervalEnd)
     },
     updateTable(tableType, hegemonyComparator, filter, intervalStart, intervalEnd) {
@@ -266,26 +246,12 @@ export default {
     },
     queryHegemonyAPI() {
       this.loadingHegemony = true
-      this.$ihr_api.hegemony(
+      this.$ihr_api.hegemony_prefix(
         this.hegemonyFilter,
         result => {
           this.fetchHegemony(result.results)
           this.loadingHegemony = false
-          this.loading = this.loadingHegemony || this.loadingHegemonyCone
-        },
-        error => {
-          console.error(error) //FIXME do a correct alert
-        }
-      )
-    },
-    queryHegemonyConeAPI() {
-      this.loadingHegemonyCone = true
-      this.$ihr_api.hegemony_cone(
-        this.hegemonyConeFilter,
-        result => {
-          this.fetchHegemonyCone(result.results)
-          this.loadingHegemonyCone = false
-          this.loading = this.loadingHegemony || this.loadingHegemonyCone
+          this.loading = this.loadingHegemony
         },
         error => {
           console.error(error) //FIXME do a correct alert
@@ -294,6 +260,7 @@ export default {
     },
     fetchHegemony(data) {
       console.log('fetchHegemony')
+      console.log(data)
       let traces = {}
       let missingDataList = []
 
@@ -301,7 +268,7 @@ export default {
       let minX, maxX
 
       data.forEach(elem => {
-        if (elem.asn == this.asNumber) return
+        //if (elem.asn == this.asNumber) return
         let trace = traces[elem.asn]
 
         if (anotherAsn === undefined) anotherAsn = elem.asn
@@ -486,31 +453,6 @@ export default {
       // console.log(this.traces)
       // console.log(traces)
     },
-    fetchHegemonyCone(data) {
-      console.log('fetchHegemonyCone')
-      let trace = this.traces[0]
-      data.forEach(resp => {
-        let prevDate = Date.parse(trace.x.slice(-1)[0])
-        let currDate = Date.parse(resp.timebin)
-
-        if (prevDate && currDate.getTime() > prevDate.getTime() + timeResolution + 1) {
-          trace.y.push(null)
-          trace.x.push('nodate')
-        }
-
-        trace.y.push(resp.conesize)
-        trace.x.push(resp.timebin)
-      })
-      for (let i = 1; i < trace.length; i++) {
-        let a = new Date(trace[i - 1].x)
-        let b = new Date(trace[i].x)
-        if (isNaN(a) || isNaN(b) || b - a < 0) {
-          console.error('error', a, b, b - a)
-        }
-      }
-      this.noData |= trace.length == 0
-      this.layout.datarevision = new Date().getTime()
-    },
     clearGraph() {
       this.traces = []
       this.layout.datarevision = new Date().getTime()
@@ -549,9 +491,6 @@ export default {
     hegemonyUrl() {
       return this.$ihr_api.getUrl(this.hegemonyFilter)
     },
-    hegemonyConeUrl() {
-      return this.$ihr_api.getUrl(this.hegemonyConeFilter)
-    },
     dependencyUrl() {
       return this.$ihr_api.getUrl(this.details.tablesData.dependency.filter)
     },
diff --git a/src/views/charts/layouts.js b/src/views/charts/layouts.js
index 605d08cc..a54e765e 100644
--- a/src/views/charts/layouts.js
+++ b/src/views/charts/layouts.js
@@ -116,6 +116,7 @@ export {
   DISCO_LAYOUT,
   DELAY_AND_FORWARDING_LAYOUT,
   AS_INTERDEPENDENCIES_LAYOUT,
+  PREFIX_DEPENDENCIES_LAYOUT,
   DELAY_CHART_LAYOUT,
   NET_DELAY_LAYOUT,
   RIR_COUNTRY_SUNBURST_LAYOUT,

From 2d9ba7338e2403387941f5bbb0a6227153a4018e Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Fri, 7 Apr 2023 12:52:27 +0530
Subject: [PATCH 3/8] Revise work based on received feedback

---
 src/locales/langs/en-us.json                 | 14 ++++++++++++++
 src/views/Prefixes.vue                       | 11 ++++-------
 src/views/charts/PrefixDependenciesChart.vue | 10 ++++------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/locales/langs/en-us.json b/src/locales/langs/en-us.json
index fa945c09..0a0936cb 100644
--- a/src/locales/langs/en-us.json
+++ b/src/locales/langs/en-us.json
@@ -98,6 +98,20 @@
         "apiTitle": "Displayed data is available at the following links:"
       }
     },
+    "prefixDependencies": {
+      "title": "Prefix dependency",
+      "defaultTrace": "Number of dependents",
+      "yaxis": "dependency",
+      "yaxis2": "Number of ASes<br> dependent on ",
+      "table": {
+        "dependencyTitle": "prefix dependency",
+        "dependentTitle": "dependent networks",
+        "increment": "increment",
+        "dependencies": "Dependency",
+        "dependent": "dependent",
+        "apiTitle": "Displayed data is available at the following links:"
+      }
+    },
     "countryHegemony": {
       "title": "Network Dependency",
       "table": {
diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
index 9ee85938..11ee087e 100644
--- a/src/views/Prefixes.vue
+++ b/src/views/Prefixes.vue
@@ -79,7 +79,7 @@
           </q-card>
         </q-expansion-item>
 
-        <!-- <q-expansion-item
+        <q-expansion-item
           :label="$t('charts.delayAndForwarding.title')"
           caption="Traceroute data"
           header-class="IHR_charts-title"
@@ -99,7 +99,7 @@
               />
             </q-card-section>
           </q-card>
-        </q-expansion-item> -->
+        </q-expansion-item>
 
         <q-expansion-item
           :label="$t('charts.disconnections.title')"
@@ -264,8 +264,8 @@ export default {
           this.show.delayAndForwarding = results.results[0].delay_forwarding
           this.show.disco_disable = !results.results[0].disco
           this.show.disco = results.results[0].disco
-          this.show.hegemony_disable = !results.results[0].hegemony
-          this.show.hegemony = results.results[0].hegemony
+          this.show.hegemony_disable = !results.results[0].hege
+          this.show.hegemony = results.results[0].hege
         })
 
         this.prefix = results.results[0].prefix
@@ -289,7 +289,6 @@ export default {
         jsPDF: { unit: 'in', format: 'a3', orientation: 'l' },
       }
       html2pdf(element, opt)
-      console.log('button is clicked')
     },
   },
   mounted() {
@@ -347,8 +346,6 @@ export default {
           this.prefix = this.$route.query.prefix
           this.netName()
         }
-        console.log(this.prefix)
-        console.log(prefix)
       },
       deep: true,
     },
diff --git a/src/views/charts/PrefixDependenciesChart.vue b/src/views/charts/PrefixDependenciesChart.vue
index 03598b10..f5c092a1 100644
--- a/src/views/charts/PrefixDependenciesChart.vue
+++ b/src/views/charts/PrefixDependenciesChart.vue
@@ -37,7 +37,7 @@
       </q-tabs>
       <q-tab-panels v-model="details.activeTab" animated>
         <q-tab-panel name="dependency">
-          <prefix-dependencies-table :data="networkDependencyData" :loading="details.tablesData.dependency.loading" />
+          <prefix-dependencies-table :data="prefixDependencyData" :loading="details.tablesData.dependency.loading" />
         </q-tab-panel>
         <q-tab-panel name="bgpPlay">
           <div class="bgplay-container">
@@ -78,7 +78,6 @@ const DEFAULT_TRACE = [
     // First trace is used for the hegemony cone
     x: [],
     y: [],
-    yaxis: 'y2',
     name: i18n.t('charts.prefixDependencies.defaultTrace'),
     showlegend: false,
     hovertemplate: '%{x}<br>' + '%{yaxis.title.text}: <b>%{y:.2f}</b>' + '<extra></extra>',
@@ -260,7 +259,6 @@ export default {
     },
     fetchHegemony(data) {
       console.log('fetchHegemony')
-      console.log(data)
       let traces = {}
       let missingDataList = []
 
@@ -478,14 +476,14 @@ export default {
 
       return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}Z`
     },
-    networkDependencyData() {
+    prefixDependencyData() {
       return this.details.tablesData.dependency.data.filter(elem => {
-        return elem.asn != this.asNumber
+        return true
       })
     },
     dependentNetworksData() {
       return this.details.tablesData.dependent.data.filter(elem => {
-        return elem.originasn != this.asNumber
+        return true
       })
     },
     hegemonyUrl() {

From 4260f4d861d91dd2c12095644027254cd0d579fa Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Fri, 7 Apr 2023 13:57:05 +0530
Subject: [PATCH 4/8] Revise work based on received feedback

---
 src/router.js          |  2 +-
 src/views/Prefixes.vue | 91 ++----------------------------------------
 2 files changed, 4 insertions(+), 89 deletions(-)

diff --git a/src/router.js b/src/router.js
index e9a10170..b2161906 100644
--- a/src/router.js
+++ b/src/router.js
@@ -108,7 +108,7 @@ export default new Router({
     {
       name: 'prefixes',
       path: `${routerBase}prefixes/:prefix?`,
-      //path: `${routerBase}prefixes/:prefix/:prefix_length?`,
+      // path: `${routerBase}prefixes/:prefix/:prefix_length?`,
       components: {
         header: Header,
         footer: Footer,
diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
index 11ee087e..ec7946d3 100644
--- a/src/views/Prefixes.vue
+++ b/src/views/Prefixes.vue
@@ -53,76 +53,6 @@
             </q-card-section>
           </q-card>
         </q-expansion-item>
-
-        <q-expansion-item
-          :label="$t('charts.networkDelay.title')"
-          caption="Traceroute data"
-          header-class="IHR_charts-title"
-          icon="fas fa-shipping-fast"
-          v-model="show.net_delay"
-          :disable="show.net_delay_disable"
-        >
-          <q-separator />
-          <q-card class="IHR_charts-body">
-            <q-card-section>
-              <network-delay-chart
-                :start-time="startTime"
-                :end-time="endTime"
-                :startPointName="prefix.toString()"
-                :startPointType="prefix"
-                :fetch="fetch"
-                searchBar
-                ref="networkDelayChart"
-                @display="displayNetDelay"
-              />
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-
-        <q-expansion-item
-          :label="$t('charts.delayAndForwarding.title')"
-          caption="Traceroute data"
-          header-class="IHR_charts-title"
-          icon="fas fa-exchange-alt"
-          :disable="show.delayAndForwarding_disable"
-          v-model="show.delayAndForwarding"
-        >
-          <q-separator />
-          <q-card class="IHR_charts-body">
-            <q-card-section>
-              <delay-and-forwarding-chart
-                :start-time="startTime"
-                :end-time="endTime"
-                :prefix="prefix"
-                :fetch="fetch"
-                ref="delayAndForwardingChart"
-              />
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-
-        <q-expansion-item
-          :label="$t('charts.disconnections.title')"
-          caption="RIPE Atlas log"
-          header-class="IHR_charts-title"
-          icon="fas fa-plug"
-          :disable="show.disco_disable"
-          v-model="show.disco"
-        >
-          <q-separator />
-          <q-card class="IHR_charts-body">
-            <q-card-section>
-              <disco-chart
-                :streamName="prefix"
-                :start-time="startTime"
-                :end-time="endTime"
-                :fetch="fetch"
-                :minAvgLevel="9"
-                ref="ihrChartDisco"
-              />
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
         <div class="IHR_last-element">&nbsp;</div>
       </q-list>
     </div>
@@ -187,9 +117,6 @@
 import reportMixin from '@/views/mixin/reportMixin'
 import PrefixDependenciesChart from '@/views/charts/PrefixDependenciesChart'
 import PrefixHegemonyChart from '@/views/charts/PrefixHegemonyChart'
-import DiscoChart, { DEFAULT_DISCO_AVG_LEVEL } from '@/views/charts/global/DiscoChart'
-import DelayAndForwardingChart from '@/views/charts/DelayAndForwardingChart'
-import NetworkDelayChart from '@/views/charts/NetworkDelayChart'
 import { AS_FAMILY, HegemonyPrefixQuery } from '@/plugins/IhrApi'
 import DateTimePicker from '@/components/DateTimePicker'
 import NetworkSearchBar from '@/components/search_bar/NetworkSearchBar'
@@ -211,33 +138,25 @@ export default {
   components: {
     PrefixDependenciesChart,
     PrefixHegemonyChart,
-    DiscoChart,
-    DelayAndForwardingChart,
-    NetworkDelayChart,
     DateTimePicker,
     NetworkSearchBar,
   },
   data() {
     let prefix = this.$route.params.prefix
+    //let prefixLength = this.$route.params.prefix_length
     let addressFamily = this.$route.query.af
     return {
       addressFamily: addressFamily == undefined ? 4 : addressFamily,
       loadingStatus: LOADING_STATUS.LOADING,
       prefix: prefix,
       charRefs: CHART_REFS,
-      minAvgLevel: DEFAULT_DISCO_AVG_LEVEL,
       show: {
         rov: true,
         rov_disable: false,
-        delayAndForwarding: true,
-        delayAndForwarding_disable: false,
-        disco: true,
-        disco_disable: false,
         hegemony: true,
         hegemony_disable: false,
         net_delay: true,
         net_delay_disable: false,
-        measurementLab: true,
       },
     }
   },
@@ -260,10 +179,6 @@ export default {
         }
         // Hide tabs if not necessary
         this.$nextTick(function () {
-          this.show.delayAndForwarding_disable = !results.results[0].delay_forwarding
-          this.show.delayAndForwarding = results.results[0].delay_forwarding
-          this.show.disco_disable = !results.results[0].disco
-          this.show.disco = results.results[0].disco
           this.show.hegemony_disable = !results.results[0].hege
           this.show.hegemony = results.results[0].hege
         })
@@ -341,9 +256,9 @@ export default {
     },
     '$route.params.prefix': {
       handler: function(prefix) {
-        if (this.$route.query.prefix != this.prefix) {
+        if (this.$route.params.prefix != this.prefix) {
           this.loadingStatus = LOADING_STATUS.LOADING
-          this.prefix = this.$route.query.prefix
+          this.prefix = this.$route.params.prefix
           this.netName()
         }
       },

From 8e63e876e6b7fdc31e3bd32f0bd4e6703c6227c4 Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Fri, 7 Apr 2023 14:01:37 +0530
Subject: [PATCH 5/8] fix: netName

---
 src/views/Prefixes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
index ec7946d3..df622db7 100644
--- a/src/views/Prefixes.vue
+++ b/src/views/Prefixes.vue
@@ -179,8 +179,8 @@ export default {
         }
         // Hide tabs if not necessary
         this.$nextTick(function () {
-          this.show.hegemony_disable = !results.results[0].hege
-          this.show.hegemony = results.results[0].hege
+          this.show.hegemony_disable = !results.results[0].hege == 1 ? true : false
+          this.show.hegemony = results.results[0].hege == 1 ? true : false
         })
 
         this.prefix = results.results[0].prefix

From 9c41640224c5ca7637089a1205ae136d522e9fe7 Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Tue, 20 Jun 2023 16:31:17 +0530
Subject: [PATCH 6/8] Added prefix to search bar

---
 .../search_bar/NetworkSearchBar.vue           | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/components/search_bar/NetworkSearchBar.vue b/src/components/search_bar/NetworkSearchBar.vue
index 88b32b24..a9e24c4c 100644
--- a/src/components/search_bar/NetworkSearchBar.vue
+++ b/src/components/search_bar/NetworkSearchBar.vue
@@ -36,12 +36,17 @@
         <q-item-section side color="accent"> Country </q-item-section>
         <q-item-section class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-section>
       </q-item>
+      <q-item v-else-if="scope.opt.type == 'prefix'" v-bind="scope.itemProps" v-on="scope.itemEvents" @click="gotoPrefix(scope.opt.value)">
+        <q-item-selection side color="accent">Prefix</q-item-selection>
+        <q-item-selection class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-selection>
+      </q-item>
     </template>
   </q-select>
 </template>
 
 <script>
 import { NetworkQuery, CountryQuery } from '@/plugins/IhrApi'
+import IhrQuery from '@/plugins/query/IhrQuery.js'
 
 const MIN_CHARACTERS = 3
 const MAX_RESULTS = 10
@@ -82,6 +87,30 @@ export default {
     search(value, update) {
       this.loading = true
       this.options = []
+      if (value.includes('/')) {
+        const prefixQuery = { prefix: value }
+        this.$ihr_api.prefixes(
+          prefixQuery,
+          result => {
+            console.log(result)
+            result.results.some(element => {
+              this.options.push({
+                value: element.prefix,
+                name: element.country,
+                type: 'prefix',
+              })
+              update()
+              return this.options.length > MAX_RESULTS
+            })
+            this.loading = false
+            window.location.href = 'prefixResults.html'
+          },
+          error => {
+            // eslint-disable-next-line no-console
+            console.error(error)
+          }
+        )
+      }
       this.countryQuery.containsName(value)
       this.$ihr_api.country(this.countryQuery, result => {
         result.results.some(element => {
@@ -94,7 +123,7 @@ export default {
         })
       })
       if (!this.noAS) {
-        this.networkQuery.mixedContentSearch(value)
+        this.networkQuery.mixedContentSearch(searchTerm)
         this.$ihr_api.network(
           this.networkQuery,
           result => {
@@ -110,10 +139,40 @@ export default {
             this.loading = false
           },
           error => {
+            // eslint-disable-next-line no-console
             console.error(error)
           }
         )
       }
+      if (prefix) {
+        const query = new IhrQuery()
+        query.hegemonyPrefix(prefix)
+        this.$ihr_api.hegemonyPrefix(query, result => {
+          result.results.some(element => {
+            const countryCode = element.country_code
+            const rpki = element.rpki
+            const irr = element.irr
+            const delegatedStatus = element.delegated_status
+            // display in table form in the html
+            const asDependencies = element.as_dependencies
+            //use this data for the graph
+            this.options.push({
+              value: element.prefix,
+              name: element.description,
+              type: 'prefix',
+            })
+            update()
+            return this.options.length > MAX_RESULTS
+          })
+          this.loading = false
+        })
+      }
+    },
+    gotoPrefix(code) {
+      this.$router.push({
+        name: 'prefixes',
+        params: { prefix: code },
+      })
     },
     gotoASN(number) {
       this.$router.push({

From 59a951d9f689798dfbcea6e515eb3d115471577a Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Wed, 16 Aug 2023 10:26:20 +0530
Subject: [PATCH 7/8] added regex to match prefix

---
 .../search_bar/NetworkSearchBar.vue           | 51 ++++++-------------
 src/views/Networks.vue                        |  4 +-
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/src/components/search_bar/NetworkSearchBar.vue b/src/components/search_bar/NetworkSearchBar.vue
index a9e24c4c..d51c098d 100644
--- a/src/components/search_bar/NetworkSearchBar.vue
+++ b/src/components/search_bar/NetworkSearchBar.vue
@@ -37,16 +37,15 @@
         <q-item-section class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-section>
       </q-item>
       <q-item v-else-if="scope.opt.type == 'prefix'" v-bind="scope.itemProps" v-on="scope.itemEvents" @click="gotoPrefix(scope.opt.value)">
-        <q-item-selection side color="accent">Prefix</q-item-selection>
-        <q-item-selection class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-selection>
+        <q-item-section side color="accent">Prefix</q-item-section>
+        <q-item-section class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-section>
       </q-item>
     </template>
   </q-select>
 </template>
 
 <script>
-import { NetworkQuery, CountryQuery } from '@/plugins/IhrApi'
-import IhrQuery from '@/plugins/query/IhrQuery.js'
+import { NetworkQuery, CountryQuery, HegemonyPrefixQuery } from '@/plugins/IhrApi'
 
 const MIN_CHARACTERS = 3
 const MAX_RESULTS = 10
@@ -81,29 +80,34 @@ export default {
       always: false,
       networkQuery: new NetworkQuery().orderedByNumber(),
       countryQuery: new CountryQuery().orderedByCode(),
+      prefixQuery: new HegemonyPrefixQuery(),
     }
   },
   methods: {
     search(value, update) {
+      console.log('triggered!')
+      const prefixRegex = /^(?:(?:\d{1,3}\.){0,3}\d{0,3}(?:\/\d{1,2})?|(?:[0-9a-fA-F]{1,4}:){0,7}[0-9a-fA-F]{0,4}(?:\/\d{1,3})?)$/
+      const prefixMatch = prefixRegex.exec(value)
+      console.log(prefixMatch)
       this.loading = true
       this.options = []
-      if (value.includes('/')) {
-        const prefixQuery = { prefix: value }
-        this.$ihr_api.prefixes(
-          prefixQuery,
+      if (prefixMatch) {
+        this.prefixQuery.prefix(value)
+        console.log(this.prefixQuery)
+        this.$ihr_api.hegemony_prefix(
+          this.prefixQuery,
           result => {
-            console.log(result)
             result.results.some(element => {
+              console.log(element)
               this.options.push({
                 value: element.prefix,
-                name: element.country,
+                name: element.prefix,
                 type: 'prefix',
               })
               update()
               return this.options.length > MAX_RESULTS
             })
             this.loading = false
-            window.location.href = 'prefixResults.html'
           },
           error => {
             // eslint-disable-next-line no-console
@@ -123,7 +127,7 @@ export default {
         })
       })
       if (!this.noAS) {
-        this.networkQuery.mixedContentSearch(searchTerm)
+        this.networkQuery.mixedContentSearch(value)
         this.$ihr_api.network(
           this.networkQuery,
           result => {
@@ -144,29 +148,6 @@ export default {
           }
         )
       }
-      if (prefix) {
-        const query = new IhrQuery()
-        query.hegemonyPrefix(prefix)
-        this.$ihr_api.hegemonyPrefix(query, result => {
-          result.results.some(element => {
-            const countryCode = element.country_code
-            const rpki = element.rpki
-            const irr = element.irr
-            const delegatedStatus = element.delegated_status
-            // display in table form in the html
-            const asDependencies = element.as_dependencies
-            //use this data for the graph
-            this.options.push({
-              value: element.prefix,
-              name: element.description,
-              type: 'prefix',
-            })
-            update()
-            return this.options.length > MAX_RESULTS
-          })
-          this.loading = false
-        })
-      }
     },
     gotoPrefix(code) {
       this.$router.push({
diff --git a/src/views/Networks.vue b/src/views/Networks.vue
index 7b036e51..a144f4d1 100644
--- a/src/views/Networks.vue
+++ b/src/views/Networks.vue
@@ -229,8 +229,8 @@ import NetworkDelayChart from '@/views/charts/NetworkDelayChart'
 import { AS_FAMILY, NetworkQuery } from '@/plugins/IhrApi'
 import DateTimePicker from '@/components/DateTimePicker'
 import NetworkSearchBar from '@/components/search_bar/NetworkSearchBar'
-import MeasurementLab from '@/views/charts/MeasurementLab.vue'
-import IodaChart from './charts/IodaChart.vue'
+// import MeasurementLab from '@/views/charts/MeasurementLab.vue'
+// import IodaChart from './charts/IodaChart.vue'
 import html2pdf from 'html2pdf.js'
 
 const LOADING_STATUS = {

From 51b2174d1e7b67875012768d688af12d135b6822 Mon Sep 17 00:00:00 2001
From: Roopesh Saravanan <roopeshsaravanan.dev@gmail.com>
Date: Wed, 18 Oct 2023 23:15:40 +0530
Subject: [PATCH 8/8] changed route definition for prefixes

---
 src/components/ReactiveChart.vue              | 14 +++----
 .../search_bar/NetworkSearchBar.vue           |  7 +---
 src/locales/langs/en-us.json                  |  1 +
 src/router.js                                 |  4 +-
 src/views/Header.vue                          |  7 +++-
 src/views/Prefixes.vue                        | 37 ++++++++++++++-----
 src/views/charts/AsInterdependenciesChart.vue |  4 +-
 src/views/charts/PrefixDependenciesChart.vue  | 35 ++++++++----------
 8 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/src/components/ReactiveChart.vue b/src/components/ReactiveChart.vue
index 704bedbc..6d41470d 100644
--- a/src/components/ReactiveChart.vue
+++ b/src/components/ReactiveChart.vue
@@ -48,17 +48,17 @@ export default {
     }
   },
   emits: {
-    'plotly-click': function(clickData) {
+    'plotly-click': function (clickData) {
       if (clickData !== null) {
-        return true;
+        return true
       } else {
-        console.warn('Click Data is missing!');
-        return false;
+        console.warn('Click Data is missing!')
+        return false
       }
     },
-    'loaded': function() {
-      return true;
-    }
+    loaded: function () {
+      return true
+    },
   },
   data() {
     return {
diff --git a/src/components/search_bar/NetworkSearchBar.vue b/src/components/search_bar/NetworkSearchBar.vue
index d51c098d..c6308c93 100644
--- a/src/components/search_bar/NetworkSearchBar.vue
+++ b/src/components/search_bar/NetworkSearchBar.vue
@@ -85,20 +85,16 @@ export default {
   },
   methods: {
     search(value, update) {
-      console.log('triggered!')
       const prefixRegex = /^(?:(?:\d{1,3}\.){0,3}\d{0,3}(?:\/\d{1,2})?|(?:[0-9a-fA-F]{1,4}:){0,7}[0-9a-fA-F]{0,4}(?:\/\d{1,3})?)$/
       const prefixMatch = prefixRegex.exec(value)
-      console.log(prefixMatch)
       this.loading = true
       this.options = []
       if (prefixMatch) {
         this.prefixQuery.prefix(value)
-        console.log(this.prefixQuery)
         this.$ihr_api.hegemony_prefix(
           this.prefixQuery,
           result => {
             result.results.some(element => {
-              console.log(element)
               this.options.push({
                 value: element.prefix,
                 name: element.prefix,
@@ -150,9 +146,10 @@ export default {
       }
     },
     gotoPrefix(code) {
+      const [host, prefixLength] = code.split('/')
       this.$router.push({
         name: 'prefixes',
-        params: { prefix: code },
+        params: { host: host, prefix_length: prefixLength },
       })
     },
     gotoASN(number) {
diff --git a/src/locales/langs/en-us.json b/src/locales/langs/en-us.json
index 70c544fd..0c3d2f8d 100644
--- a/src/locales/langs/en-us.json
+++ b/src/locales/langs/en-us.json
@@ -14,6 +14,7 @@
     "globalReport": "Global",
     "countryReport": "Country",
     "networkReport": "Network",
+    "prefixReport": "Prefix",
     "rovReport": "Route Origin Validation",
     "covid19": "COVID19",
     "contact": "Contact",
diff --git a/src/router.js b/src/router.js
index b2161906..a33cdc6c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -107,8 +107,8 @@ export default new Router({
     },
     {
       name: 'prefixes',
-      path: `${routerBase}prefixes/:prefix?`,
-      // path: `${routerBase}prefixes/:prefix/:prefix_length?`,
+      path: `${routerBase}prefixes/:host?/:prefix_length?`,
+      // path: `${routerBase}prefixes/:prefix?`,
       components: {
         header: Header,
         footer: Footer,
diff --git a/src/views/Header.vue b/src/views/Header.vue
index c0b8c27e..c754b4d6 100644
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
@@ -98,6 +98,11 @@ const simple_menu = [
         routeName: 'networks',
         summary: 'Details for a single network (AS or IXP)',
       },
+      {
+        entryName: 'header.prefixReport',
+        routeName: 'prefixes',
+        summary: 'Details for a prefix',
+      },
       {
         entryName: 'header.rovReport',
         routeName: 'rov',
@@ -273,7 +278,7 @@ menu-delinkify(val)
 
   &last-element
     height 50px;
-    
+
 @media screen and (max-width: 1024px)
   .col-12.row.no-wrap.items-center
     justify-content space-around
diff --git a/src/views/Prefixes.vue b/src/views/Prefixes.vue
index df622db7..34d273b3 100644
--- a/src/views/Prefixes.vue
+++ b/src/views/Prefixes.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="IHR_as-and-ixp-container" class="IHR_char-container">
-    <div v-if="prefix">
+    <div v-if="host && prefixLength">
       <div>
         <h1 class="text-center">{{ subHeader }} - {{ headerString }}</h1>
         <h3 class="text-center">
@@ -142,12 +142,16 @@ export default {
     NetworkSearchBar,
   },
   data() {
-    let prefix = this.$route.params.prefix
-    //let prefixLength = this.$route.params.prefix_length
+    // let prefix = this.$route.params.prefix
+    let host = this.$route.params.host
+    let prefixLength = this.$route.params.prefix_length
+    let prefix = host && prefixLength ? this.getPrefix(host, prefixLength) : false
     let addressFamily = this.$route.query.af
     return {
       addressFamily: addressFamily == undefined ? 4 : addressFamily,
       loadingStatus: LOADING_STATUS.LOADING,
+      host: host,
+      prefixLength: prefixLength,
       prefix: prefix,
       charRefs: CHART_REFS,
       show: {
@@ -184,6 +188,9 @@ export default {
         })
 
         this.prefix = results.results[0].prefix
+        const [host, prefixLength] = this.prefix.split('/')
+        this.host = host
+        this.prefixLength = prefixLength
         this.loadingStatus = LOADING_STATUS.LOADED
         this.fetch = true
       })
@@ -205,6 +212,9 @@ export default {
       }
       html2pdf(element, opt)
     },
+    getPrefix(host, prefixLength) {
+      return `${host}/${prefixLength}`
+    },
   },
   mounted() {
     this.netName()
@@ -254,13 +264,22 @@ export default {
     addressFamily() {
       this.pushRoute()
     },
-    '$route.params.prefix': {
-      handler: function(prefix) {
-        if (this.$route.params.prefix != this.prefix) {
-          this.loadingStatus = LOADING_STATUS.LOADING
-          this.prefix = this.$route.params.prefix
-          this.netName()
+    '$route.params': {
+      handler: function (params) {
+        // if (this.$route.params.prefix != this.prefix) {
+        //   this.loadingStatus = LOADING_STATUS.LOADING
+        //   this.prefix = this.$route.params.prefix
+        //   this.netName()
+        // }
+        this.loadingStatus = LOADING_STATUS.LOADING
+        if (params.host != this.host) {
+          this.host = params.host
+        }
+        if (params.prefix_length != this.prefixLength) {
+          this.prefixLength = params.prefix_length
         }
+        this.prefix = this.getPrefix(this.host, this.prefixLength)
+        this.netName()
       },
       deep: true,
     },
diff --git a/src/views/charts/AsInterdependenciesChart.vue b/src/views/charts/AsInterdependenciesChart.vue
index fff73e3a..b1a6cc86 100644
--- a/src/views/charts/AsInterdependenciesChart.vue
+++ b/src/views/charts/AsInterdependenciesChart.vue
@@ -559,8 +559,8 @@ export default {
         }
       }
 
-      //console.log(this.traces.length)
-      //console.log(traces)
+      // console.log(this.traces)
+      // console.log(traces)
 
       if (this.traces.length > 12) {
         this.layout.showlegend = false
diff --git a/src/views/charts/PrefixDependenciesChart.vue b/src/views/charts/PrefixDependenciesChart.vue
index f5c092a1..58fb5490 100644
--- a/src/views/charts/PrefixDependenciesChart.vue
+++ b/src/views/charts/PrefixDependenciesChart.vue
@@ -71,7 +71,7 @@ import PrefixDependenciesTable from './tables/PrefixDependenciesTable'
 import { PREFIX_DEPENDENCIES_LAYOUT } from './layouts'
 import i18n from '@/locales/i18n'
 import { HegemonyPrefixQuery, AS_FAMILY } from '@/plugins/IhrApi'
-import ripeApi from '@/plugins/RipeApi'
+// import ripeApi from '@/plugins/RipeApi'
 
 const DEFAULT_TRACE = [
   {
@@ -134,6 +134,7 @@ export default {
   },
   mounted() {
     this.tableFromQuery()
+    console.log(this.prefix)
   },
   methods: {
     updateAxesLabel() {
@@ -157,11 +158,13 @@ export default {
       this.queryHegemonyAPI()
       this.neighbours = []
 
-      ripeApi.asnNeighbours(this.asNumber).then(res => {
-        res.data.neighbours.forEach(neighbour => {
-          this.neighbours.push(neighbour.asn)
-        })
-      })
+      console.log(this.traces)
+
+      // ripeApi.asnNeighbours(this.prefix).then(res => {
+      //   res.data.neighbours.forEach(neighbour => {
+      //     this.neighbours.push(neighbour.asn)
+      //   })
+      // })
     },
     plotClick(clickData) {
       var table = 'dependency'
@@ -292,6 +295,8 @@ export default {
           this.traces.push(trace)
         }
 
+        console.log(traces)
+
         if (!minX) {
           minX = Date.parse(elem.timebin).getTime()
           maxX = Date.parse(elem.timebin).getTime()
@@ -304,9 +309,6 @@ export default {
         let prevDate = Date.parse(trace.x.slice(-1)[0])
         let currDate = Date.parse(elem.timebin)
 
-        // let prevDateSeconds = prevDate && prevDate.getTime()
-        // console.log(prevDate, prevDateSeconds, prevDate)
-
         if (prevDate && currDate.getTime() > prevDate.getTime() + timeResolution + 1) {
           if (anotherAsn === elem.asn) {
             missingDataList.push({
@@ -324,8 +326,6 @@ export default {
       this.noData |= Object.keys(traces).length == 0
       this.layout.datarevision = new Date().getTime()
 
-      // console.log('md', missingDataList)
-
       let shapeList = []
 
       missingDataList.forEach(interval => {
@@ -373,11 +373,8 @@ export default {
 
       this.layout['shapes'] = shapeList
 
-      // console.log('maxX', new Date(maxX).toISOString())
-      // console.log(new Date(maxX).toISOString())
       let maxXIso = new Date(maxX).toISOString().split('.')[0] + 'Z'
       let minXIso = new Date(minX).toISOString().split('.')[0] + 'Z'
-      // console.log(minXIso, maxXIso)
 
       for (let i = 1; i < this.traces.length; i++) {
         if (this.traces[i].mode && this.traces[i].mode === 'text') continue
@@ -388,11 +385,12 @@ export default {
         let lastDateMilliSeconds = Date.parse(lastDate).getTime()
         let firstDateMilliSeconds = Date.parse(firstDate).getTime()
 
+        console.log(lastDate !== maxXIso)
         if (lastDate !== maxXIso) {
           let noOfPointsToAdd
           let interval = maxX - Date.parse(currentTrace.x.slice(-1)[0]).getTime()
           noOfPointsToAdd = interval / timeResolution
-          // console.log('pts', interval / timeResolution)
+
           for (let j = 1; j <= noOfPointsToAdd; j++) {
             lastDateMilliSeconds += timeResolution
             let skip = false
@@ -411,9 +409,9 @@ export default {
             this.traces[i].x.push(d)
             this.traces[i].y.push(0)
           }
-          // console.log('lin traces', this.traces[i])
         }
 
+        console.log(firstDate !== minXIso)
         if (firstDate !== minXIso) {
           console.log('front defect', firstDate, this.traces[i], minXIso)
           let noOfPointsToAdd
@@ -442,7 +440,6 @@ export default {
             tempY.push(0)
           }
           tempX.reverse()
-          // console.log('tempx tempy', tempX, tempY)
           this.traces[i].x = tempX.concat(this.traces[i].x)
           this.traces[i].y = tempY.concat(this.traces[i].y)
         }
@@ -495,10 +492,10 @@ export default {
   },
   watch: {
     addressFamily() {
-      this.debouncedApiCall()
+      this.apiCall()
     },
     prefix() {
-      this.debouncedApiCall()
+      this.apiCall()
       this.details.tableVisible = false
     },
     'details.activeTab'(newValue) {