fix bug in graph overview & iframe link

Author: dpgiakatos

package.json

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

src/components/Iframe.vue

@@ -9,22 +9,33 @@ const GlobalVariables = inject('GlobalVariables')
 const props = defineProps(['query'])
 
 const showIframeDialog = ref(false)
-const iFrameCode = ref('')
+const showGraphOverview = ref(true)
 
-watch(
-  () => props.query,
-  () => {
-    const query = {
-      query: props.query
-    }
-    const session = btoa(JSON.stringify([query]))
-    const pathName =
-      GlobalVariables.basePath.slice(-1) === '/'
-        ? GlobalVariables.basePath
-        : `${GlobalVariables.basePath}/`
-    iFrameCode.value = `<iframe src="${window.location.origin}${pathName}embed/?session=${session}" width="100%" height="500px"></iframe>`
+const createIframeCode = () => {
+  const query = {
+    query: props.query
   }
-)
+  const session = btoa(JSON.stringify([query]))
+  const pathName =
+    GlobalVariables.basePath.slice(-1) === '/'
+      ? GlobalVariables.basePath
+      : `${GlobalVariables.basePath}/`
+  return `<iframe src="${window.location.origin}${pathName}embed/?session=${session}&showGraphOverview=${showGraphOverview.value}" width="100%" height="500px"></iframe>`
+}
+// watch(
+//   () => props.query,
+//   () => {
+//     const query = {
+//       query: props.query
+//     }
+//     const session = btoa(JSON.stringify([query]))
+//     const pathName =
+//       GlobalVariables.basePath.slice(-1) === '/'
+//         ? GlobalVariables.basePath
+//         : `${GlobalVariables.basePath}/`
+//     iFrameCode.value = `<iframe src="${window.location.origin}${pathName}embed/?session=${session}&showGraphOverview=${showGraphOverview.value}" width="100%" height="500px"></iframe>`
+//   }
+// )
 </script>
 
 <template>
@@ -39,20 +50,12 @@ watch(
       <q-card-section>
         <div>
           You can embed this content within your webpage.
-          <br />
-          <q-btn
-            no-caps
-            dense
-            flat
-            @click="copyToClipboard(iFrameCode)"
-            style="width: 100%"
-            align="left"
-          >
-            <pre
-              style="text-align: left"
-            ><code style="white-space: pre-wrap;" v-html="hljs.highlight(iFrameCode, {language: 'html'}).value"></code></pre>
-            <q-tooltip> Click to copy </q-tooltip>
-          </q-btn>
+        </div>
+        <div>
+          <q-checkbox v-model="showGraphOverview" label="Show graph overview" />
+        </div>
+        <div>
+          <q-btn no-caps outline @click="copyToClipboard(createIframeCode())" label="Copy iFrame code" />
         </div>
       </q-card-section>
       <q-card-actions align="right">

src/components/OutputPanel.vue

@@ -12,7 +12,7 @@ const GlobalVariables = inject('GlobalVariables')
 
 const emits = defineEmits(['clear', 'share', 'update'])
 
-const props = defineProps(['query', 'disableInput', 'disableTopBar', 'disableResizer'])
+const props = defineProps(['query', 'disableInput', 'disableTopBar', 'disableResizer', 'hideGraphOverview'])
 
 const cypherQuery = ref('')
 const tab = ref('graph')
@@ -192,6 +192,7 @@ onMounted(() => {
             :relationships="relationships"
             :expanded-nodes-state="expandedNodesState"
             :disable-resizer="GlobalVariables.disableGraphOverviewPanelResizer"
+            :hide-overview="hideGraphOverview"
             @nodeExpanded="handleNodeExpanded"
             @nodeUnexpanded="handleNodeUnexpanded"
             @nodeDeleted="handleNodeDeleted"

src/components/output/GraphOutput.vue

@@ -14,7 +14,7 @@ import interact from 'interactjs'
 const Neo4jApi = inject('Neo4jApi')
 const GlobalVariables = inject('GlobalVariables')
 const emit = defineEmits(['nodeExpanded', 'nodeUnexpanded', 'nodeDeleted', 'updateNodeProperties'])
-const props = defineProps(['nodes', 'relationships', 'expandedNodesState', 'disableResizer'])
+const props = defineProps(['nodes', 'relationships', 'expandedNodesState', 'disableResizer', 'hideOverview'])
 
 const q = useQuasar()
 const expandedNodesMap = ref(props.expandedNodesState)
@@ -30,8 +30,8 @@ const selectedElement = ref({
   properties: {},
   clicked: false
 })
-const hideOverviewBtn = ref(false)
-const hideOverviewBtnIcon = ref('keyboard_arrow_up')
+const hideOverviewBtn = ref(props.hideOverview)
+const hideOverviewBtnIcon = ref(props.hideOverview ? 'keyboard_arrow_down' : 'keyboard_arrow_up')
 const overview = ref()
 let nvl = null
 const nodeRightClickMenu = ref({
@@ -477,7 +477,7 @@ onUnmounted(() => {
         </q-list>
       </q-menu>
     </div>
-    <div class="overview" ref="overview">
+    <div class="overview" ref="overview" :style="{ height: !hideOverviewBtn ? '100%' : 'auto' }">
       <q-card class="overview-card" :style="{ height: !hideOverviewBtn ? '100%' : 'auto' }">
         <q-bar class="fixed-top overview-bar">
           <div class="row justify-between" style="width: 100%">
@@ -635,7 +635,6 @@ onUnmounted(() => {
   top: 0px;
   right: 0px;
   width: v-bind('graphOverviewPanelWidth');
-  height: 100%;
   overflow-y: auto;
 }
 .overview-card {

src/views/BrowserView.vue

@@ -96,6 +96,7 @@ watch(
             :disable-input="false"
             :disable-top-bar="false"
             :disable-resizer="GlobalVariables.disableOutputPanelResizer"
+            :hide-graph-overview="false"
             @clear="clearQuery(query.uuid)"
             @share="shareQuery(query)"
             @update="updateQuery($event, query.uuid)"

src/views/EmbedView.vue

@@ -5,6 +5,7 @@ import OutputPanel from '@/components/OutputPanel.vue'
 
 const route = useRoute()
 const query = ref(JSON.parse(atob(route.query.session))[0])
+const showGraphOverview = ref(JSON.parse(route.query.showGraphOverview))
 </script>
 
 <template>
@@ -13,6 +14,7 @@ const query = ref(JSON.parse(atob(route.query.session))[0])
     :disable-input="true"
     :disable-top-bar="true"
     :disable-resizer="true"
+    :hide-graph-overview="!showGraphOverview"
     class="fullscreen"
   />
 </template>