visualisation settings toggle

2025-12-06 10:08:52 +08:00 · 2025-10-28 22:51:13 +01:00
parent 218ab52ab3
commit 3d6479be7a
9 changed files with 2237 additions and 21897 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/components/svg/settings.vue
+++ b/src/components/svg/settings.vue
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/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() {
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue
@@ -1,17 +1,24 @@
 <template>
-  <div class="plotly_editor">
-    <GraphEditorControls>
+  <div :class="['plotly_editor', { with_controls: showViewSettings }]">
+    <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;
 }

--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue
+++ b/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;
 }

--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
@@ -1,137 +1,132 @@
 <template>
  <div class="pivot-ui">
-    <div :class="{ collapsed }">
-      <div class="row">
-        <label>Columns</label>
-        <multiselect
-          v-model="cols"
-          class="sqliteviz-select cols"
-          :options="colsToSelect"
-          :disabled="colsToSelect.length === 0"
-          :multiple="true"
-          :hideSelected="true"
-          :closeOnSelect="true"
-          :showLabels="false"
-          :max="colsToSelect.length"
-          openDirection="bottom"
-          placeholder=""
-        >
-          <template #maxElements>
-            <span class="no-results">No Results</span>
-          </template>
+    <div class="row">
+      <label>Columns</label>
+      <multiselect
+        v-model="cols"
+        class="sqliteviz-select cols"
+        :options="colsToSelect"
+        :disabled="colsToSelect.length === 0"
+        :multiple="true"
+        :hideSelected="true"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :max="colsToSelect.length"
+        openDirection="bottom"
+        placeholder=""
+      >
+        <template #maxElements>
+          <span class="no-results">No Results</span>
+        </template>

-          <template #placeholder>Choose columns</template>
+        <template #placeholder>Choose columns</template>

-          <template #noResult>
-            <span class="no-results">No Results</span>
-          </template>
-        </multiselect>
-        <pivot-sort-btn v-model="colOrder" class="sort-btn" direction="col" />
-      </div>
-
-      <div class="row">
-        <label>Rows</label>
-        <multiselect
-          v-model="rows"
-          class="sqliteviz-select rows"
-          :options="rowsToSelect"
-          :disabled="rowsToSelect.length === 0"
-          :multiple="true"
-          :hideSelected="true"
-          :closeOnSelect="true"
-          :showLabels="false"
-          :max="rowsToSelect.length"
-          :optionHeight="29"
-          openDirection="bottom"
-          placeholder=""
-        >
-          <template #maxElements>
-            <span class="no-results">No Results</span>
-          </template>
-
-          <template #placeholder>Choose rows</template>
-
-          <template #noResult>
-            <span class="no-results">No Results</span>
-          </template>
-        </multiselect>
-        <pivot-sort-btn v-model="rowOrder" class="sort-btn" direction="row" />
-      </div>
-
-      <div class="row aggregator">
-        <label>Aggregator</label>
-        <multiselect
-          v-model="aggregator"
-          class="sqliteviz-select short aggregator"
-          :options="aggregators"
-          label="name"
-          trackBy="name"
-          :closeOnSelect="true"
-          :showLabels="false"
-          :hideSelected="true"
-          :optionHeight="29"
-          openDirection="bottom"
-          placeholder="Choose a function"
-        >
-          <template #noResult>
-            <span class="no-results">No Results</span>
-          </template>
-        </multiselect>
-
-        <multiselect
-          v-show="valCount > 0"
-          v-model="val1"
-          class="sqliteviz-select aggr-arg"
-          :options="keyNames"
-          :disabled="keyNames.length === 0"
-          :closeOnSelect="true"
-          :showLabels="false"
-          :hideSelected="true"
-          :optionHeight="29"
-          openDirection="bottom"
-          placeholder="Choose an argument"
-        />
-
-        <multiselect
-          v-show="valCount > 1"
-          v-model="val2"
-          class="sqliteviz-select aggr-arg"
-          :options="keyNames"
-          :disabled="keyNames.length === 0"
-          :closeOnSelect="true"
-          :showLabels="false"
-          :hideSelected="true"
-          :optionHeight="29"
-          openDirection="bottom"
-          placeholder="Choose a second argument"
-        />
-      </div>
-
-      <div class="row">
-        <label>View</label>
-        <multiselect
-          v-model="renderer"
-          class="sqliteviz-select short renderer"
-          :options="renderers"
-          label="name"
-          trackBy="name"
-          :closeOnSelect="true"
-          :allowEmpty="false"
-          :showLabels="false"
-          :hideSelected="true"
-          :optionHeight="29"
-          openDirection="bottom"
-          placeholder="Choose a view"
-        >
-          <template #noResult>
-            <span class="no-results">No Results</span>
-          </template>
-        </multiselect>
-      </div>
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+      <pivot-sort-btn v-model="colOrder" class="sort-btn" direction="col" />
+    </div>
+
+    <div class="row">
+      <label>Rows</label>
+      <multiselect
+        v-model="rows"
+        class="sqliteviz-select rows"
+        :options="rowsToSelect"
+        :disabled="rowsToSelect.length === 0"
+        :multiple="true"
+        :hideSelected="true"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :max="rowsToSelect.length"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder=""
+      >
+        <template #maxElements>
+          <span class="no-results">No Results</span>
+        </template>
+
+        <template #placeholder>Choose rows</template>
+
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+      <pivot-sort-btn v-model="rowOrder" class="sort-btn" direction="row" />
+    </div>
+
+    <div class="row aggregator">
+      <label>Aggregator</label>
+      <multiselect
+        v-model="aggregator"
+        class="sqliteviz-select short aggregator"
+        :options="aggregators"
+        label="name"
+        trackBy="name"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a function"
+      >
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+
+      <multiselect
+        v-show="valCount > 0"
+        v-model="val1"
+        class="sqliteviz-select aggr-arg"
+        :options="keyNames"
+        :disabled="keyNames.length === 0"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose an argument"
+      />
+
+      <multiselect
+        v-show="valCount > 1"
+        v-model="val2"
+        class="sqliteviz-select aggr-arg"
+        :options="keyNames"
+        :disabled="keyNames.length === 0"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a second argument"
+      />
+    </div>
+
+    <div class="row">
+      <label>View</label>
+      <multiselect
+        v-model="renderer"
+        class="sqliteviz-select short renderer"
+        :options="renderers"
+        label="name"
+        trackBy="name"
+        :closeOnSelect="true"
+        :allowEmpty="false"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a view"
+      >
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
    </div>
-    <span class="switcher" @click="collapsed = !collapsed">
-      {{ collapsed ? 'Show pivot settings' : 'Hide pivot settings' }}
-    </span>
  </div>
 </template>

@@ -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;
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
+++ b/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() {
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
+++ b/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: {
--- a/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
+++ b/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;