add base path

Author: dpgiakatos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iyp-browser",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "private": true,
   "type": "module",
   "scripts": {

src/components/Iframe.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, inject } from 'vue'
 import hljs from 'highlight.js'
 import 'highlight.js/scss/vs.scss'
 import { copyToClipboard } from 'quasar'
 
+const GlobalVariables = inject('GlobalVariables')
+
 const props = defineProps(['query'])
 
 const showIframeDialog = ref(false)
@@ -15,7 +17,11 @@ watch(
     const query = {
       query: props.query
     }
-    iFrameCode.value = `<iframe src="${window.location.origin}/embed/?session=[${encodeURIComponent(JSON.stringify(query))}]" width="100%" height="500px"></iframe>`
+    const pathName =
+      GlobalVariables.basePath.slice(-1) === '/'
+        ? GlobalVariables.basePath
+        : `${GlobalVariables.basePath}/`
+    iFrameCode.value = `<iframe src="${window.location.origin}${pathName}embed/?session=[${encodeURIComponent(JSON.stringify(query))}]" width="100%" height="500px"></iframe>`
   }
 )
 </script>

src/components/InputPanel.vue

@@ -167,7 +167,7 @@ onMounted(() => {
         // Captures alias + path variable in "n IN nodes(p)".
         const nodeInPathMatch = textUtilPosition.match(/\b(\w+)\s+IN\s+nodes\(\s*(\w+)\s*\)/)
 
-        // Gives the most recent node typed 
+        // Gives the most recent node typed
         const activeNodeLabel = matchNodes.length ? matchNodes[matchNodes.length - 1][1] : null
 
         // Gives the most recent relationship typed
@@ -199,7 +199,7 @@ onMounted(() => {
           targetNodes = [...new Set(targetNodes)] // Adds all unique nodes connected to the detected node type
         }
         if (justOpenedBlock) {
-          return { suggestions: [] } 
+          return { suggestions: [] }
         }
         if (genericNodeMatch) {
           const allProps = Object.values(schema.node_properties || {}).flat()
@@ -235,8 +235,8 @@ onMounted(() => {
             }
             properties = relTypes.flatMap((type) => schema.relationship_properties[type] || [])
             properties = [...new Set(properties)]
-          } 
-          // Case 2: Node alias in path context (n IN nodes(p)) 
+          }
+          // Case 2: Node alias in path context (n IN nodes(p))
           else if (nodeInPathMatch && alias === nodeInPathMatch[1]) {
             const pathVar = nodeInPathMatch[2]
             let nodeLabels = []

src/components/output/GraphOutput.vue

@@ -94,7 +94,7 @@ const fetchConnectedNodes = async (nodeId) => {
 const nodeExpansion = async (nodeId) => {
   const { nodes: newNodes, relationships: newRels } = await fetchConnectedNodes(nodeId)
 
-  // Fetches the existing nodes and relationships present in the graph 
+  // Fetches the existing nodes and relationships present in the graph
   const existingNodeIds = new Set(nvl.getNodes().map((n) => n.id))
   const existingRelIds = new Set(nvl.getRelationships().map((r) => r.id))
 
@@ -127,7 +127,6 @@ const nodeExpansion = async (nodeId) => {
       expandedState: expandedNodesMap.value
     })
   } else {
-
     // Notifies if the node isnt expandable or it is already expanded
     q.notify({
       message: 'Node is not expandable',
@@ -156,7 +155,7 @@ const nodeUnexpand = (nodeId) => {
       .map((n) => n.id)
     const relIds = expansion.relationships.map((r) => r.id)
 
-    // Removes the nodes and relationships connected to the specified node that are not already expanded 
+    // Removes the nodes and relationships connected to the specified node that are not already expanded
     nvl.removeNodesWithIds(nodeIds)
     nvl.removeRelationshipsWithIds(relIds)
     expandedNodesMap.value.delete(nodeId)
@@ -168,7 +167,6 @@ const nodeUnexpand = (nodeId) => {
       expandedState: expandedNodesMap.value
     })
   } else {
-
     // Notifies if the node isn't unexpandable
     q.notify({
       message: 'Node is not un-expandable',
@@ -182,7 +180,6 @@ const nodeUnexpand = (nodeId) => {
 
 // Deletes the specified node and removes it from the graph
 const nodeDeletion = (nodeId) => {
-
   // Gets all relationships connected to the node being deleted
   const relIds = props.relationships
     .filter((r) => r.from === nodeId || r.to === nodeId)

src/plugins/GlobalVariables.js

@@ -1,6 +1,9 @@
+const basePath = '/browser' // default value: '/'
+
 const GlobalVariables = {
   install: (app) => {
     const GlobalVariables = {
+      basePath: basePath,
       outputPanelHeight: 580,
       graphOverviewPanelWidth: 250,
       disableOutputPanelResizer: false,
@@ -10,4 +13,4 @@ const GlobalVariables = {
   }
 }
 
-export { GlobalVariables }
+export { GlobalVariables, basePath }

src/views/BrowserView.vue

@@ -23,7 +23,11 @@ const clearQuery = (uuid) => {
 }
 
 const shareQuery = (query) => {
-  const urlToShare = `${window.location.origin}/?session=[${JSON.stringify(query)}]`
+  const pathName =
+    GlobalVariables.basePath.slice(-1) === '/'
+      ? GlobalVariables.basePath
+      : `${GlobalVariables.basePath}/`
+  const urlToShare = `${window.location.origin}${pathName}?session=[${JSON.stringify(query)}]`
   copyToClipboard(urlToShare)
 }
 

vite.config.js

@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-
+import { basePath } from './src/plugins/GlobalVariables'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
@@ -8,6 +8,7 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: basePath,
   plugins: [
     vue({
       template: { transformAssetUrls }