resolve issue #912

package.json

@@ -17,13 +17,15 @@
     "axios": "^1.7.7",
     "dagre": "^0.8.5",
     "grid-layout-plus": "^1.0.5",
+    "highlight.js": "^11.11.1",
+    "highlightjs-cypher": "^1.2.0",
     "idb-keyval": "^6.2.1",
     "ip-address": "^10.0.1",
     "plotly.js-dist": "^2.35.2",
     "quasar": "^2.17.2",
     "swagger-ui": "^5.18.2",
     "v-network-graph": "^0.9.18",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5"
   },
@@ -39,6 +41,8 @@
     "jest": "^29.7.0",
     "joi": "^17.13.3",
     "prettier": "^3.3.3",
-    "vite": "^5.4.10"
+    "sass-embedded": "^1.85.0",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.2"
   }
 }

src/components/controllers/GenericCardController.vue

@@ -77,13 +77,13 @@ const getUrlAnchor = () => {
         />
       </QBar>
       <QCardSection>
-        <slot />
+        <slot></slot>
       </QCardSection>
     </QCard>
     <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"></div>
         </QCardSection>
         <QCardSection class="q-pt-none" v-html="infoDescription" />
         <QCardActions align="right">

src/components/iyp/as/ASRankings.vue

@@ -14,8 +14,8 @@ const rankings = ref({
   data: [],
   show: true,
   loading: true,
-  query:
-    'MATCH (:AS {asn: $asn})-[r:RANK]->(s:Ranking) RETURN r.rank AS rank, s.name AS name ORDER BY rank',
+  query: `MATCH (:AS {asn: $asn})-[r:RANK]->(s:Ranking)
+    RETURN r.rank AS rank, s.name AS name ORDER BY rank`,
   columns: [
     {
       name: 'Rank',

src/components/iyp/ixp/IXPMembers.vue

@@ -16,7 +16,7 @@ const members = ref({
   show: false,
   loading: true,
   query: `MATCH (:PeeringdbIXID {id: $id})<-[:EXTERNAL_ID]-(:IXP)<-[m:MEMBER_OF]-(a:AS)
-  WHERE m.reference_org <> 'CAIDA'
+    WHERE m.reference_org <> 'CAIDA'
     OPTIONAL MATCH (a)-[:NAME {reference_org:'PeeringDB'}]->(pdbn:Name)
     OPTIONAL MATCH (a)-[:NAME {reference_org:'BGP.Tools'}]->(btn:Name)
     OPTIONAL MATCH (a)-[:NAME {reference_org:'RIPE NCC'}]->(ripen:Name)

src/components/iyp/ixp/IXPRPKIRouteOriginAuthorization.vue

@@ -15,7 +15,7 @@ const roas = ref({
   show: false,
   loading: true,
   query: `MATCH (:PeeringdbIXID {id: $id})<-[:EXTERNAL_ID]-(:IXP)<-[m:MANAGED_BY]-(p:Prefix)
-  WHERE m.reference_org <> 'CAIDA'
+    WHERE m.reference_org <> 'CAIDA'
     OPTIONAL MATCH (p)-[roa:ROUTE_ORIGIN_AUTHORIZATION]-(a:AS)
     OPTIONAL MATCH (b:AS)-[:ORIGINATE]->(p)
     RETURN p.prefix AS prefix, roa.maxLength AS maxLength, roa.notBefore AS notBefore, roa.notAfter AS notAfter, roa.uri AS uri, COLLECT(DISTINCT b.asn) AS bgp, a.asn AS asn`,

src/components/iyp/prefix/PrefixPopularDomains.vue

@@ -17,10 +17,10 @@ const domains = ref({
   show: false,
   loading: true,
   query: `MATCH (p:Prefix {prefix: $prefix})<-[:PART_OF]-(i:IP)<-[:RESOLVES_TO]-(h:HostName)-[:PART_OF]-(d:DomainName)-[ra:RANK {reference_name:'tranco.top1m'}]->(rn:Ranking)
-WHERE h.name = d.name
- OPTIONAL MATCH (h)<-[:PART_OF]-(p)-[:CATEGORIZED]->(t:Tag)
- RETURN COLLECT(DISTINCT i.ip) AS ip, h.name as hostName, collect(DISTINCT t.label) as tags, ra.rank AS rank, split(h.name, '.')[-1] AS tld, 1/toFloat(ra.rank) AS inv_rank, rn.name as rankingName
- ORDER BY rank`,
+  WHERE h.name = d.name
+  OPTIONAL MATCH (h)<-[:PART_OF]-(p)-[:CATEGORIZED]->(t:Tag)
+  RETURN COLLECT(DISTINCT i.ip) AS ip, h.name as hostName, collect(DISTINCT t.label) as tags, ra.rank AS rank, split(h.name, '.')[-1] AS tld, 1/toFloat(ra.rank) AS inv_rank, rn.name as rankingName
+  ORDER BY rank`,
   columns: [
     {
       name: 'Tranco Rank',

src/components/iyp/prefix/PrefixPopularHostNames.vue

@@ -17,9 +17,9 @@ const domains = ref({
   show: false,
   loading: true,
   query: `MATCH (p:Prefix {prefix: $prefix})<-[:PART_OF]-(i:IP)<-[:RESOLVES_TO]-(h:HostName & !AuthoritativeNameServer)-[:PART_OF]-(d:DomainName)-[ra:RANK {reference_name:'tranco.top1m'}]->(rn:Ranking)
- OPTIONAL MATCH (h)<-[:PART_OF]-(p)-[:CATEGORIZED]->(t:Tag)
- RETURN COLLECT(DISTINCT i.ip) AS ip, h.name as hostName, collect(DISTINCT t.label) as tags, ra.rank AS rank, split(h.name, '.')[-1] AS tld, 1/toFloat(ra.rank) AS inv_rank, rn.name as rankingName
- ORDER BY rank`,
+    OPTIONAL MATCH (h)<-[:PART_OF]-(p)-[:CATEGORIZED]->(t:Tag)
+    RETURN COLLECT(DISTINCT i.ip) AS ip, h.name as hostName, collect(DISTINCT t.label) as tags, ra.rank AS rank, split(h.name, '.')[-1] AS tld, 1/toFloat(ra.rank) AS inv_rank, rn.name as rankingName
+    ORDER BY rank`,
   columns: [
     {
       name: 'Tranco Rank',

src/components/tables/IypGenericTable.vue

@@ -18,10 +18,15 @@ import {
   QMarkupTable,
   copyToClipboard
 } from 'quasar'
-import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import Tr from '@/i18n/translation'
-import { ref, inject, computed, watch, nextTick, onMounted } from 'vue'
+import { ref, inject, watch, onMounted } from 'vue'
 import '@/styles/chart.css'
+import hljs from 'highlight.js'
+import hljsCypher from 'highlightjs-cypher'
+import 'highlight.js/scss/vs.scss'
+
+hljs.registerLanguage('cypher', hljsCypher)
 
 const iyp_api = inject('iyp_api')
 
@@ -333,7 +338,7 @@ onMounted(() => {
       <QTabPanels v-model="activeTab" animated @transition="transition">
         <QTabPanel name="chart">
           <div id="chartContainer">
-            <slot />
+            <slot></slot>
           </div>
         </QTabPanel>
         <QTabPanel name="data">
@@ -373,8 +378,8 @@ onMounted(() => {
           </QTable>
         </QTabPanel>
         <QTabPanel name="api" class="text-left q-pa-lg" light>
-          <QBtn no-caps dense flat @click="copyToClipboard(cypherQuery)">
-            <code>{{ cypherQuery }}</code>
+          <QBtn no-caps dense flat @click="copyToClipboard(cypherQuery.replace(/^\s+|\s+$/gm, ''))">
+            <pre style="text-align: left;"><code v-html="hljs.highlight(cypherQuery.replace(/^\s+|\s+$/gm, ''), { language: 'cypher' }).value"></code></pre>
             <QTooltip>Click to copy</QTooltip>
           </QBtn>
           <div>

vite.config.js

@@ -5,6 +5,7 @@ import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { resolve, dirname } from 'node:path'
 import { existsSync } from 'fs'
+import VueDevTools from 'vite-plugin-vue-devtools'
 
 const dotPathFixPlugin = () => ({
   name: "dot-path-fix-plugin",
@@ -35,7 +36,8 @@ export default defineConfig({
       strictMessage: false,
       include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
     }),
-    dotPathFixPlugin()
+    dotPathFixPlugin(),
+    VueDevTools(),
   ],
   resolve: {
     alias: {