visualisation settings toggle

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -20,6 +20,7 @@
         :useResizeHandler="useResizeHandler"
         :debug="true"
         :advancedTraceTypeSelector="true"
+        :hideControls="!showViewSettings"
         @update="update"
         @render="onRender"
       />
@@ -47,7 +48,8 @@ export default {
     initOptions: Object,
     exportToPngEnabled: Boolean,
     exportToSvgEnabled: Boolean,
-    forPivot: Boolean
+    forPivot: Boolean,
+    showViewSettings: Boolean
   },
   emits: [
     'update:exportToSvgEnabled',
@@ -85,6 +87,9 @@ export default {
         dereference.default(this.state.data, this.dataSources)
         this.updatePlotly()
       }
+    },
+    showViewSettings() {
+      this.handleResize()
     }
   },
   created() {

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue

@@ -1,17 +1,24 @@
 <template>
-  <div class="plotly_editor">
+  <div :class="['plotly_editor', { with_controls: showViewSettings }]">
-    <GraphEditorControls>
+    <GraphEditorControls v-show="showViewSettings">
       <PanelMenuWrapper>
         <Panel group="Structure" name="Graph">
           <Fold name="Graph">
-            <Field>Choose keys explanation...</Field>
+            <Field>
+              Map your result set records to node and edge properties required
+              to build a graph. Learn more about result set requirements in the
+              documentation.
+            </Field>
             <Field label="Object type">
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.objectType"
                 @change="updateStructure('objectType', $event)"
               />
-              <Field>0 - node; 1 - edge</Field>
+              <Field>
+                A field indicating if the record is node (value&nbsp;0) or edge
+                (value&nbsp;1).
+              </Field>
             </Field>
 
             <Field label="Node Id">
@@ -20,6 +27,7 @@
                 :value="settings.structure.nodeId"
                 @change="updateStructure('nodeId', $event)"
               />
+              <Field> A field keeping unique node identifier. </Field>
             </Field>
 
             <Field label="Edge source">
@@ -28,6 +36,9 @@
                 :value="settings.structure.edgeSource"
                 @change="updateStructure('edgeSource', $event)"
               />
+              <Field>
+                A field keeping a node identifier where the edge starts.
+              </Field>
             </Field>
 
             <Field label="Edge target">
@@ -36,6 +47,9 @@
                 :value="settings.structure.edgeTarget"
                 @change="updateStructure('edgeTarget', $event)"
               />
+              <Field>
+                A field keeping a node identifier where the edge ends.
+              </Field>
             </Field>
           </Fold>
         </Panel>
@@ -164,6 +178,7 @@
         </Panel>
       </PanelMenuWrapper>
     </GraphEditorControls>
+
     <div
       ref="graph"
       :style="{
@@ -235,7 +250,8 @@ export default {
   inject: ['tabLayout'],
   props: {
     dataSources: Object,
-    initOptions: Object
+    initOptions: Object,
+    showViewSettings: Boolean
   },
   emits: ['update'],
   data() {
@@ -611,7 +627,7 @@ export default {
 </script>
 
 <style scoped>
-.plotly_editor > div {
+.plotly_editor.with_controls > div {
   display: flex !important;
 }
 

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="graphContainer" class="chart-container">
+  <div ref="graphContainer" class="graph-container">
     <div v-show="!dataSources" class="warning chart-warning">
       There is no data to build a graph. Run your SQL query and make sure the
       result is not empty.
@@ -14,6 +14,7 @@
         ref="graphEditor"
         :dataSources="dataSources"
         :initOptions="initOptions"
+        :showViewSettings="showViewSettings"
         @update="$emit('update')"
       />
     </div>
@@ -33,7 +34,8 @@ export default {
     initOptions: Object,
     exportToPngEnabled: Boolean,
     exportToSvgEnabled: Boolean,
-    exportToHtmlEnabled: Boolean
+    exportToHtmlEnabled: Boolean,
+    showViewSettings: Boolean
   },
   emits: [
     'update:exportToSvgEnabled',
@@ -58,6 +60,12 @@ export default {
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.graphContainer)
   },
+  watch: {
+    async showViewSettings() {
+      await this.$nextTick()
+      this.handleResize()
+    }
+  },
   methods: {
     getOptionsForSave() {
       return this.$refs.graphEditor.settings
@@ -73,7 +81,7 @@ export default {
       const renderer = this.$refs.graphEditor.renderer
       if (renderer) {
         renderer.refresh()
-        renderer.getCamera().setState({ x: 0.5, y: 0.5 })
+        renderer.getCamera().animatedReset({ duration: 600 })
       }
     }
   }
@@ -81,7 +89,7 @@ export default {
 </script>
 
 <style scoped>
-.chart-container {
+.graph-container {
   height: 100%;
 }
 
@@ -92,7 +100,7 @@ export default {
   box-sizing: border-box;
 }
 
-.chart {
+.graph {
   min-height: 242px;
 }
 

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="pivot-ui">
-    <div :class="{ collapsed }">
     <div class="row">
       <label>Columns</label>
       <multiselect
@@ -129,10 +128,6 @@
       </multiselect>
     </div>
   </div>
-    <span class="switcher" @click="collapsed = !collapsed">
-      {{ collapsed ? 'Show pivot settings' : 'Hide pivot settings' }}
-    </span>
-  </div>
 </template>
 
 <script>
@@ -163,7 +158,6 @@ export default {
     const rendererName =
       (this.modelValue && this.modelValue.rendererName) || 'Table'
     return {
-      collapsed: false,
       renderer: {
         name: rendererName,
         fun: $.pivotUtilities.renderers[rendererName]
@@ -291,9 +285,6 @@ export default {
   margin-left: 12px;
   flex-shrink: 0;
 }
-.collapsed {
-  display: none;
-}
 
 .switcher {
   display: block;

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -5,6 +5,7 @@
       result is not empty.
     </div>
     <pivot-ui
+      v-show="showViewSettings"
       v-model="pivotOptions"
       :keyNames="columns"
       @update="$emit('update')"
@@ -47,7 +48,8 @@ export default {
     dataSources: Object,
     initOptions: Object,
     exportToPngEnabled: Boolean,
-    exportToSvgEnabled: Boolean
+    exportToSvgEnabled: Boolean,
+    showViewSettings: Boolean
   },
   emits: [
     'loadingImageCompleted',
@@ -125,6 +127,9 @@ export default {
     },
     pivotOptions() {
       this.show()
+    },
+    showViewSettings() {
+      this.handleResize()
     }
   },
   created() {

src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue

@@ -9,6 +9,7 @@
         v-model:exportToHtmlEnabled="exportToHtmlEnabled"
         :initOptions="initOptionsByMode[mode]"
         :data-sources="dataSource"
+        :showViewSettings="showViewSettings"
         @loading-image-completed="loadingImage = false"
         @update="$emit('update')"
       />
@@ -42,6 +43,18 @@
 
       <div class="side-tool-bar-divider" />
 
+      <icon-button
+        ref="settingsBtn"
+        :active="showViewSettings"
+        tooltip="Toggle visualisation settings visibility"
+        tooltipPosition="top-left"
+        @click="showViewSettings = !showViewSettings"
+      >
+        <settings-icon />
+      </icon-button>
+
+      <div class="side-tool-bar-divider" />
+
       <icon-button
         :disabled="!exportToPngEnabled || loadingImage"
         :loading="loadingImage"
@@ -103,6 +116,7 @@ import IconButton from '@/components/IconButton'
 import ChartIcon from '@/components/svg/chart'
 import PivotIcon from '@/components/svg/pivot'
 import GraphIcon from '@/components/svg/graph.vue'
+import SettingsIcon from '@/components/svg/settings.vue'
 import HtmlIcon from '@/components/svg/html'
 import ExportToSvgIcon from '@/components/svg/exportToSvg'
 import PngIcon from '@/components/svg/png'
@@ -123,6 +137,7 @@ export default {
     ChartIcon,
     PivotIcon,
     GraphIcon,
+    SettingsIcon,
     ExportToSvgIcon,
     PngIcon,
     HtmlIcon,
@@ -150,7 +165,8 @@ export default {
         pivot: this.initMode === 'pivot' ? this.initOptions : null,
         graph: this.initMode === 'graph' ? this.initOptions : null
       },
-      showLoadingDialog: false
+      showLoadingDialog: false,
+      showViewSettings: true
     }
   },
   computed: {

src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue

@@ -63,7 +63,9 @@ export default {
   border-left: 1px solid var(--color-border-light);
   padding: 6px;
 }
+</style>
 
+<style>
 .side-tool-bar-divider {
   width: 26px;
   height: 1px;