fix lint

karma.conf.cjs

@@ -14,7 +14,7 @@ module.exports = function (config) {
       coverage: {
         enable: true,
         include: 'src/*',
-        exclude: ['node_modules', 'src/components/svg/*'],
+        exclude: ['node_modules'],
         extension: ['.js', '.vue'],
         requireEnv: false
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.31.0",
+  "version": "0.32.1",
   "license": "Apache-2.0",
   "private": true,
   "type": "module",

src/assets/styles/tooltips.css

@@ -10,4 +10,5 @@
   border-radius: var(--border-radius-medium);
   white-space: nowrap;
   z-index: 999;
+  pointer-events: none;
 }

src/components/AppDiagnosticInfo.vue

@@ -8,7 +8,12 @@
     <modal modalId="app-info" class="dialog" contentClass="app-info-modal">
       <div class="dialog-header">
         App info
-        <close-icon @click="$modal.hide('app-info')" />
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="$modal.hide('app-info')"
+        />
       </div>
       <div class="dialog-body">
         <div v-for="(item, index) in info" :key="index" class="info-item">
@@ -26,12 +31,12 @@
 </template>
 
 <script>
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 import { version } from '../../package.json'
 
 export default {
   name: 'AppDiagnosticInfo',
-  components: { CloseIcon },
+  components: { IconButton },
   data() {
     return {
       info: [

src/components/Common/IconButton.vue

@@ -1,12 +1,22 @@
 <template>
   <button
-    :class="['icon-btn', { active }]"
+    :class="['icon-btn', { active }, 'icon-btn-' + variant]"
     :disabled="disabled"
-    @click="onClick"
+    :style="{
+      color: iconColor,
+      fontSize: iconSize + 'px',
+      width: width + 'px',
+      height: width + 'px'
+    }"
+    @click.stop="onClick"
     @mouseenter="showTooltip($event, tooltipPosition)"
     @mouseleave="hideTooltip"
   >
-    <div class="icon"><slot /></div>
+    <div class="icon">
+      <slot>
+        <i :class="icon" />
+      </slot>
+    </div>
     <div v-show="loading" class="icon-in-progress">
       <loading-indicator />
     </div>
@@ -14,7 +24,7 @@
       v-if="tooltip"
       ref="tooltip"
       class="icon-tooltip"
-      :style="tooltipStyle"
+      :style="{ ...tooltipStyle, maxWidth: maxTooltipWidth }"
     >
       {{ tooltip }}
     </span>
@@ -34,9 +44,26 @@ export default {
     disabled: Boolean,
     tooltip: String,
     tooltipPosition: String,
-    loading: Boolean
+    maxTooltipWidth: String,
+    loading: Boolean,
+    icon: String,
+    iconColor: { type: String, default: 'var(--color-text-light-2)' },
+    variant: {
+      type: String,
+      default: 'accent',
+      validator: value => ['accent', 'secondary'].includes(value)
+    },
+    iconSize: {
+      type: Number,
+      default: 18
+    }
   },
   emits: ['click'],
+  computed: {
+    width() {
+      return this.iconSize + 8
+    }
+  },
   methods: {
     onClick() {
       this.hideTooltip()
@@ -49,8 +76,6 @@ export default {
 <style scoped>
 .icon-btn {
   box-sizing: border-box;
-  width: 26px;
-  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,21 +83,27 @@ export default {
   background-color: transparent;
   border: none;
 }
-.icon-btn:hover {
+
+.icon-btn .icon i {
+  font-size: inherit;
+}
+.icon-btn.icon-btn-accent:hover {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-medium-2);
 }
 
-.icon-btn:hover .icon :deep(path),
+.icon-btn.icon-btn-accent:hover,
-.icon-btn.active .icon :deep(path),
+.icon-btn.icon-btn-accent.active {
-.icon-btn:hover .icon :deep(circle),
+  color: var(--color-accent) !important;
-.icon-btn.active .icon :deep(circle) {
-  fill: var(--color-accent);
 }
 
-.icon-btn:disabled .icon :deep(path),
+.icon-btn.icon-btn-secondary:hover,
-.icon-btn:disabled .icon :deep(circle) {
+.icon-btn.icon-btn-secondary.active {
-  fill: var(--color-border);
+  color: var(--color-text-base) !important;
+}
+
+.icon-btn:disabled {
+  color: var(--color-border) !important;
 }
 
 .icon-btn:disabled {
@@ -80,10 +111,6 @@ export default {
   pointer-events: none;
 }
 
-.disabled.icon-btn:hover .icon :deep(path) {
-  fill: var(--color-border);
-}
-
 .icon-in-progress {
   position: absolute;
   width: 26px;

src/components/Common/LoadingDialog.vue

@@ -9,7 +9,13 @@
   >
     <div class="dialog-header">
       {{ title }}
-      <close-icon :disabled="loading" @click="cancel" />
+      <IconButton
+        icon="myicon myicon-close"
+        variant="secondary"
+        :iconSize="14"
+        :disabled="loading"
+        @click="cancel"
+      />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
@@ -47,11 +53,11 @@
 
 <script>
 import LoadingIndicator from '@/components/Common/LoadingIndicator'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 
 export default {
   name: 'LoadingDialog',
-  components: { LoadingIndicator, CloseIcon },
+  components: { LoadingIndicator, IconButton },
   props: {
     modelValue: Boolean,
     loadingMsg: String,

src/components/Common/TextField.vue

@@ -5,31 +5,47 @@
       :class="['text-field-label', { error: errorMsg }, { disabled: disabled }]"
     >
       {{ label }}
-      <hint-icon
+      <IconButton
         v-if="hint"
+        icon="myicon myicon-hint"
+        variant="secondary"
         class="hint"
-        :hint="hint"
+        :tooltip="hint"
-        :maxWidth="maxHintWidth || '149px'"
+        :maxTooltipWidth="maxHintWidth"
+        :iconSize="20"
       />
     </div>
-    <input
+    <div :class="['text-field-container', { disabled }]">
-      type="text"
+      <input
-      :placeholder="placeholder"
+        type="text"
-      :class="{ error: errorMsg }"
+        :placeholder="placeholder"
-      :style="{ width: width }"
+        :class="{ error: errorMsg }"
-      :value="modelValue"
+        :style="{ width: width }"
-      :disabled="disabled"
+        :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)"
+        :disabled="disabled"
-    />
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+      <button
+        v-if="showClearButton"
+        type="button"
+        :disabled="disabled"
+        class="clear-btn"
+        @click="$emit('update:modelValue', '')"
+      >
+        <i class="myicon myicon-clear" />
+      </button>
+    </div>
+
     <div v-show="errorMsg" class="text-field-error">{{ errorMsg }}</div>
   </div>
 </template>
 
 <script>
-import HintIcon from '@/components/svg/hint'
+import IconButton from '@/components/Common/IconButton.vue'
+
 export default {
   name: 'TextField',
-  components: { HintIcon },
+  components: { IconButton },
   props: {
     placeholder: String,
     label: String,
@@ -37,23 +53,41 @@ export default {
     modelValue: String,
     width: String,
     hint: String,
-    maxHintWidth: String,
+    maxHintWidth: { type: String, default: '149px' },
-    disabled: Boolean
+    disabled: Boolean,
+    showClearButton: Boolean
   },
   emits: ['update:modelValue']
 }
 </script>
 
 <style scoped>
-input {
+.text-field-container {
   background: var(--color-white);
   border: 1px solid var(--color-border);
-  color: var(--color-text-base);
   border-radius: var(--border-radius-medium-2);
   height: 36px;
   padding: 0 8px;
   font-size: 13px;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.text-field-container.disabled {
+  background: var(--color-bg-light);
+}
+
+.text-field-container.error {
+  border-color: var(--color-text-error);
+}
+
+input {
+  background: inherit;
+  border: none;
+  color: var(--color-text-base);
+  height: 100%;
+  padding: 0;
   display: block;
 }
 
@@ -66,15 +100,10 @@ input:focus {
 }
 
 input:disabled {
-  background: var(--color-bg-light);
   color: var(--color-text-light-2);
   cursor: default;
 }
 
-input.error {
-  border-color: var(--color-text-error);
-}
-
 .text-field-label {
   font-size: 12px;
   color: var(--color-text-base);
@@ -86,8 +115,8 @@ input.error {
 
 .text-field-label .hint {
   position: absolute;
-  top: -2px;
+  top: -6px;
-  right: -22px;
+  right: -26px;
 }
 
 .text-field-label.error {
@@ -108,4 +137,31 @@ input.error {
 .text-field-error:first-letter {
   text-transform: uppercase;
 }
+
+:deep(.icon-tooltip) {
+  display: block;
+  white-space: normal;
+  height: auto;
+  line-height: normal;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.clear-btn {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 20px;
+  width: 20px;
+  color: var(--color-border);
+  font-size: 20px;
+}
+
+.clear-btn i {
+  display: block;
+}
+
+.clear-btn:not(:disabled):hover {
+  color: var(--color-danger);
+}
 </style>

src/components/CsvJsonImport/DelimiterSelector/index.vue

@@ -19,11 +19,23 @@
         <div class="name">{{ getSymbolName(modelValue) }}</div>
       </div>
       <div class="controls" @click.stop>
-        <clear-icon :disabled="disabled" @click="clear" />
+        <button
-        <drop-down-chevron
+          type="button"
           :disabled="disabled"
+          class="clear-btn"
+          @click="clear"
+        >
+          <i class="myicon myicon-clear" />
+        </button>
+
+        <button
+          type="button"
+          :disabled="disabled"
+          class="open-list-btn"
           @click="!disabled && (showOptions = !showOptions)"
-        />
+        >
+          <i class="myicon myicon-dropdown-chevron" />
+        </button>
       </div>
     </div>
     <div v-show="showOptions" class="options" :style="{ width: width }">
@@ -42,12 +54,9 @@
 
 <script>
 import ascii from './ascii'
-import DropDownChevron from '@/components/svg/dropDownChevron'
-import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  components: { DropDownChevron, ClearIcon },
   props: {
     modelValue: String,
     width: String,
@@ -130,6 +139,7 @@ export default {
 .controls {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
 
 .options {
@@ -207,4 +217,22 @@ input:disabled {
 .disabled .delimiter-selector-container {
   background: var(--color-bg-light);
 }
+
+.controls button {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 20px;
+  width: 20px;
+  color: var(--color-border);
+  font-size: 20px;
+}
+
+.clear-btn:not(:disabled):hover {
+  color: var(--color-danger);
+}
+
+.open-list-btn:not(:disabled):hover {
+  color: var(--color-accent);
+}
 </style>

src/components/CsvJsonImport/index.vue

@@ -8,7 +8,14 @@
   >
     <div class="dialog-header">
       {{ typeName }} import
-      <close-icon :disabled="disableDialog" @click="cancelImport" />
+      <IconButton
+        icon="myicon myicon-close"
+        variant="secondary"
+        :iconSize="14"
+        :disabled="disableDialog"
+        data-test="import-close-btn"
+        @click="cancelImport"
+      />
     </div>
     <div class="dialog-body">
       <text-field
@@ -101,7 +108,7 @@
 
 <script>
 import csv from '@/lib/csv'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 import TextField from '@/components/Common/TextField'
 import DelimiterSelector from './DelimiterSelector'
 import CheckBox from '@/components/Common/CheckBox'
@@ -114,8 +121,8 @@ import events from '@/lib/utils/events'
 export default {
   name: 'CsvJsonImport',
   components: {
-    CloseIcon,
     TextField,
+    IconButton,
     DelimiterSelector,
     CheckBox,
     SqlTable,

src/components/DataView.vue

@@ -19,96 +19,89 @@
     <side-tool-bar panel="dataView" @switch-to="$emit('switchTo', $event)">
       <icon-button
         ref="chartBtn"
+        icon="myicon myicon-chart"
         :active="mode === 'chart'"
         tooltip="Switch to chart"
         tooltipPosition="top-left"
         @click="mode = 'chart'"
-      >
+      />
-        <chart-icon />
-      </icon-button>
       <icon-button
         ref="pivotBtn"
+        icon="myicon myicon-pivot"
         :active="mode === 'pivot'"
         tooltip="Switch to pivot"
         tooltipPosition="top-left"
         @click="mode = 'pivot'"
-      >
+      />
-        <pivot-icon />
-      </icon-button>
       <icon-button
         ref="graphBtn"
+        icon="myicon myicon-graph"
         :active="mode === 'graph'"
         tooltip="Switch to graph"
         tooltipPosition="top-left"
         @click="mode = 'graph'"
-      >
+      />
-        <graph-icon />
-      </icon-button>
 
       <div class="side-tool-bar-divider" />
 
       <icon-button
         ref="settingsBtn"
+        icon="myicon myicon-settings"
         :active="showViewSettings"
         tooltip="Toggle visualisation settings visibility"
         tooltipPosition="top-left"
         @click="showViewSettings = !showViewSettings"
-      >
+      />
-        <settings-icon />
-      </icon-button>
 
       <icon-button
         v-if="mode !== 'pivot'"
         ref="viewDetailsBtn"
+        icon="myicon myicon-view-cell-value"
         tooltip="View details"
         tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="viewValuePanelVisible = !viewValuePanelVisible"
-      >
+      />
-        <view-cell-value-icon />
-      </icon-button>
 
       <div class="side-tool-bar-divider" />
 
       <icon-button
         ref="pngExportBtn"
+        icon="myicon myicon-png"
         :disabled="!exportToPngEnabled || loadingImage"
         :loading="loadingImage"
         tooltip="Save as PNG image"
         tooltipPosition="top-left"
         @click="saveAsPng"
-      >
+      />
-        <png-icon />
+
-      </icon-button>
       <icon-button
         ref="svgExportBtn"
+        icon="myicon myicon-export-to-svg"
         :disabled="!exportToSvgEnabled"
         tooltip="Save as SVG"
         tooltipPosition="top-left"
         @click="saveAsSvg"
-      >
+      />
-        <export-to-svg-icon />
-      </icon-button>
 
       <icon-button
         ref="htmlExportBtn"
+        icon="myicon myicon-html"
         :disabled="!exportToHtmlEnabled"
         tooltip="Save as HTML"
         tooltipPosition="top-left"
         @click="saveAsHtml"
-      >
+      />
-        <HtmlIcon />
+
-      </icon-button>
       <icon-button
         ref="copyToClipboardBtn"
+        icon="myicon myicon-clipboard"
         :disabled="!exportToClipboardEnabled"
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
         tooltipPosition="top-left"
         @click="prepareCopy"
-      >
+      />
-        <clipboard-icon />
-      </icon-button>
     </side-tool-bar>
 
     <loading-dialog
@@ -130,15 +123,6 @@ import Pivot from '@/components/Pivot'
 import Graph from '@/components/Graph/index.vue'
 import SideToolBar from '@/components/SideToolBar'
 import IconButton from '@/components/Common/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'
-import ClipboardIcon from '@/components/svg/clipboard'
-import ViewCellValueIcon from '@/components/svg/viewCellValue'
 import cIo from '@/lib/utils/clipboardIo'
 import loadingDialog from '@/components/Common/LoadingDialog.vue'
 import time from '@/lib/utils/time'
@@ -152,15 +136,6 @@ export default {
     Graph,
     SideToolBar,
     IconButton,
-    ChartIcon,
-    PivotIcon,
-    GraphIcon,
-    SettingsIcon,
-    ExportToSvgIcon,
-    ViewCellValueIcon,
-    PngIcon,
-    HtmlIcon,
-    ClipboardIcon,
     loadingDialog
   },
   props: {

src/components/DbUploader.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="db-uploader-container" :style="{ width }">
-    <change-db-icon v-if="type === 'small'" @click="browse" />
+    <IconButton
+      v-if="type === 'small'"
+      icon="myicon myicon-change-db"
+      tooltip="Load another database, CSV, JSON or NDJSON"
+      @click="browse"
+    />
     <div v-if="type === 'illustrated'" class="drop-area-container">
       <div
         class="drop-area"
@@ -56,15 +61,15 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
-import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
 import CsvJsonImport from '@/components/CsvJsonImport'
 import events from '@/lib/utils/events'
+import IconButton from '@/components/Common/IconButton'
 
 export default {
   name: 'DbUploader',
   components: {
-    ChangeDbIcon,
+    IconButton,
     CsvJsonImport
   },
   props: {

src/components/Graph/GraphEditor.vue

@@ -204,9 +204,9 @@
                 @click="toggleFA2Layout"
               >
                 <template #node:icon>
-                  <div>
+                  <div class="button-icon-container">
-                    <RunIcon v-if="!fa2Running" />
+                    <i v-if="!fa2Running" class="myicon myicon-run" />
-                    <PauseIcon v-else />
+                    <i v-else class="myicon myicon-pause" />
                   </div>
                 </template>
                 {{ fa2Running ? 'Pause' : 'Continue' }}
@@ -218,8 +218,8 @@
                 @click="restartFA2Layout"
               >
                 <template #node:icon>
-                  <div>
+                  <div class="button-icon-container">
-                    <RestartIcon />
+                    <i class="myicon myicon-restart" />
                   </div>
                 </template>
                 Restart
@@ -239,11 +239,19 @@
         backgroundColor: settings.style.backgroundColor
       }"
     />
+
+    <GraphSearchPanel
+      v-model:nodesMatchingSearchQuery="nodesMatchingSearchQuery"
+      v-model:focusedFoundNodeId="focusedFoundNodeId"
+      :graph="graph"
+      class="search-panel"
+    />
   </div>
 </template>
 
 <script>
 import { markRaw } from 'vue'
+import GraphSearchPanel from '@/components/Graph/GraphSearchPanel.vue'
 import { applyPureReactInVue } from 'veaury'
 import GraphEditorControls from '@/lib/GraphEditorControls.jsx'
 import { PanelMenuWrapper, Panel, Fold, Section } from 'react-chart-editor'
@@ -261,9 +269,6 @@ import AdvancedForceAtlasLayoutSettings from '@/components/Graph/AdvancedForceAt
 import CirclePackLayoutSettings from '@/components/Graph/CirclePackLayoutSettings.vue'
 import FA2Layout from 'graphology-layout-forceatlas2/worker'
 import * as forceAtlas2 from 'graphology-layout-forceatlas2'
-import RunIcon from '@/components/svg/run.vue'
-import RestartIcon from '@/components/svg/restart.vue'
-import PauseIcon from '@/components/svg/pause.vue'
 import { downloadAsPNG, drawOnCanvas } from '@sigma/export-image'
 import {
   buildNodes,
@@ -296,9 +301,6 @@ export default {
     Fold: applyPureReactInVue(Fold),
     Button: applyPureReactInVue(Button),
     ColorPicker: applyPureReactInVue(ColorPicker),
-    RunIcon,
-    RestartIcon,
-    PauseIcon,
     RandomLayoutSettings,
     CirclePackLayoutSettings,
     NodeColorSettings,
@@ -306,7 +308,8 @@ export default {
     EdgeSizeSettings,
     EdgeColorSettings,
     AdvancedForceAtlasLayoutSettings,
-    ForceAtlasSeedLayoutSettings
+    ForceAtlasSeedLayoutSettings,
+    GraphSearchPanel
   },
   inject: ['tabLayout'],
   props: {
@@ -317,6 +320,8 @@ export default {
   emits: ['update', 'selectItem', 'clearSelection'],
   data() {
     return {
+      nodesMatchingSearchQuery: null,
+      focusedFoundNodeId: null,
       graph: new Graph({ multi: true, allowSelfLoops: true }),
       renderer: null,
       fa2Layout: null,
@@ -472,7 +477,9 @@ export default {
         neighborsOfHoveredNode: this.neighborsOfHoveredNode,
 
         hoveredEdgeExtremities: this.hoveredEdgeExtremities,
-        selectedEdgeExtremities: this.selectedEdgeExtremities
+        selectedEdgeExtremities: this.selectedEdgeExtremities,
+        nodesMatchingSearchQuery: this.nodesMatchingSearchQuery,
+        focusedFoundNodeId: this.focusedFoundNodeId
       }
     }
   },
@@ -509,6 +516,23 @@ export default {
           this.renderer.scheduleRender()
         }
       }
+    },
+    nodesMatchingSearchQuery() {
+      if (this.renderer) {
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      }
+    },
+    focusedFoundNodeId() {
+      if (this.renderer) {
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      }
+      if (this.focusedFoundNodeId) {
+        this.moveCameraToNode(this.focusedFoundNodeId)
+      }
     }
   },
   mounted() {
@@ -519,6 +543,8 @@ export default {
   methods: {
     buildGraph() {
       this.clearSelection()
+      this.focusedFoundNodeId = null
+      this.nodesMatchingSearchQuery = null
       if (this.renderer) {
         this.renderer.kill()
       }
@@ -829,12 +855,21 @@ export default {
       return drawOnCanvas(this.renderer, {
         backgroundColor: this.settings.style.backgroundColor
       })
+    },
+    moveCameraToNode(nodeId) {
+      const nodePosition = this.renderer.getNodeDisplayData(nodeId)
+      this.renderer.getCamera().animate(nodePosition, {
+        duration: 500
+      })
     }
   }
 }
 </script>
 
 <style scoped>
+.plotly_editor {
+  position: relative;
+}
 .plotly_editor.with_controls > div {
   display: flex !important;
 }
@@ -856,4 +891,19 @@ export default {
 .force-atlas-buttons :deep(.button__icon > div) {
   padding: 0 3px;
 }
+
+.search-panel {
+  top: 0;
+  right: 0;
+}
+
+.button-icon-container {
+  font-size: 16px;
+  filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7));
+  vertical-align: bottom;
+}
+
+.button-icon-container i {
+  vertical-align: top;
+}
 </style>

src/components/Graph/GraphSearchPanel.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="graph-search-panel">
+    <IconButton
+      icon="myicon myicon-open-search"
+      :title="panelOpen ? 'Close search panel' : 'Open search panel'"
+      variant="secondary"
+      :class="{ 'close-search-panel': panelOpen }"
+      data-test="toggle-search-panel-visibility-btn"
+      @click="panelOpen = !panelOpen"
+    />
+    <div v-show="panelOpen" class="graph-search-panel--search-controls">
+      <TextField
+        v-model.trim="searchQuery"
+        width="250px"
+        placeholder="Search nodes..."
+        :errorMsg="regExpIsValid ? '' : 'Invalid regular expression'"
+        showClearButton
+        class="query-input"
+        @keydown.enter.prevent="search"
+        @update:model-value="onSearchInput"
+      />
+      <IconButton
+        icon="myicon myicon-match-case"
+        title="Match case"
+        :active="matchCase"
+        data-test="match-case-btn"
+        @click="matchCase = !matchCase"
+      />
+      <IconButton
+        icon="myicon myicon-use-reg-exp"
+        title="Use regular expression"
+        :active="useRegExp"
+        data-test="use-reg-exp-btn"
+        @click="useRegExp = !useRegExp"
+      />
+
+      <div class="counter">
+        <span
+          v-if="
+            nodesMatchingSearchQuery?.length > 0 && currentFoundNodeIndex === -1
+          "
+        >
+          {{ shortResultCountString }}
+        </span>
+        <span
+          v-if="
+            nodesMatchingSearchQuery?.length > 0 && currentFoundNodeIndex !== -1
+          "
+          >{{ currentFoundNodeIndex + 1 }} of
+          {{ nodesMatchingSearchQuery.length }}
+        </span>
+
+        <span
+          v-show="
+            nodesMatchingSearchQuery && nodesMatchingSearchQuery.length === 0
+          "
+          data-test="no-results-text"
+        >
+          No results
+        </span>
+      </div>
+      <IconButton
+        icon="myicon myicon-arrow"
+        title="Previous match"
+        :disabled="arrowsDisabled"
+        data-test="previous-match-btn"
+        @click="toNextFoundNode(-1)"
+      />
+
+      <IconButton
+        icon="myicon myicon-arrow"
+        title="Next match"
+        :disabled="arrowsDisabled"
+        class="next-match-btn"
+        data-test="next-match-btn"
+        @click="toNextFoundNode(1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TextField from '@/components/Common/TextField.vue'
+import IconButton from '@/components/Common/IconButton.vue'
+import time from '@/lib/utils/time'
+
+function getRegExp(query, matchCase) {
+  try {
+    const regExp = new RegExp(query, !matchCase ? 'i' : '')
+    return regExp
+  } catch (e) {
+    console.error('Invalid regular expression:', e)
+    return null
+  }
+}
+
+export default {
+  components: {
+    TextField,
+    IconButton
+  },
+  props: ['graph', 'nodesMatchingSearchQuery', 'focusedFoundNodeId'],
+  data() {
+    return {
+      searchQuery: '',
+      currentFoundNodeIndex: -1,
+      useRegExp: false,
+      matchCase: false,
+      panelOpen: false
+    }
+  },
+  computed: {
+    regExp() {
+      return this.useRegExp
+        ? getRegExp(this.searchQuery, this.matchCase)
+        : new RegExp(
+            this.searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
+            !this.matchCase ? 'i' : ''
+          )
+    },
+    regExpIsValid() {
+      return !this.searchQuery || this.regExp
+    },
+    arrowsDisabled() {
+      return (
+        !this.nodesMatchingSearchQuery ||
+        this.nodesMatchingSearchQuery.length === 0
+      )
+    },
+    shortResultCountString() {
+      const count = this.nodesMatchingSearchQuery?.length ?? 0
+      const formattedCount =
+        count > 1000
+          ? new Intl.NumberFormat('en', {
+              notation: 'compact',
+              compactDisplay: 'short',
+              maximumSignificantDigits: 3
+            }).format(count)
+          : count
+
+      return `${formattedCount} ${count === 1 ? 'node' : 'nodes'} found`
+    }
+  },
+  watch: {
+    focusedFoundNodeId() {
+      if (!this.focusedFoundNodeId) {
+        this.currentFoundNodeIndex = -1
+      }
+    },
+    useRegExp() {
+      this.search()
+    },
+    matchCase() {
+      this.search()
+    }
+  },
+  methods: {
+    onSearchInput: time.debounce(function () {
+      this.search()
+    }, 500),
+    search() {
+      this.currentFoundNodeIndex = -1
+      if (this.regExpIsValid) {
+        const foundNodes = this.searchQuery ? this.getFoundNodes() : null
+        this.$emit('update:nodesMatchingSearchQuery', foundNodes)
+      } else {
+        this.$emit('update:nodesMatchingSearchQuery', null)
+      }
+
+      this.$emit('update:focusedFoundNodeId', null)
+    },
+    getFoundNodes() {
+      if (!this.graph) {
+        return null
+      }
+
+      return this.graph.filterNodes((nodeId, nodeData) => {
+        return this.regExp.test(nodeData.label)
+      })
+    },
+    toNextFoundNode(direction = 1) {
+      this.currentFoundNodeIndex =
+        (this.currentFoundNodeIndex +
+          direction +
+          this.nodesMatchingSearchQuery.length) %
+        this.nodesMatchingSearchQuery.length
+      const nodeId = this.nodesMatchingSearchQuery[this.currentFoundNodeIndex]
+      this.$emit('update:focusedFoundNodeId', nodeId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.graph-search-panel {
+  position: absolute;
+  background-color: var(--color-bg-light);
+  padding: 4px;
+  border-width: 0px 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--color-border-light);
+  border-radius: 0 0 0 4px;
+  display: flex;
+}
+
+.graph-search-panel--search-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.next-match-btn :deep(i) {
+  transform: rotate(180deg);
+}
+.close-search-panel :deep(i) {
+  transform: scaleX(-1);
+}
+.query-input :deep(.text-field-container) {
+  height: 26px;
+}
+
+.counter {
+  min-width: 60px;
+  font-size: 12px;
+  color: var(--color-text-base);
+}
+
+.query-input :deep(input.error) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.query-input :deep(.text-field-error) {
+  width: 250px;
+  border-width: 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--color-text-error);
+  box-sizing: border-box;
+  background-color: var(--color-bg-danger);
+  margin-top: 0;
+  border-radius: 0 0 4px 4px;
+  color: var(--color-danger);
+}
+</style>

src/components/MainMenu.vue

@@ -36,7 +36,12 @@
     <modal modalId="save" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Save inquiry
-        <close-icon @click="cancelSave" />
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="cancelSave"
+        />
       </div>
       <div class="dialog-body">
         <div v-show="isPredefined" id="save-note">
@@ -67,7 +72,12 @@
     >
       <div class="dialog-header">
         Inquiry saving conflict
-        <close-icon @click="cancelSave" />
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="cancelSave"
+        />
       </div>
       <div class="dialog-body">
         <div id="save-note">
@@ -88,7 +98,7 @@
 
 <script>
 import TextField from '@/components/Common/TextField'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 import storedInquiries from '@/lib/storedInquiries'
 import AppDiagnosticInfo from './AppDiagnosticInfo'
 import events from '@/lib/utils/events'
@@ -98,7 +108,7 @@ export default {
   name: 'MainMenu',
   components: {
     TextField,
-    CloseIcon,
+    IconButton,
     AppDiagnosticInfo
   },
   data() {

src/components/Pivot/PivotUi/PivotSortBtn.vue

@@ -1,22 +1,19 @@
 <template>
   <div :class="['pivot-sort-btn', direction]" @click="changeSorting">
     {{ modelValue.includes('key') ? 'key' : 'value' }}
-    <sort-icon
+    <i
-      class="sort-icon"
+      :class="[
-      :horizontal="direction === 'col'"
+        'myicon myicon-sort sort-icon',
-      :asc="modelValue.includes('a_to_z')"
+        { vertical: direction === 'row' },
+        { asc: modelValue.includes('a_to_z') }
+      ]"
     />
   </div>
 </template>
 
 <script>
-import SortIcon from '@/components/svg/sort'
-
 export default {
   name: 'PivotSortBtn',
-  components: {
-    SortIcon
-  },
   props: {
     direction: String,
     modelValue: String
@@ -56,9 +53,6 @@ export default {
   color: var(--color-text-active);
   border-color: var(--color-border-dark);
 }
-.pivot-sort-btn:hover :deep(.sort-icon path) {
-  fill: var(--color-text-active);
-}
 
 .pivot-sort-btn.col {
   flex-direction: column;
@@ -69,7 +63,19 @@ export default {
   flex-direction: row;
 }
 
-.pivot-sort-btn.row .sort-icon {
+.sort-icon {
-  margin-left: 2px;
+  font-size: 12px;
+}
+.sort-icon.asc {
+  transform: rotate(180deg);
+}
+.sort-icon.vertical {
+  transform: rotate(90deg);
+  margin-right: -3px;
+  margin-left: -1px;
+}
+
+.sort-icon.vertical.asc {
+  transform: rotate(-90deg);
 }
 </style>

src/components/RunResult/Record/RowNavigator.vue

@@ -1,54 +1,50 @@
 <template>
   <div class="record-navigator">
     <icon-button
+      icon="myicon myicon-edge-arrow"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="First row"
       tooltipPosition="top-left"
       class="first"
       @click="$emit('update:modelValue', 0)"
-    >
+    />
-      <edge-arrow-icon :disabled="false" />
-    </icon-button>
     <icon-button
+      icon="myicon myicon-arrow"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="Previous row"
       tooltipPosition="top-left"
       class="prev"
       @click="$emit('update:modelValue', modelValue - 1)"
-    >
+    />
-      <arrow-icon :disabled="false" />
-    </icon-button>
     <icon-button
+      icon="myicon myicon-arrow"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Next row"
       tooltipPosition="top-left"
       class="next"
       @click="$emit('update:modelValue', modelValue + 1)"
-    >
+    />
-      <arrow-icon :disabled="false" />
-    </icon-button>
     <icon-button
+      icon="myicon myicon-edge-arrow"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Last row"
       tooltipPosition="top-left"
       class="last"
       @click="$emit('update:modelValue', total - 1)"
-    >
+    />
-      <edge-arrow-icon :disabled="false" />
-    </icon-button>
   </div>
 </template>
 
 <script>
 import IconButton from '@/components/Common/IconButton'
-import ArrowIcon from '@/components/svg/arrow'
-import EdgeArrowIcon from '@/components/svg/edgeArrow'
 
 export default {
   components: {
-    IconButton,
+    IconButton
-    ArrowIcon,
-    EdgeArrowIcon
   },
   props: {
     modelValue: Number,
@@ -63,8 +59,8 @@ export default {
   display: flex;
 }
 
-.record-navigator .next,
+.record-navigator .next :deep(i),
-.record-navigator .last {
+.record-navigator .last :deep(i) {
   transform: rotate(180deg);
 }
 </style>

src/components/RunResult/index.vue

@@ -64,45 +64,41 @@
 
     <side-tool-bar panel="table" @switch-to="$emit('switchTo', $event)">
       <icon-button
+        icon="myicon myicon-export-to-csv"
         :disabled="!result"
         tooltip="Export result set to CSV file"
         tooltipPosition="top-left"
         @click="exportToCsv"
-      >
+      />
-        <export-to-csv-icon />
-      </icon-button>
 
       <icon-button
         ref="copyToClipboardBtn"
+        icon="myicon myicon-clipboard"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
         tooltipPosition="top-left"
         @click="prepareCopy"
-      >
+      />
-        <clipboard-icon />
-      </icon-button>
 
       <icon-button
         ref="rowBtn"
+        icon="myicon myicon-row"
         :disabled="!result"
         tooltip="View record"
         tooltipPosition="top-left"
         :active="viewRecord"
         @click="toggleViewRecord"
-      >
+      />
-        <row-icon />
-      </icon-button>
 
       <icon-button
         ref="viewCellValueBtn"
+        icon="myicon myicon-view-cell-value"
         :disabled="!result"
         tooltip="View value"
         tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
-      >
+      />
-        <view-cell-value-icon />
-      </icon-button>
     </side-tool-bar>
 
     <loading-dialog
@@ -124,10 +120,6 @@ import SqlTable from '@/components/SqlTable'
 import LoadingIndicator from '@/components/Common/LoadingIndicator'
 import SideToolBar from '@/components/SideToolBar'
 import Splitpanes from '@/components/Common/Splitpanes'
-import ExportToCsvIcon from '@/components/svg/exportToCsv'
-import ClipboardIcon from '@/components/svg/clipboard'
-import ViewCellValueIcon from '@/components/svg/viewCellValue'
-import RowIcon from '@/components/svg/row'
 import IconButton from '@/components/Common/IconButton'
 import csv from '@/lib/csv'
 import fIo from '@/lib/utils/fileIo'
@@ -145,11 +137,7 @@ export default {
     LoadingIndicator,
     Logs,
     SideToolBar,
-    ExportToCsvIcon,
     IconButton,
-    ClipboardIcon,
-    ViewCellValueIcon,
-    RowIcon,
     loadingDialog,
     ValueViewer,
     Record,

src/components/Schema/TableDescription.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="table-name" @click="colVisible = !colVisible">
-      <tree-chevron :expanded="colVisible" />
+      <i :class="['myicon myicon-tree-chevron', { expanded: colVisible }]" />
       {{ name }}
     </div>
     <div v-show="colVisible" class="columns">
@@ -14,11 +14,8 @@
 </template>
 
 <script>
-import TreeChevron from '@/components/svg/treeChevron'
-
 export default {
   name: 'TableDescription',
-  components: { TreeChevron },
   props: {
     name: String,
     columns: Array

src/components/Schema/index.vue

@@ -5,12 +5,25 @@
     </div>
     <div id="db">
       <div class="db-name" @click="schemaVisible = !schemaVisible">
-        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
+        <i
+          v-show="schema.length > 0"
+          :class="['myicon myicon-tree-chevron', { expanded: schemaVisible }]"
+        />
         {{ dbName }}
       </div>
       <db-uploader id="db-edit" type="small" />
-      <export-icon tooltip="Export database" @click="exportToFile" />
+      <IconButton
-      <add-table-icon @click="addCsvJson" />
+        icon="myicon myicon-export"
+        tooltip="Export database"
+        data-test="export-db-btn"
+        @click="exportToFile"
+      />
+      <IconButton
+        icon="myicon myicon-add-table"
+        tooltip=" Add new table from CSV, JSON or NDJSON"
+        data-test="add-csv-json-btn"
+        @click="addCsvJson"
+      />
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -36,21 +49,17 @@ import fIo from '@/lib/utils/fileIo'
 import events from '@/lib/utils/events'
 import TableDescription from './TableDescription'
 import TextField from '@/components/Common/TextField'
-import TreeChevron from '@/components/svg/treeChevron'
 import DbUploader from '@/components/DbUploader'
-import ExportIcon from '@/components/svg/export'
-import AddTableIcon from '@/components/svg/addTable'
 import CsvJsonImport from '@/components/CsvJsonImport'
+import IconButton from '@/components/Common/IconButton'
 
 export default {
   name: 'Schema',
   components: {
     TableDescription,
     TextField,
-    TreeChevron,
     DbUploader,
-    ExportIcon,
+    IconButton,
-    AddTableIcon,
     CsvJsonImport
   },
   data() {
@@ -142,8 +151,20 @@ export default {
   flex-shrink: 0;
 }
 
-.db-name:hover .chevron-icon path,
+.db-name:hover .myicon-tree-chevron,
-:deep(.table-name:hover .chevron-icon path) {
+:deep(.table-name:hover .myicon-tree-chevron) {
-  fill: var(--color-gray-dark);
+  color: var(--color-gray-dark);
+}
+
+:deep(.myicon-tree-chevron) {
+  color: var(--color-border-dark);
+  font-size: 9px;
+  transition: transform 0.15s ease-in-out;
+}
+
+:deep(.myicon-tree-chevron.expanded) {
+  color: var(--color-border-dark);
+  transform: rotate(90deg);
+  color: var(--color-gray-dark);
 }
 </style>

src/components/SideToolBar.vue

@@ -2,33 +2,30 @@
   <div class="side-tool-bar">
     <icon-button
       ref="sqlEditorBtn"
+      icon="myicon myicon-sql-editor"
       :active="panel === 'sqlEditor'"
       tooltip="Switch panel to SQL editor"
       tooltipPosition="top-left"
       @click="$emit('switchTo', 'sqlEditor')"
-    >
+    />
-      <sql-editor-icon />
-    </icon-button>
 
     <icon-button
       ref="tableBtn"
+      icon="myicon myicon-table"
       :active="panel === 'table'"
       tooltip="Switch panel to result set"
       tooltipPosition="top-left"
       @click="$emit('switchTo', 'table')"
-    >
+    />
-      <table-icon />
-    </icon-button>
 
     <icon-button
       ref="dataViewBtn"
+      icon="myicon myicon-data-view"
       :active="panel === 'dataView'"
       tooltip="Switch panel to data view"
       tooltipPosition="top-left"
       @click="$emit('switchTo', 'dataView')"
-    >
+    />
-      <data-view-icon />
-    </icon-button>
 
     <div v-if="$slots.default" class="side-tool-bar-divider" />
 
@@ -38,17 +35,11 @@
 
 <script>
 import IconButton from '@/components/Common/IconButton'
-import TableIcon from '@/components/svg/table'
-import SqlEditorIcon from '@/components/svg/sqlEditor'
-import DataViewIcon from '@/components/svg/dataView'
 
 export default {
   name: 'SideToolBar',
   components: {
-    IconButton,
+    IconButton
-    SqlEditorIcon,
-    DataViewIcon,
-    TableIcon
   },
   props: {
     panel: String

src/components/SqlEditor/index.vue

@@ -12,14 +12,13 @@
     <side-tool-bar panel="sqlEditor" @switch-to="$emit('switchTo', $event)">
       <icon-button
         ref="runBtn"
+        icon="myicon myicon-run"
         :disabled="runDisabled"
         :loading="isGettingResults"
         tooltip="Run SQL query"
         tooltipPosition="top-left"
         @click="$emit('run')"
-      >
+      />
-        <run-icon :disabled="runDisabled" />
-      </icon-button>
     </side-tool-bar>
   </div>
 </template>
@@ -34,16 +33,14 @@ import 'codemirror/theme/neo.css'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/display/autorefresh.js'
 import SideToolBar from '../SideToolBar'
-import IconButton from '@/components/Common/IconButton'
+import IconButton from '@/components/Common/IconButton.vue'
-import RunIcon from '@/components/svg/run'
 
 export default {
   name: 'SqlEditor',
   components: {
     Codemirror,
     SideToolBar,
-    IconButton,
+    IconButton
-    RunIcon
   },
   props: { modelValue: String, isGettingResults: Boolean },
   emits: ['update:modelValue', 'run', 'switchTo'],

src/components/Tabs.vue

@@ -12,13 +12,14 @@
           <span v-if="tab.name">{{ tab.name }}</span>
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
-        <div>
+
-          <close-icon
+        <IconButton
-            class="close-icon"
+          icon="myicon myicon-close"
-            :size="10"
+          variant="secondary"
-            @click="beforeCloseTab(tab)"
+          :iconSize="10"
-          />
+          class="close-icon"
-        </div>
+          @click="beforeCloseTab(tab)"
+        />
       </div>
     </div>
     <tab v-for="tab in tabs" :key="tab.id" :tab="tab" />
@@ -37,7 +38,13 @@
             ? closingTab.name || `[${closingTab.tempName}]`
             : ''
         }}
-        <close-icon @click="$modal.hide('close-warn')" />
+
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="$modal.hide('close-warn')"
+        />
       </div>
       <div class="dialog-body">
         You have unsaved changes. Save changes in
@@ -65,13 +72,13 @@
 
 <script>
 import Tab from './Tab'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 import eventBus from '@/lib/eventBus'
 
 export default {
   components: {
     Tab,
-    CloseIcon
+    IconButton
   },
   emits: [],
   data() {
@@ -155,6 +162,7 @@ export default {
   position: relative;
   max-width: 200px;
   display: flex;
+  align-items: center;
   flex-shrink: 1;
   min-width: 0;
 }

src/components/svg/addTable.vue

@@ -1,69 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <g clip-path="url(#clip0)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          :d="
-            `M13.6573 1.5H2.59985C1.77485 1.5 1.09985 2.175 1.09985 3V13.6649C1.09985 14.4899
-            1.77485 15.1649 2.59985
-            15.1649H9.84V13.6649H8.87866V9.08244H13.6573V9.83777H15.1573V3C15.1573
-            2.17 14.4873 1.5 13.6573 1.5ZM13.6573
-            7.58244V3H8.87866V7.58244H13.6573ZM7.37866 3H2.59985V7.58244H7.37866V3ZM2.59985
-            9.08244V13.6649H7.37866V9.08244H2.59985ZM13.1702
-            10.8434H15.6702V13.1717H18.0001V15.6717H15.6702V18H13.1702V15.6717H10.8401V13.` +
-            '1717H13.1702V10.8434Z'
-          "
-          fill="#A2B1C6"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="18" height="18" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      Add new table from CSV, JSON or NDJSON
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'AddTableIcon',
-  mixins: [tooltipMixin],
-  props: { tooltip: String },
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0;
-  cursor: pointer;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/arrow.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    width="28"
-    height="27"
-    viewBox="0 0 28 27"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17.9475 8.33625L12.7838 13.5L17.9475 18.6638L16.35 20.25L9.60001
-      13.5L16.35 6.75L17.9475 8.33625Z"
-      fill="#506784"
-    />
-  </svg>
-</template>
-
-<script>
-export default {}
-</script>

src/components/svg/changeDb.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <svg
-      class="db-edit-icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3
-      10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12
-      9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3
-      6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75
-      8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995
-      9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78
-      8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      Load another database, CSV, JSON or NDJSON
-    </span>
-  </div>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'ChangeDbIcon',
-  mixins: [tooltipMixin],
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.db-edit-icon {
-  display: block;
-  cursor: pointer;
-}
-.db-edit-icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/chart.vue

@@ -1,47 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.41943 16V10H10.4194V16H8.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.41943 16L2.41943 10H4.41943V16H2.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M11.4194 16V7H13.4194V16H11.4194Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.4194 16V8H16.4194V16H14.4194Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.41943 12V16H5.41943V12H7.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M12.4332 1.80676L16.6265 6.00001L15.9194 6.70712L12.4055 3.19326L5.93169 9.1691L1.71436
-        5.55424L2.36515 4.79499L5.90707 7.83092L12.4332 1.80676Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ChartIcon'
-}
-</script>

src/components/svg/clear.vue

@@ -1,46 +0,0 @@
-<template>
-  <svg
-    :class="['clear-icon', { disabled: disabled }]"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14.3481 14.849C13.8791 15.318 13.1191 15.318 12.6511 14.849L10.0001 11.819L7.34907
-        14.848C6.88007 15.317 6.12007 15.317 5.65207 14.848C5.18307 14.379 5.18307 13.619
-        5.65207 13.151L8.41007 10.001L5.65107 6.84898C5.18207 6.37998 5.18207 5.62098 5.65107
-        5.15198C6.12007 4.68298 6.87907 4.68298 7.34807 5.15198L10.0001 8.18298L12.6511
-        5.15198C13.1201 4.68298 13.8791 4.68298 14.3481 5.15198C14.8171 5.62098 14.8171 6.38098
-        14.3481 6.84898L11.5901 10.001L14.3481 13.151C14.8171 13.62 14.8171 14.38 14.3481
-        14.849V14.849Z"
-      fill="#C8D4E3"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ClearIcon',
-  props: { disabled: Boolean }
-}
-</script>
-
-<style scoped>
-.clear-icon {
-  cursor: pointer;
-}
-
-.clear-icon:hover path {
-  fill: var(--color-danger);
-}
-
-.disabled.clear-icon {
-  cursor: default;
-}
-
-.disabled.clear-icon:hover path {
-  fill: #c8d4e3;
-}
-</style>

src/components/svg/clipboard.vue

@@ -1,27 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      d="M14.1917 1.3851H12.4806V0.703125C12.4806 0.314758 12.1658 0 11.7775 0H6.246C5.85764 0
-      5.54288 0.314758 5.54288 0.703125V1.3851H3.83203C2.86276 1.3851 2.07422 2.17365 2.07422
-      3.14291V16.2422C2.07422 17.2115 2.86276 18 3.83203 18H14.1917C15.161 18 15.9495 17.2115
-      15.9495 16.2422V3.14291C15.9495 2.17365 15.1609 1.3851 14.1917 1.3851V1.3851ZM11.0744
-      1.40625V2.77034H6.94899C6.94899 2.30301 6.94899 1.91698 6.94899 1.40625H11.0744ZM14.5433
-      16.2422C14.5433 16.4361 14.3855 16.5938 14.1917 16.5938H3.83203C3.63812 16.5938 3.48047
-      16.4361 3.48047 16.2422V3.14291C3.48047 2.94914 3.63812 2.79135 3.83203
-      2.79135H5.54274V3.47346C5.54274 3.86183 5.85764 4.17659 6.24586 4.17659H11.7775C12.1657
-      4.17659 12.4806 3.86183 12.4806 3.47346V2.79135H14.1917C14.3855 2.79135 14.5433 2.94914
-      14.5433 3.14291V16.2422ZM12.2745 8.20967C12.5491 8.48433 12.5491 8.92955 12.2745
-      9.20407L8.5795 12.899C8.30498 13.1737 7.85976 13.1737 7.5851 12.899L5.74887
-      11.0628C5.47435 10.7883 5.47435 10.3431 5.74887 10.0684C6.02353 9.7939 6.46861 9.7939
-      6.74327 10.0684L8.08237 11.4075L11.2801 8.20981C11.5547 7.93515 11.9998 7.93515 12.2745
-      8.20967V8.20967Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ClipboardIcon'
-}
-</script>

src/components/svg/close.vue

@@ -1,48 +0,0 @@
-<template>
-  <svg
-    :class="['icon', { disabled: disabled }]"
-    :width="size"
-    :height="size"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    @click.stop="$emit('click')"
-  >
-    <path
-      d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14
-      12.59L8.41 7L14 1.41Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'CloseIcon',
-  props: {
-    size: {
-      type: Number,
-      required: false,
-      default: 14
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emits: ['click']
-}
-</script>
-
-<style scoped>
-.icon {
-  cursor: pointer;
-}
-.disabled {
-  pointer-events: none;
-}
-.icon:hover path {
-  fill: var(--color-text-base);
-}
-</style>

src/components/svg/copy.vue

@@ -1,53 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934
-        4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934
-        16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107
-        16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064
-        15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064
-        0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      Duplicate inquiry
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'CopyIcon',
-  mixins: [tooltipMixin],
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0 12px;
-}
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/dataView.vue

@@ -1,32 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M13.5552 6.91522C13.7584 6.91357 13.9535 6.99442 14.096 7.13926L17.2582 10.3541C17.5486
-        10.6494 17.5447 11.1242 17.2494 11.4147C16.9541 11.7051 16.4793 11.7012 16.1888
-        11.4059L13.57 8.74357L9.29577 13.2318C9.01977 13.5216 8.56484 13.5436 8.2621
-        13.2819L5.35435 10.7677L2.03285 13.7321C1.72382 14.0079 1.24971 13.981 0.973901
-        13.6719C0.69809 13.3629 0.725022 12.8888 1.03406 12.613L4.8471 9.20986C5.12827 8.95892
-        5.55198 8.95559 5.83705 9.20208L8.70249 11.6797L13.0182 7.14796C13.1583 7.00084 13.3521
-        6.91686 13.5552 6.91522Z"
-      fill="#A2B1C6"
-    />
-    <circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M16.036 1.21788L1.96546 1.213C1.14046 1.213 0.465462 1.888 0.465462 2.713L0.464111
-        15.2821C0.464111 16.1071 1.13911 16.7821 1.96411 16.7821L16.0347 16.787C16.8674 16.787
-        17.5347 16.1121 17.5347 15.287L17.536 2.71788C17.536 1.88787 16.866 1.21788 16.036
-        1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'DataViewIcon'
-}
-</script>

src/components/svg/delete.vue

@@ -1,52 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip($event, 'top-left')"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064
-        15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107
-        15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25
-        4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      Delete inquiry
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'DeleteIcon',
-  mixins: [tooltipMixin],
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0 12px;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/dropDownChevron.vue

@@ -1,40 +0,0 @@
-<template>
-  <svg
-    :class="['chevron-icon', { disabled: disabled }]"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.175 7.15002L10 10.975L13.825 7.15002L15 8.33336L10 13.3334L5 8.33336L6.175 7.15002Z"
-      fill="#C8D4E3"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'DropDownChevron',
-  props: { disabled: Boolean }
-}
-</script>
-
-<style scoped>
-.chevron-icon {
-  cursor: pointer;
-}
-
-.chevron-icon:hover path {
-  fill: var(--color-accent);
-}
-
-.disabled.chevron-icon {
-  cursor: default;
-}
-
-.disabled.chevron-icon:hover path {
-  fill: #c8d4e3;
-}
-</style>

src/components/svg/edgeArrow.vue

@@ -1,25 +0,0 @@
-<template>
-  <svg
-    width="27"
-    height="27"
-    viewBox="0 0 27 27"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17.3474 8.33625L12.1837 13.5L17.3474 18.6638L15.7499 20.25L8.99991
-      13.5L15.7499 6.75L17.3474 8.33625Z"
-      fill="#506784"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.19995 19.8L7.19995 7.20001H9.19995V19.8H7.19995Z"
-      fill="#506784"
-    />
-  </svg>
-</template>
-
-<script>
-export default {}
-</script>

src/components/svg/export.vue

@@ -1,56 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip($event, tooltipPosition)"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5
-        15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425
-        12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      {{ tooltip }}
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'ExportIcon',
-  mixins: [tooltipMixin],
-  props: {
-    tooltip: String,
-    tooltipPosition: String
-  },
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0 12px;
-  cursor: pointer;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/exportToCsv.vue

@@ -1,56 +0,0 @@
-<template>
-  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
-    <path
-      d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043
-        15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83
-        1.93115 15.5561 1.44775 15.0082C0.964355 14.4604 0.722656 13.687 0.722656
-        12.6879V12.3715C0.722656 11.7446 0.831055 11.1967 1.04785 10.728C1.26758 10.2563 1.58252
-        9.89301 1.99268 9.63812C2.40283 9.38031 2.87744 9.2514 3.4165 9.2514C4.19287 9.2514
-        4.81689 9.45648 5.28857 9.86664C5.76025 10.2739 6.02832 10.8364 6.09277
-        11.5541H4.55469C4.54297 11.1645 4.44482 10.8847 4.26025 10.7148C4.07568 10.5449 3.79443
-        10.4599 3.4165 10.4599C3.03271 10.4599 2.75146 10.6035 2.57275 10.8906C2.39404 11.1777
-        2.30029 11.6362 2.2915 12.2661V12.7187C2.2915 13.4013 2.37646 13.8891 2.54639
-        14.1821C2.71924 14.475 3.01514 14.6215 3.43408 14.6215C3.78857 14.6215 4.05957 14.538
-        4.24707 14.371C4.43457 14.204 4.53418 13.9389 4.5459 13.5756H6.07959ZM10.1094
-        14.0414C10.1094 13.8159 10.0288 13.6401 9.86768 13.5141C9.70947 13.3881 9.42969 13.2578
-        9.02832 13.123C8.62695 12.9882 8.29883 12.8578 8.04395 12.7319C7.21484 12.3246 6.80029
-        11.7651 6.80029 11.0532C6.80029 10.6987 6.90283 10.3867 7.10791 10.1171C7.31592 9.84467
-        7.60889 9.63373 7.98682 9.48431C8.36475 9.33197 8.78955 9.2558 9.26123 9.2558C9.72119
-        9.2558 10.1328 9.33783 10.4961 9.50189C10.8623 9.66595 11.1465 9.90033 11.3486
-        10.205C11.5508 10.5068 11.6519 10.8525 11.6519 11.2421H10.1138C10.1138 10.9814 10.0332
-        10.7792 9.87207 10.6357C9.71387 10.4921 9.49854 10.4203 9.22607 10.4203C8.95068 10.4203
-        8.73242 10.4819 8.57129 10.6049C8.41309 10.725 8.33398 10.8788 8.33398 11.0663C8.33398
-        11.2304 8.42188 11.3798 8.59766 11.5146C8.77344 11.6464 9.08252 11.7841 9.5249
-        11.9277C9.96729 12.0683 10.3306 12.2206 10.6147 12.3847C11.3062 12.7831 11.6519 13.3325
-        11.6519 14.0327C11.6519 14.5922 11.4409 15.0317 11.019 15.351C10.5972 15.6703 10.0186
-        15.83 9.2832 15.83C8.76465 15.83 8.29443 15.7377 7.87256 15.5532C7.45361 15.3657 7.13721
-        15.1108 6.92334 14.7885C6.7124 14.4633 6.60693 14.0898 6.60693 13.6679H8.15381C8.15381
-        14.0107 8.2417 14.2641 8.41748 14.4282C8.59619 14.5893 8.88477 14.6699 9.2832
-        14.6699C9.53809 14.6699 9.73877 14.6157 9.88525 14.5073C10.0347 14.3959 10.1094 14.2407
-        10.1094 14.0414ZM14.9258 14.0019L16.2002 9.34369H17.9229L15.7695 15.7421H14.082L11.9463
-        9.34369H13.6558L14.9258 14.0019Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M3.03345 0.991333H4.89869V2.49133H3.03345V7.93074H1.53345V2.49133C1.53345 1.66633
-        2.20845 0.991333 3.03345 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.917 0.991333H14.0517V2.49133H15.917V7.93074H17.417V2.49133C17.417 1.66633 16.742
-      0.991333 15.917 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M9.53043 1.28245e-05L13.2199 3.83975L10.9929 3.7953L10.9337 6.76455L7.96442
-      6.70529L8.02368 3.73603L5.6907 3.68947L9.53043 1.28245e-05Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ExportToCsvIcon'
-}
-</script>

src/components/svg/exportToSvg.vue

@@ -1,55 +0,0 @@
-<template>
-  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
-    <path
-      d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604
-        13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798
-        0.974609 11.7203 0.974609 11.0084C0.974609 10.6539 1.07715 10.3419 1.28223
-        10.0723C1.49023 9.79987 1.7832 9.58893 2.16113 9.43951C2.53906 9.28717 2.96387 9.211
-        3.43555 9.211C3.89551 9.211 4.30713 9.29303 4.67041 9.45709C5.03662 9.62115 5.3208
-        9.85553 5.52295 10.1602C5.7251 10.462 5.82617 10.8077 5.82617 11.1973H4.28809C4.28809
-        10.9366 4.20752 10.7344 4.04639 10.5909C3.88818 10.4473 3.67285 10.3755 3.40039
-        10.3755C3.125 10.3755 2.90674 10.4371 2.74561 10.5601C2.5874 10.6802 2.5083 10.834
-        2.5083 11.0215C2.5083 11.1856 2.59619 11.335 2.77197 11.4698C2.94775 11.6016 3.25684
-        11.7393 3.69922 11.8829C4.1416 12.0235 4.50488 12.1758 4.78906 12.3399C5.48047 12.7383
-        5.82617 13.2877 5.82617 13.9879C5.82617 14.5474 5.61523 14.9869 5.19336 15.3062C4.77148
-        15.6255 4.19287 15.7852 3.45752 15.7852C2.93896 15.7852 2.46875 15.6929 2.04688
-        15.5084C1.62793 15.3209 1.31152 15.066 1.09766 14.7437C0.886719 14.4185 0.78125 14.045
-        0.78125 13.6231H2.32812C2.32812 13.9659 2.41602 14.2193 2.5918 14.3834C2.77051 14.5445
-        3.05908 14.6251 3.45752 14.6251C3.7124 14.6251 3.91309 14.5709 4.05957 14.4625C4.20898
-        14.3511 4.28369 14.1959 4.28369 13.9966ZM9.1001 13.9571L10.3745 9.29889H12.0972L9.94385
-        15.6973H8.25635L6.12061 9.29889H7.83008L9.1001 13.9571ZM17.7441 14.9063C17.5068 15.17
-        17.1597 15.3824 16.7026 15.5435C16.2456 15.7047 15.7446 15.7852 15.1997 15.7852C14.3618
-        15.7852 13.6924 15.5289 13.1914 15.0162C12.6904 14.5035 12.4224 13.7901 12.3872
-        12.876L12.3828 12.3223C12.3828 11.6924 12.4941 11.1431 12.7168 10.6744C12.9395 10.2027
-        13.2573 9.84088 13.6704 9.58893C14.0864 9.33405 14.5669 9.2066 15.1118 9.2066C15.9087
-        9.2066 16.5269 9.38971 16.9663 9.75592C17.4087 10.1192 17.6665 10.6627 17.7397
-        11.3863H16.2544C16.2017 11.0289 16.0874 10.774 15.9116 10.6216C15.7358 10.4693 15.4868
-        10.3931 15.1646 10.3931C14.7778 10.3931 14.479 10.5572 14.2681 10.8853C14.0571 11.2134
-        13.9502 11.6822 13.9473 12.2916V12.6783C13.9473 13.317 14.0557 13.7974 14.2725
-        14.1197C14.4922 14.439 14.8364 14.5987 15.3052 14.5987C15.7065 14.5987 16.0054 14.5093
-        16.2017 14.3306V13.3375H15.1294V12.2784H17.7441V14.9063Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M2.86768 0.991333H4.73292V2.49133H2.86768V7.93074H1.36768V2.49133C1.36768 1.66633
-        2.04268 0.991333 2.86768 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.7512 0.991333H13.886V2.49133H15.7512V7.93074H17.2512V2.49133C17.2512 1.66633 16.5762
-        0.991333 15.7512 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M9.36466 -1.76931e-05L13.0541 3.83972L10.8272 3.79527L10.7679 6.76452L7.79865
-        6.70526L7.85791 3.736L5.52492 3.68944L9.36466 -1.76931e-05Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ExportToSvgIcon'
-}
-</script>

src/components/svg/graph.vue

@@ -1,46 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 4C5 5.10457 4.10457 6 3 6C1.89543 6 1 5.10457 1 4C1 2.89543 
-      1.89543 2 3 2C4.10457 2 5 2.89543 5 4Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M17 7.5C17 8.88071 15.8807 10 14.5 10C13.1193 10 12 8.88071 12 
-      7.5C12 6.11929 13.1193 5 14.5 5C15.8807 5 17 6.11929 17 7.5Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M8 13.5C8 14.8807 6.88071 16 5.5 16C4.11929 16 3 14.8807 3 13.5C3 
-      12.1193 4.11929 11 5.5 11C6.88071 11 8 12.1193 8 13.5Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M2.93128 5.31436L3.90527 5.08778L5.48693 11.8867L4.51294 
-      12.1133L2.93128 5.31436Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M12.9447 7.79159L13.5548 8.58392L7.30516 13.3962L6.69507 
-      12.6038L12.9447 7.79159Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M14.1316 6.51712L3.13166 3.51723L2.86844 4.48202L13.8684 
-      7.48191L14.1316 6.51712Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'GraphIcon'
-}
-</script>

src/components/svg/hint.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <svg
-      class="hint-icon"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M8.75 14.1666H10.4167V12.5H8.75V14.1666ZM9.58333 16.25C5.90833 16.25 2.91667 13.2583
-        2.91667 9.58333C2.91667 5.90833 5.90833 2.91667 9.58333 2.91667C13.2583 2.91667 16.25
-        5.90833 16.25 9.58333C16.25 13.2583 13.2583 16.25 9.58333 16.25ZM9.58333 1.25C8.48898
-        1.25 7.40535 1.46555 6.3943 1.88434C5.38326 2.30313 4.4646 2.91696 3.69078
-        3.69078C2.12797 5.25358 1.25 7.3732 1.25 9.58333C1.25 11.7935 2.12797 13.9131 3.69078
-        15.4759C4.4646 16.2497 5.38326 16.8635 6.3943 17.2823C7.40535 17.7011 8.48898 17.9167
-        9.58333 17.9167C11.7935 17.9167 13.9131 17.0387 15.4759 15.4759C17.0387 13.9131 17.9167
-        11.7935 17.9167 9.58333C17.9167 8.48898 17.7011 7.40535 17.2823 6.3943C16.8635 5.38326
-        16.2497 4.4646 15.4759 3.69078C14.7021 2.91696 13.7834 2.30313 12.7724 1.88434C11.7613
-        1.46555 10.6777 1.25 9.58333 1.25Z"
-        fill="#A2B1C6"
-      />
-      <path
-        d="M9.91601 4.51787C8.98167 4.42606 8.05144 4.69097 7.36309 5.24472C6.68735 5.78828
-        6.2998 6.56661 6.2998 7.38012H7.92488C7.92488 6.97463 8.11059 6.60187 8.44779
-        6.33061C8.79784 6.049 9.25647 5.92005 9.73896 5.96755C10.4832 6.04076 11.0828 6.57277
-        11.1647 7.23265C11.2306 7.764 10.9661 8.28194 10.4744 8.58426C9.38676 9.25303 8.73742
-        10.343 8.73742 11.5H10.3625C10.3625 10.8243 10.7477 10.184 11.3929 9.78733C12.3808
-        9.17985 12.9122 8.13913 12.7798 7.07124C12.6144 5.73863 11.41 4.66476 9.91601 4.51787Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span
-      ref="tooltip"
-      class="icon-tooltip"
-      :style="{ ...tooltipStyle, maxWidth: maxWidth }"
-    >
-      {{ hint }}
-    </span>
-  </div>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'HintIcon',
-  mixins: [tooltipMixin],
-  props: {
-    hint: String,
-    maxWidth: String
-  },
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hint-icon {
-  display: block;
-  cursor: pointer;
-}
-.hint-icon:hover path {
-  fill: var(--color-text-base);
-}
-.icon-tooltip {
-  display: block;
-  white-space: normal;
-  height: auto;
-  line-height: normal;
-  padding: 6px;
-  box-sizing: border-box;
-}
-</style>

src/components/svg/html.vue

@@ -1,49 +0,0 @@
-<template>
-  <svg
-    width="19"
-    height="18"
-    viewBox="0 0 19 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5.1626 10.0745L7.56641 10.8831V12.2322L3.68164 10.6501V9.4812L7.56641
-        7.89917V9.2439L5.1626 10.0745ZM8.99023 13.3H7.93994L10.124 6.35229H11.1787L8.99023
-        13.3ZM14.1099 10.0613L11.7192 9.24829V7.90356L15.582 9.4856V10.6545L11.7192
-        12.2366V10.8918L14.1099 10.0613Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M2.17041 0.0637207H16.2185V1.56372H2.17041V9.30354H0.67041V1.56372C0.67041 0.73872
-      1.34541 0.0637207 2.17041 0.0637207Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M17.1704 0.0637207H15.3052V1.56372H17.1704V9.84163H18.6704V1.56372C18.6704 0.73872
-      17.9954 0.0637207 17.1704 0.0637207Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M2.17041 17.1098H15.8754V15.6098H2.17041V8.78486H0.67041V15.6098C0.67041 16.4348
-      1.34541 17.1098 2.17041 17.1098Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M17.1704 17.1098H15.3052V15.6098H17.1704V8.55939H18.6704V15.6098C18.6704 16.4348
-      17.9954 17.1098 17.1704 17.1098Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M18.1197 4.13787H1.76172V3.03787H18.1197V4.13787Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'HtmlIcon'
-}
-</script>

src/components/svg/pause.vue

@@ -1,27 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3 4C3 3.44772 3.14924 3 3.33333 3H6.66667C6.85076 3 7 3.44772 7 
-      4V14C7 14.5523 6.85076 15 6.66667 15H3.33333C3.14924 15 3 14.5523 3 14V4Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M11 4C11 3.44772 11.1492 3 11.3333 3H14.6667C14.8508 3 15 3.44772 15 
-      4V14C15 14.5523 14.8508 15 14.6667 15H11.3333C11.1492 15 11 14.5523 11 
-      14V4Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'PauseIcon'
-}
-</script>

src/components/svg/pivot.vue

@@ -1,22 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M15.7661 5.13901L18.3407 9.43008H16.5161V12.8467C16.5161 13.7957 16.2783 14.6451 15.6714
-      15.2521C15.0645 15.859 14.215 16.0967 13.2661 16.0967H9.84942V17.9214L5.55835
-      15.3467L9.84942 12.7721V14.5967H13.2661C13.9838 14.5967 14.3844 14.4178 14.6108
-      14.1914C14.8372 13.965 15.0161 13.5645 15.0161 12.8467V9.43008H13.1914L15.7661 5.13901Z"
-      fill="#A2B1C6"
-    />
-    <path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6" />
-    <path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6" />
-    <path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'PivotIcon'
-}
-</script>

src/components/svg/png.vue

@@ -1,39 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686
-        14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231
-        5.51953 9 5.51953ZM9 12.9023C7.35226 12.9023 6.01172 11.5618 6.01172 9.91406C6.01172
-        8.26632 7.35226 6.92578 9 6.92578C10.6477 6.92578 11.9883 8.26632 11.9883
-        9.91406C11.9883 11.5618 10.6477 12.9023 9 12.9023Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.8906 3.41016H13.304C13.2221 3.41016 13.1483 3.36547 13.1104 3.29319L12.3948
-        1.78945C12.3928 1.78534 12.3908 1.78126 12.3887 1.77718C12.1117 1.22312 11.5548 0.878906
-        10.9353 0.878906H7.11478C6.49529 0.878906 5.93835 1.22312 5.66135 1.77722C5.65928 1.7813
-        5.65731 1.78538 5.65534 1.78949L4.9397 3.2933C4.90173 3.36547 4.82797 3.41016 4.74609
-        3.41016H2.10938C0.946266 3.41016 0 4.35642 0 5.51953V15.0117C0 16.1748 0.946266 17.1211
-        2.10938 17.1211H15.8906C17.0537 17.1211 18 16.1748 18 15.0117V5.51953C18 4.35642 17.0537
-        3.41016 15.8906 3.41016ZM16.5938 15.0117C16.5938 15.3994 16.2783 15.7148 15.8906
-        15.7148H2.10938C1.72167 15.7148 1.40625 15.3994 1.40625 15.0117V5.51953C1.40625 5.13183
-        1.72167 4.81641 2.10938 4.81641H4.74609C5.36555 4.81641 5.92249 4.47223 6.19952
-        3.91816C6.2016 3.91409 6.20357 3.90997 6.20557 3.90586L6.92121 2.40205C6.95914 2.32984
-        7.0329 2.28516 7.11478 2.28516H10.9353C11.0172 2.28516 11.091 2.32984 11.1289
-        2.40202L11.8445 3.90582C11.8465 3.90994 11.8485 3.91405 11.8506 3.91813C12.1276 4.47219
-        12.6846 4.81637 13.304 4.81637H15.8906C16.2783 4.81637 16.5938 5.13179 16.5938
-        5.5195V15.0117Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'PngIcon'
-}
-</script>

src/components/svg/rename.vue

@@ -1,52 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25
-        12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825
-        4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545
-        4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
-      Rename inquiry
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'RenameIcon',
-  mixins: [tooltipMixin],
-  emits: ['click'],
-  methods: {
-    onClick() {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0 12px;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/restart.vue

@@ -1,36 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M7.34708 3.32922C8.63088 2.90468 10.017 2.90308 11.3022 
-      3.32434C11.9084 3.52308 12.4768 3.8114 12.9906 4.1759V3.34387C12.9906 
-      2.79159 13.4384 2.34387 13.9906 2.34387C14.5429 2.34387 14.9906 2.79159 
-      14.9906 3.34387V6.67102C14.9906 7.22331 14.5429 7.67102 13.9906 
-      7.67102H10.6635C10.1112 7.67102 9.66349 7.22331 9.66349 6.67102C9.66351 
-      6.11876 10.1112 5.67102 10.6635 5.67102H11.6313C11.3351 5.4851 11.0154 
-      5.33498 10.6791 5.22473C9.80069 4.93681 8.85289 4.93738 7.97501 
-      5.22766C7.09726 5.51795 6.33574 6.08228 5.80216 6.83704C5.26867 
-      7.59191 4.99088 8.49846 5.01017 9.42297C5.02954 10.3475 5.34482 
-      11.2417 5.90958 11.9738C6.47435 12.7058 7.25871 13.237 8.14787 
-      13.4904C9.03716 13.7437 9.9843 13.7055 10.85 13.381C11.7157 13.0565 
-      12.4548 12.463 12.9584 11.6876C13.2592 11.2244 13.879 11.0929 14.3422 
-      11.3937C14.805 11.6945 14.9366 12.3135 14.6361 12.7765C13.8996 13.9106 
-      12.8185 14.7794 11.5522 15.254C10.2859 15.7287 8.90058 15.7846 7.60001 
-      15.4142C6.2994 15.0437 5.15167 14.2661 4.3256 13.1954C3.49956 12.1247 
-      3.03849 10.8169 3.01017 9.46497C2.98191 8.1131 3.38782 6.7872 4.16837 
-      5.68274C4.94892 4.57842 6.06331 3.75379 7.34708 3.32922Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'RestartIcon'
-}
-</script>

src/components/svg/row.vue

@@ -1,47 +0,0 @@
-<template>
-  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
-    <g clip-path="url(#clip0_2130_5292)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M1.85303 11.3794L1.85303 7.80371L5.86304 7.80371L5.86304
-      11.3794L1.85303 11.3794ZM7.36304 11.3794L7.36304 7.80371L11.3428
-      7.80371L11.3428 11.3794L7.36304 11.3794ZM12.8428 11.3794L16.853
-      11.3794L16.853 7.80371L12.8428 7.80371L12.8428 11.3794ZM15.353
-      6.30371L16.853 6.30371C17.6815 6.30371 18.353 6.97528 18.353
-      7.80371L18.353 11.3794C18.353 12.2078 17.6815 12.8794 16.853
-      12.8794L15.353 12.8794L15.353 14.3111C15.353 15.0153 14.7603 15.5916
-      14.0358 15.5916L4.67027 15.5916C3.94579 15.5916 3.35303 15.0153 3.35303
-      14.3111L3.35303 12.8794L1.85303 12.8794C1.0246 12.8794 0.353027 12.2078
-      0.353027 11.3794L0.353027 7.80371C0.353027 6.97528 1.0246 6.30371
-      1.85303 6.30371L3.35303 6.30371L3.35303 4.87201C3.35303 4.16349 3.94139
-      3.59155 4.67027 3.59155L14.0358 3.59155C14.7604 3.59155 15.353 4.16117
-      15.353 4.87201L15.353 6.30371ZM14.0315 6.30371L14.0315 4.87086L11.887
-      4.87086L11.887 6.30371L12.8428 6.30371L14.0315 6.30371ZM10.387
-      6.30371L10.387 4.87086L8.26685 4.87086L8.26685 6.30371L10.387
-      6.30371ZM6.76685 6.30371L6.76685 4.87086L4.67027 4.87086L4.67027
-      6.30371L6.76685 6.30371ZM4.67027 12.8794L4.67027 14.3121L6.76685
-      14.3121L6.76685 12.8794L4.67027 12.8794ZM8.26685 12.8794L8.26685
-      14.3121L10.387 14.3121L10.387 12.8794L8.26685 12.8794ZM11.887
-      12.8794L11.887 14.3121L14.0315 14.3121L14.0315 12.8794L11.887 12.8794Z"
-        fill="#A2B1C6"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_2130_5292">
-        <rect
-          width="18"
-          height="18"
-          fill="white"
-          transform="translate(0.353027 18.5916) rotate(-90)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'RowIcon'
-}
-</script>

src/components/svg/run.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
-    <path
-      d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'RunIcon'
-}
-</script>

src/components/svg/settings.vue

@@ -1,129 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_2236_2707)">
-      <path
-        d="M8.11441 0.0274963C7.73011 0.0274918 7.35916 0.168422 7.0718 
-        0.423594C6.78445 0.678766 6.60065 1.03046 6.55522 1.41207L7.89167 
-        1.57122C7.89815 1.51669 7.9244 1.46644 7.96546 1.42997C8.00651 1.39351 
-        8.05951 1.37337 8.11441 1.37337V0.0274963ZM9.88559 
-        0.0274963H8.11441V1.37337H9.88559V0.0274963ZM11.4448 
-        1.41207C11.3994 1.03046 11.2156 0.678766 10.9282 0.423594C10.6408 
-        0.168422 10.2699 0.0274918 9.88559 0.0274963V1.37337C9.94049 1.37337 
-        9.99349 1.39351 10.0345 1.42997C10.0756 1.46644 10.1018 1.51669 
-        10.1083 1.57122L11.4448 1.41207ZM11.5815 2.56055L11.4448 
-        1.41207L10.1083 1.57122L10.2449 2.7197L11.5815 2.56055ZM14.349 
-        3.0888L13.282 3.5464L13.8123 4.78326L14.8793 4.32566L14.349 
-        3.0888ZM16.3276 3.74682C16.1355 3.41401 15.8279 3.16322 15.4633 
-        3.04195C15.0986 2.92067 14.7021 2.93735 14.349 3.0888L14.8793 
-        4.32566C14.9298 4.304 14.9865 4.30172 15.0386 4.31904C15.0907 
-        4.33636 15.1346 4.3722 15.1621 4.41976L16.3276 3.74682ZM17.2132 
-        5.28067L16.3276 3.74682L15.1621 4.41976L16.0477 5.95361L17.2132 
-        5.28067ZM16.7937 7.32326C17.1015 7.09311 17.3142 6.75809 17.3915 
-        6.38165C17.4688 6.00521 17.4054 5.61348 17.2132 5.28067L16.0477 
-        5.95361C16.0751 6.00117 16.0842 6.05714 16.0731 6.11093C16.0621 
-        6.16471 16.0317 6.21257 15.9877 6.24544L16.7937 7.32326ZM15.7861 
-        8.07673L16.7937 7.32326L15.9877 6.24544L14.9801 6.99891L15.7861 
-        8.07673ZM16.7937 10.6767L15.7861 9.92327L14.9802 11.0011L15.9877 
-        11.7546L16.7937 10.6767ZM17.2132 12.7193C17.4054 12.3865 17.4688 
-        11.9948 17.3915 11.6183C17.3142 11.2419 17.1015 10.9069 16.7937 
-        10.6767L15.9877 11.7546C16.0317 11.7874 16.0621 11.8353 16.0731 
-        11.8891C16.0842 11.9429 16.0751 11.9988 16.0477 12.0464L17.2132 
-        12.7193ZM16.3276 14.2532L17.2132 12.7193L16.0477 12.0464L15.1621 
-        13.5802L16.3276 14.2532ZM14.349 14.9112C14.7021 15.0626 15.0986 
-        15.0793 15.4633 14.958C15.8279 14.8368 16.1355 14.586 16.3276 
-        14.2532L15.1621 13.5802C15.1346 13.6278 15.0907 13.6636 15.0386 
-        13.6809C14.9865 13.6982 14.9298 13.6959 14.8793 13.6742L14.349 
-        14.9112ZM13.282 14.4536L14.349 14.9112L14.8793 13.6742L13.8125 
-        13.2167L13.282 14.4536ZM11.4448 16.5879L11.5814 15.4394L10.245 
-        15.2803L10.1083 16.4288L11.4448 16.5879ZM9.88559 17.9725C10.2699 
-        17.9725 10.6408 17.8316 10.9282 17.5764C11.2156 17.3212 11.3994 
-        16.9695 11.4448 16.5879L10.1083 16.4288C10.1018 16.4833 10.0756 
-        16.5336 10.0345 16.57C9.99349 16.6065 9.94049 16.6266 9.88559 
-        16.6266V17.9725ZM8.11441 
-        17.9725H9.88559V16.6266H8.11441V17.9725ZM6.55522 
-        16.5879C6.60065 16.9695 6.78445 17.3212 7.0718 
-        17.5764C7.35916 17.8316 7.73011 17.9725 8.11441 
-        17.9725V16.6266C8.05951 16.6266 8.00651 16.6065 
-        7.96546 16.57C7.9244 16.5336 7.89815 16.4833 7.89167 
-        16.4288L6.55522 16.5879ZM6.44172 15.6342L6.55522 16.5879L7.89167 
-        16.4288L7.77817 15.475L6.44172 15.6342ZM4.00097 13.2967L3.12066 
-        13.6742L3.65104 14.9112L4.53136 14.5337L4.00097 13.2967ZM3.12066 
-        13.6742C3.07021 13.6959 3.01346 13.6982 2.96138 13.6809C2.90929 
-        13.6636 2.86536 13.6278 2.83791 13.5802L1.67238 14.2532C1.86453 
-        14.586 2.17205 14.8368 2.53672 14.958C2.90138 15.0793 3.29785 
-        15.0626 3.65104 14.9112L3.12066 13.6742ZM2.83791 13.5802L1.95233 
-        12.0464L0.786798 12.7193L1.67238 14.2532L2.83791 13.5802ZM1.95233 
-        12.0464C1.92487 11.9988 1.91582 11.9429 1.92688 11.8891C1.93794
-         11.8353 1.96834 11.7874 2.01233 11.7546L1.20626 10.6767C0.898499 
-         10.9069 0.685823 11.2419 0.608517 11.6183C0.531211 11.9948 0.594643 
-         12.3865 0.786798 12.7193L1.95233 12.0464ZM2.01233 11.7546L2.70007 
-         11.2403L1.89389 10.1625L1.20626 10.6767L2.01233 11.7546ZM1.20626 
-         7.32326L1.894 7.83761L2.70007 6.75979L2.01233 6.24544L1.20626 
-         7.32326ZM0.786798 5.28067C0.594643 5.61348 0.531211 6.00521 
-         0.608517 6.38165C0.685823 6.75809 0.898499 7.09311 1.20626 
-         7.32326L2.01233 6.24544C1.96834 6.21257 1.93794 6.16471 1.92688 
-         6.11093C1.91582 6.05714 1.92487 6.00117 1.95233 5.95361L0.786798 
-         5.28067ZM1.67238 3.74682L0.786798 5.28067L1.95233 5.95361L2.83791 
-         4.41976L1.67238 3.74682ZM3.65104 3.0888C3.29785 2.93735 2.90138 
-         2.92067 2.53672 3.04195C2.17205 3.16322 1.86453 3.41401 1.67238 
-         3.74682L2.83791 4.41976C2.86536 4.37223 2.90929 4.33641 2.96138 
-         4.31909C3.01346 4.30176 3.07021 4.30414 3.12066 4.32577L3.65104 
-         3.0888ZM4.53136 3.46632L3.65104 3.0888L3.12066 4.32577L4.00097 
-         4.70329L4.53136 3.46632ZM6.55522 1.41207L6.44172 2.36584L7.77817 
-         2.52499L7.89167 1.57122L6.55522 1.41207ZM6.3585 4.5022C7.04018 
-         4.11795 7.6696 3.4366 7.77817 2.52499L6.44172 2.36584C6.39887 2.72575 
-         6.13116 3.08544 5.69756 3.32994L6.3585 4.5022ZM4.00097 4.70329C4.81792 
-         5.05367 5.68948 4.87938 6.3585 4.5022L5.69756 3.32994C5.28213 3.56412 
-         4.85852 3.60663 4.53136 3.46632L4.00097 4.70329ZM3.72866 9C3.72866 
-         8.20369 3.44288 7.3153 2.70007 6.75979L1.894 7.83761C2.19884 8.06562 
-         2.38278 8.48834 2.38278 9H3.72866ZM6.3585 13.4978C5.68948 13.1206 
-         4.81792 12.9463 4.00097 13.2967L4.53136 14.5337C4.85852 14.3934 
-         5.28213 14.436 5.69756 14.6703L6.3585 13.4978ZM2.70007 
-         11.2403C3.44299 10.6848 3.72866 9.79631 3.72866 9H2.38278C2.38278 
-         9.51177 2.19873 9.9346 1.89389 10.1625L2.70007 11.2403ZM11.5243 
-         13.4358C10.9034 13.8057 10.3448 14.4432 10.245 15.2803L11.5814 
-         15.4394C11.6183 15.1293 11.8415 14.8134 12.2132 14.5919L11.5243 
-         13.4358ZM13.8125 13.2167C13.0169 12.8756 12.1673 13.0527 11.5243 
-         13.4358L12.2132 14.5919C12.5925 14.3659 12.9839 14.3258 13.282 
-         14.4536L13.8125 13.2167ZM7.77817 15.475C7.6696 14.5635 7.04018 
-         13.8822 6.3585 13.4978L5.69756 14.6703C6.13116 14.9147 6.39887 
-         15.2742 6.44172 15.6342L7.77817 15.475ZM14.047 9C14.047 9.71656 
-         14.316 10.5045 14.9802 11.0011L15.7861 9.92327C15.547 9.74449 15.3929 
-         9.41139 15.3929 9H14.047ZM14.9801 6.99891C14.3159 7.49553 14.047 
-         8.28332 14.047 9H15.3929C15.3929 8.58861 15.547 8.2555 15.7861 
-         8.07673L14.9801 6.99891ZM11.5243 4.56422C12.1673 4.94734 13.0168 
-         5.12444 13.8123 4.78326L13.282 3.5464C12.9839 3.67426 12.5925 
-         3.63399 12.2132 3.408L11.5243 4.56422ZM10.2449 2.7197C10.3446 
-         3.55683 10.9034 4.19433 11.5243 4.56422L12.2132 3.408C11.8415 
-         3.1866 11.6184 2.87077 11.5815 2.56055L10.2449 2.7197Z"
-        fill="#A2B1C6"
-      />
-      <path
-        d="M11.0935 9C11.0935 7.84373 10.1562 6.90642 8.99988 6.90642C7.84361 
-        6.90642 6.90629 7.84373 6.90629 9C6.90629 10.1563 7.84361 11.0936 
-        8.99988 11.0936C10.1562 11.0936 11.0935 10.1563 11.0935 9ZM12.2898 
-        9C12.2898 10.817 10.8169 12.2899 8.99988 12.2899C7.18289 12.2899 
-        5.70996 10.817 5.70996 9C5.70996 7.18301 7.18289 5.71008 8.99988 
-        5.71008C10.8169 5.71008 12.2898 7.18301 12.2898 9Z"
-        fill="#A2B1C6"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_2236_2707">
-        <rect width="18" height="18" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SettingsIcon'
-}
-</script>

src/components/svg/sort.vue

@@ -1,56 +0,0 @@
-<template>
-  <svg
-    :class="['sort-icon', { horizontal }, { asc }]"
-    width="6"
-    height="12"
-    viewBox="0 0 6 12"
-    fill="none"
-  >
-    <path
-      d="M2.99932 -3.63032e-05C2.75092 -3.63032e-05 2.54932 0.201563 2.54932 0.449964L2.54932
-        11.55C2.54932 11.7984 2.75092 12 2.99932 12C3.24772 12 3.44932 11.7984 3.44932
-        11.55L3.44932 0.449964C3.44932 0.201563 3.24772 -3.63032e-05 2.99932 -3.63032e-05Z"
-      fill="#506784"
-    />
-    <path
-      d="M2.99915 1.80492e-05C2.8839 1.80492e-05 2.76865 0.0438534 2.68109 0.132073L0.581055
-        2.232C0.405273 2.40789 0.405273 2.69287 0.581055 2.86865C0.756946 3.04443 1.04193 3.04443
-        1.21771 2.86865L2.99969 1.08667L4.78168 2.86865C4.95746 3.04443 5.24255 3.04443 5.41833
-        2.86865C5.59412 2.69287 5.59412 2.40789 5.41833 2.232L3.3183 0.132073C3.22953 0.0438534
-        3.11428 1.80492e-05 2.99915 1.80492e-05V1.80492e-05Z"
-      fill="#506784"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SortIcon',
-  props: {
-    horizontal: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    asc: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-svg.asc {
-  transform: rotate(180deg);
-}
-
-svg.horizontal {
-  transform: rotate(-90deg);
-}
-
-svg.horizontal.asc {
-  transform: rotate(90deg);
-}
-</style>

src/components/svg/sqlEditor.vue

@@ -1,60 +0,0 @@
-<template>
-  <svg width="18" height="19" viewBox="0 0 18 19" fill="none">
-    <g clip-path="url(#clip0)">
-      <path
-        d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3
-          2.18843 3.675 1.51343 4.5 1.51343Z"
-        fill="#A2B1C6"
-      />
-      <path
-        d="M4.28369 14.8127C4.28369 14.5872 4.20312 14.4114 4.04199 14.2854C3.88379 14.1594
-          3.604 14.0291 3.20264 13.8943C2.80127 13.7595 2.47314 13.6292 2.21826 13.5032C1.38916
-          13.0959 0.974609 12.5364 0.974609 11.8245C0.974609 11.47 1.07715 11.158 1.28223
-          10.8884C1.49023 10.616 1.7832 10.405 2.16113 10.2556C2.53906 10.1033 2.96387 10.0271
-          3.43555 10.0271C3.89551 10.0271 4.30713 10.1091 4.67041 10.2732C5.03662 10.4373 5.3208
-          10.6716 5.52295 10.9763C5.7251 11.2781 5.82617 11.6238 5.82617 12.0134H4.28809C4.28809
-          11.7527 4.20752 11.5505 4.04639 11.407C3.88818 11.2634 3.67285 11.1917 3.40039
-          11.1917C3.125 11.1917 2.90674 11.2532 2.74561 11.3762C2.5874 11.4963 2.5083
-          11.6501 2.5083 11.8376C2.5083 12.0017 2.59619 12.1511 2.77197 12.2859C2.94775 12.4177
-          3.25684 12.5554 3.69922 12.699C4.1416 12.8396 4.50488 12.9919 4.78906 13.156C5.48047
-          13.5544 5.82617 14.1038 5.82617 14.804C5.82617 15.3635 5.61523 15.803 5.19336
-          16.1223C4.77148 16.4417 4.19287 16.6013 3.45752 16.6013C2.93896 16.6013 2.46875 16.509
-          2.04688 16.3245C1.62793 16.137 1.31152 15.8821 1.09766 15.5598C0.886719 15.2346
-          0.78125 14.8611 0.78125 14.4392H2.32812C2.32812 14.782 2.41602 15.0354 2.5918
-          15.1995C2.77051 15.3606 3.05908 15.4412 3.45752 15.4412C3.7124 15.4412 3.91309
-          15.387 4.05957 15.2786C4.20898 15.1672 4.28369 15.012 4.28369 14.8127ZM12.0444
-          13.446C12.0444 14.0378 11.9463 14.5549 11.75 14.9973C11.5537 15.4368 11.2827 15.7898
-          10.937 16.0564L11.9697 16.8738L11.0161 17.6824L9.64062 16.575C9.51172 16.5925 9.38281
-          16.6013 9.25391 16.6013C8.70898 16.6013 8.22559 16.4753 7.80371 16.2234C7.38184 15.9714
-          7.05225 15.6111 6.81494 15.1423C6.58057 14.6736 6.45898 14.1345 6.4502
-          13.5251V13.1868C6.4502 12.5569 6.56445 12.0032 6.79297 11.5256C7.02441 11.0481 7.35254
-          10.679 7.77734 10.4182C8.20508 10.1575 8.69434 10.0271 9.24512 10.0271C9.78711 10.0271
-          10.2705 10.156 10.6953 10.4138C11.1201 10.6716 11.4497 11.0393 11.6841 11.5168C11.9214
-          11.9915 12.0415 12.5364 12.0444 13.1516V13.446ZM10.4756 13.178C10.4756 12.5422 10.3687
-          12.0603 10.1548 11.7322C9.94385 11.4011 9.64062 11.2356 9.24512 11.2356C8.83789 11.2356
-          8.53174 11.3982 8.32666 11.7234C8.12158 12.0486 8.01758 12.5247 8.01465
-          13.1516V13.446C8.01465 14.0759 8.11865 14.5593 8.32666 14.8962C8.53467 15.2302 8.84375
-          15.3972 9.25391 15.3972C9.64648 15.3972 9.94678 15.2317 10.1548 14.9006C10.3657
-          14.5696 10.4727 14.0935 10.4756 13.4724V13.178ZM14.3735
-          15.3269H17.0586V16.5134H12.8311V10.115H14.3735V15.3269Z"
-        fill="#A2B1C6"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect
-          width="18"
-          height="18"
-          fill="white"
-          transform="translate(0 0.0134277)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SqlEditorIcon'
-}
-</script>

src/components/svg/table.vue

@@ -1,42 +0,0 @@
-<template>
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5 2.16512L3.5 2.16999C2.675 2.16999 2 2.84499 2 3.66999V14.3349C2 15.1599 2.675
-        15.8349 3.5 15.8349L14.5 15.83C15.3327 15.83 16 15.1551 16 14.33V3.66512C16 2.83511 15.33
-        2.16512 14.5 2.16512ZM14.5014 3.66512L3.49878 3.66999V14.33L14.5014 14.3251V3.66512Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.27319 14.7069L6.27319 3.32135L7.77319 3.32135L7.77319 14.7069L6.27319 14.7069Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M10.2639 14.6932L10.2639 3.30772L11.7639 3.30772L11.7639 14.6932L10.2639 14.6932Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M15.5108 7.48325H2.4895V5.98325H15.5108V7.48325Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M15.5108 11.6056H2.4895V10.1056H15.5108V11.6056Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'TableIcon'
-}
-</script>

src/components/svg/treeChevron.vue

@@ -1,36 +0,0 @@
-<template>
-  <svg
-    :style="{ transform: expanded ? 'rotate(90deg)' : 'rotate(0)' }"
-    class="chevron-icon"
-    width="9"
-    height="9"
-    viewBox="0 0 8 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992
-      5.79997L1.99992 11.2L0.721924 9.93097Z"
-      :fill="expanded ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'TreeChevron',
-  props: {
-    expanded: {
-      type: Boolean,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.chevron-icon {
-  -webkit-transition: transform 0.15s ease-in-out;
-  transition: transform 0.15s ease-in-out;
-}
-</style>

src/components/svg/viewCellValue.vue

@@ -1,44 +0,0 @@
-<template>
-  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
-    <g clip-path="url(#clip0_2131_6054)">
-      <path
-        d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
-      12.9771 7.47439 13.4751 7.53264V3.14734C13.4751 2.31891 12.8035 1.64734
-      11.9751 1.64734L3.53784 1.64734C2.70941 1.64734 2.03784 2.31891 2.03784
-      3.14734L2.03784 11.5846C2.03784 12.413 2.70942 13.0846 3.53784
-      13.0846H10.0831C9.771 12.6184 9.58279 12.1055 9.51083
-      11.5846H3.53784Z"
-        fill="#A2B1C6"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M14.7887 9.9291C15.4307 10.8837 15.1773 12.1779 14.2228
-      12.8199C13.2682 13.4618 11.974 13.2084 11.332 12.2539C10.69 11.2993
-      10.9434 10.0051 11.898 9.3631C12.8525 8.72113 14.1468 8.97454 14.7887
-      9.9291ZM14.4606 14.3901L16.6181 17.5982C16.8492 17.9419 17.3153 18.0331
-      17.659 17.802C18.0027 17.5708 18.0939 17.1048 17.8628 16.7611L15.6884
-      13.5279C16.7949 12.3365 16.9801 10.4996 16.0334 9.092C14.9292 7.45002
-      12.7029 7.01412 11.0609 8.1184C9.41891 9.22268 8.98302 11.449 10.0873
-      13.0909C11.062 14.5403 12.9109 15.05 14.4606 14.3901Z"
-        fill="#A2B1C6"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_2131_6054">
-        <rect
-          width="18"
-          height="18"
-          fill="white"
-          transform="translate(0.5 18.5916) rotate(-90)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ViewCellValueIcon'
-}
-</script>

src/lib/graphHelper.js

@@ -143,29 +143,46 @@ export function reduceNodes(nodeId, nodeData, interactionState, settings) {
     neighborsOfSelectedNode,
     neighborsOfHoveredNode,
     selectedEdgeExtremities,
-    hoveredEdgeExtremities
+    hoveredEdgeExtremities,
+    nodesMatchingSearchQuery,
+    focusedFoundNodeId
   } = interactionState
 
   const res = { ...nodeData }
 
-  if (selectedNodeId || hoveredNodeId || hoveredEdgeId || selectedEdgeId) {
+  if (
+    selectedNodeId ||
+    hoveredNodeId ||
+    hoveredEdgeId ||
+    selectedEdgeId ||
+    nodesMatchingSearchQuery ||
+    focusedFoundNodeId
+  ) {
     res.zIndex = 2
-    res.highlighted = nodeId === selectedNodeId || nodeId === hoveredNodeId
+
+    const matchQuery =
+      nodesMatchingSearchQuery && nodesMatchingSearchQuery.includes(nodeId)
+
+    res.highlighted = [
+      selectedNodeId,
+      hoveredNodeId,
+      focusedFoundNodeId
+    ].includes(nodeId)
+
     if (res.highlighted) {
       res.labelColor = 'black'
     }
 
     const isInHoveredFamily =
-      nodeId === hoveredNodeId ||
       neighborsOfHoveredNode?.has(nodeId) ||
       hoveredEdgeExtremities.includes(nodeId)
     const isInSelectedFamily =
-      nodeId === selectedNodeId ||
       neighborsOfSelectedNode?.has(nodeId) ||
       selectedEdgeExtremities.includes(nodeId)
-    if (isInSelectedFamily || isInHoveredFamily) {
+
+    if (res.highlighted || isInSelectedFamily || isInHoveredFamily) {
       res.forceLabel = true
-    } else {
+    } else if (!matchQuery) {
       res.color = getDiminishedColor(
         nodeData.color,
         settings.style.backgroundColor
@@ -191,26 +208,35 @@ export function reduceEdges(
     selectedEdgeId,
     hoveredEdgeId,
     neighborsOfSelectedNode,
-    neighborsOfHoveredNode
+    neighborsOfHoveredNode,
+    nodesMatchingSearchQuery
   } = interactionState
 
   const res = { ...edgeData }
-  if (hoveredEdgeId || selectedEdgeId || selectedNodeId || hoveredNodeId) {
+  if (
+    hoveredEdgeId ||
+    selectedEdgeId ||
+    selectedNodeId ||
+    hoveredNodeId ||
+    nodesMatchingSearchQuery
+  ) {
     const extremities = graph.extremities(edgeId)
     res.zIndex = 2
     const isHighlighted = hoveredEdgeId === edgeId || selectedEdgeId === edgeId
 
-    let isVisible
+    let isVisible =
-    if (settings.style.highlightMode === 'node_alone') {
+      isHighlighted ||
-      isVisible = isHighlighted
+      (nodesMatchingSearchQuery &&
-    } else if (settings.style.highlightMode === 'node_and_neighbors') {
+        extremities.every(nodeId => nodesMatchingSearchQuery.includes(nodeId)))
+
+    if (settings.style.highlightMode === 'node_and_neighbors') {
       isVisible =
-        isHighlighted ||
+        isVisible ||
         (selectedNodeId && extremities.includes(selectedNodeId)) ||
         (hoveredNodeId && extremities.includes(hoveredNodeId))
-    } else {
+    } else if (settings.style.highlightMode === 'include_neighbor_edges') {
       isVisible =
-        isHighlighted ||
+        isVisible ||
         (selectedNodeId &&
           extremities.every(
             n => n === selectedNodeId || neighborsOfSelectedNode.has(n)
@@ -220,6 +246,7 @@ export function reduceEdges(
             n => n === hoveredNodeId || neighborsOfHoveredNode.has(n)
           ))
     }
+
     if (isHighlighted) {
       res.size = res.size * 2
       res.forceLabel = true

src/main.js

@@ -13,6 +13,7 @@ import '@/assets/styles/tooltips.css'
 import '@/assets/styles/messages.css'
 import 'vue-multiselect/dist/vue-multiselect.css'
 import '@/assets/styles/multiselect.css'
+import '@/assets/icons.css'
 import 'vue-final-modal/style.css'
 
 if (!['localhost', '127.0.0.1'].includes(location.hostname)) {

src/tooltipMixin.js

@@ -3,7 +3,8 @@ export default {
     return {
       tooltipStyle: {
         visibility: 'hidden'
-      }
+      },
+      showTooltipTimeout: null
     }
   },
   computed: {
@@ -13,27 +14,30 @@ export default {
   },
   methods: {
     showTooltip(e, tooltipPosition) {
-      const position = tooltipPosition
+      this.showTooltipTimeout = setTimeout(() => {
-        ? tooltipPosition.split('-')
+        const position = tooltipPosition
-        : ['top', 'right']
+          ? tooltipPosition.split('-')
-      const offset = 12
+          : ['top', 'right']
+        const offset = 12
 
-      if (position[0] === 'top') {
+        if (position[0] === 'top') {
-        this.tooltipStyle.top = e.clientY - offset + 'px'
+          this.tooltipStyle.top = e.clientY - offset + 'px'
-      } else {
+        } else {
-        this.tooltipStyle.top = e.clientY + offset + 'px'
+          this.tooltipStyle.top = e.clientY + offset + 'px'
-      }
+        }
 
-      if (position[1] === 'right') {
+        if (position[1] === 'right') {
-        this.tooltipStyle.left = e.clientX + offset + 'px'
+          this.tooltipStyle.left = e.clientX + offset + 'px'
-      } else {
+        } else {
-        this.tooltipStyle.left =
+          this.tooltipStyle.left =
-          e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
+            e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
-      }
+        }
 
-      this.tooltipStyle.visibility = 'visible'
+        this.tooltipStyle.visibility = 'visible'
+      }, 500)
     },
     hideTooltip() {
+      this.showTooltipTimeout && clearTimeout(this.showTooltipTimeout)
       this.tooltipStyle.visibility = 'hidden'
     }
   }

src/views/Inquiries.vue

@@ -115,18 +115,35 @@
                       {{ createdAtFormatted(inquiry.createdAt) }}
                     </div>
                     <div class="icons-container">
-                      <rename-icon
+                      <IconButton
                         v-if="!inquiry.isPredefined"
+                        icon="myicon myicon-rename"
+                        tooltip="Rename inquiry"
+                        data-test="rename-btn"
                         @click="showRenameDialog(inquiry.id)"
                       />
-                      <copy-icon @click="duplicateInquiry(index)" />
+
-                      <export-icon
+                      <IconButton
+                        icon="myicon myicon-copy"
+                        tooltip="Duplicate inquiry"
+                        data-test="copy-btn"
+                        @click="duplicateInquiry(index)"
+                      />
+
+                      <IconButton
+                        icon="myicon myicon-export"
                         tooltip="Export inquiry to file"
                         tooltipPosition="top-left"
+                        data-test="export-btn"
                         @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                       />
-                      <delete-icon
+
+                      <IconButton
                         v-if="!inquiry.isPredefined"
+                        icon="myicon myicon-delete"
+                        tooltip="Delete inquiry"
+                        tooltipPosition="top-left"
+                        data-test="delete-btn"
                         @click="showDeleteDialog(new Set().add(inquiry.id))"
                       />
                     </div>
@@ -143,7 +160,12 @@
     <modal modalId="rename" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Rename inquiry
-        <close-icon @click="$modal.hide('rename')" />
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="$modal.hide('rename')"
+        />
       </div>
       <div class="dialog-body">
         <text-field
@@ -163,7 +185,12 @@
     <modal modalId="delete" class="dialog" contentStyle="width: 480px;">
       <div class="dialog-header">
         Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
-        <close-icon @click="$modal.hide('delete')" />
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="$modal.hide('delete')"
+        />
       </div>
       <div class="dialog-body">
         {{ deleteDialogMsg }}
@@ -184,11 +211,7 @@
 </template>
 
 <script>
-import RenameIcon from '@/components/svg/rename'
+import IconButton from '@/components/Common/IconButton.vue'
-import CopyIcon from '@/components/svg/copy'
-import ExportIcon from '@/components/svg/export'
-import DeleteIcon from '@/components/svg/delete'
-import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/Common/TextField'
 import CheckBox from '@/components/Common/CheckBox'
 import LoadingIndicator from '@/components/Common/LoadingIndicator'
@@ -199,11 +222,7 @@ import eventBus from '@/lib/eventBus'
 export default {
   name: 'Inquiries',
   components: {
-    RenameIcon,
+    IconButton,
-    CopyIcon,
-    ExportIcon,
-    DeleteIcon,
-    CloseIcon,
     TextField,
     CheckBox,
     LoadingIndicator
@@ -609,6 +628,7 @@ table.sqliteviz-table {
 }
 .sqliteviz-table tbody tr:hover .icons-container {
   display: flex;
+  gap: 8px;
 }
 .dialog input {
   width: 100%;

tests/components/Common/TextField.spec.js

@@ -0,0 +1,99 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import TextField from '@/components/Common/TextField'
+
+describe('TextField.vue', () => {
+  it('renders the model value, placeholder, and configured width', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        modelValue: 'initial value',
+        placeholder: 'Enter a value',
+        width: '240px'
+      }
+    })
+    const input = wrapper.find('input')
+
+    expect(input.element.value).to.equal('initial value')
+    expect(input.attributes('placeholder')).to.equal('Enter a value')
+    expect(input.element.style.width).to.equal('240px')
+    expect(wrapper.find('.text-field-label').exists()).to.equal(false)
+    expect(wrapper.find('.clear-btn').exists()).to.equal(false)
+  })
+
+  it('emits update:modelValue when the input changes', async () => {
+    const wrapper = mount(TextField, {
+      props: { modelValue: 'before' }
+    })
+
+    await wrapper.find('input').setValue('after')
+
+    expect(wrapper.emitted('update:modelValue')).to.eql([['after']])
+  })
+
+  it('renders label and hint with the configured tooltip width', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        label: 'Name',
+        hint: 'A helpful hint',
+        maxHintWidth: '200px'
+      }
+    })
+
+    expect(wrapper.find('.text-field-label').text()).to.include('Name')
+    expect(wrapper.find('.icon-tooltip').text()).to.equal('A helpful hint')
+    expect(wrapper.find('.icon-tooltip').element.style.maxWidth).to.equal(
+      '200px'
+    )
+  })
+
+  it('shows the error message and applies error classes', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        label: 'Name',
+        errorMsg: 'A value is required'
+      }
+    })
+
+    expect(wrapper.find('.text-field-label').classes()).to.include('error')
+    expect(wrapper.find('input').classes()).to.include('error')
+    expect(wrapper.find('.text-field-error').isVisible()).to.equal(true)
+    expect(wrapper.find('.text-field-error').text()).to.equal(
+      'A value is required'
+    )
+  })
+
+  it('hides the error message when there is no error', () => {
+    const wrapper = mount(TextField)
+
+    expect(wrapper.find('.text-field-error').element.style.display).to.equal(
+      'none'
+    )
+  })
+
+  it('emits an empty value when the clear button is clicked', async () => {
+    const wrapper = mount(TextField, {
+      props: { modelValue: 'to clear', showClearButton: true }
+    })
+
+    await wrapper.find('.clear-btn').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).to.eql([['']])
+  })
+
+  it('disables the input and clear button', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        disabled: true,
+        label: 'Name',
+        showClearButton: true
+      }
+    })
+
+    expect(wrapper.find('input').element.disabled).to.equal(true)
+    expect(wrapper.find('.clear-btn').element.disabled).to.equal(true)
+    expect(wrapper.find('.text-field-container').classes()).to.include(
+      'disabled'
+    )
+    expect(wrapper.find('.text-field-label').classes()).to.include('disabled')
+  })
+})

tests/components/CsvImport/CsvJsonImport.spec.js

@@ -345,9 +345,9 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
+
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -424,9 +424,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveImport()
@@ -502,9 +501,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveImport()
@@ -573,9 +571,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      false
+      .to.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
   })
@@ -651,9 +648,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -726,9 +722,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      false
+      .to.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 
@@ -790,9 +785,8 @@ describe('CsvJsonImport.vue', () => {
     )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      false
+      .to.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
   })
 
@@ -1060,9 +1054,8 @@ describe('CsvJsonImport.vue - json', () => {
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -1114,9 +1107,8 @@ describe('CsvJsonImport.vue - json', () => {
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -1156,9 +1148,8 @@ describe('CsvJsonImport.vue - json', () => {
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      false
+      .to.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 })
@@ -1316,9 +1307,8 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -1395,9 +1385,8 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      true
+      .to.not.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -1461,9 +1450,8 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+    expect(wrapper.find('[data-test="import-close-btn"]').attributes().disabled)
-      false
+      .to.be.undefined
-    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 })

tests/components/CsvImport/DelimiterSelector.spec.js

@@ -29,7 +29,7 @@ describe('DelimiterSelector', async () => {
       props: { modelValue: ',' }
     })
 
-    await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
+    await wrapper.find('button.clear-btn').trigger('click')
 
     expect(wrapper.find('input').element.value).to.equal('')
     expect(wrapper.emitted().input).to.equal(undefined)
@@ -56,7 +56,7 @@ describe('DelimiterSelector', async () => {
       attachTo: document.body
     })
 
-    await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
+    await wrapper.find('button.open-list-btn').trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(true)
     await wrapper.find('.option').trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
@@ -101,11 +101,11 @@ describe('DelimiterSelector', async () => {
       attachTo: document.body
     })
 
-    await wrapper.findComponent({ name: 'clear-icon' }).trigger('click')
+    await wrapper.find('button.clear-btn').trigger('click')
 
     expect(wrapper.find('input').element.value).to.equal('|')
 
-    await wrapper.findComponent({ name: 'drop-down-chevron' }).trigger('click')
+    await wrapper.find('button.open-list-btn').trigger('click')
     expect(wrapper.find('.options').isVisible()).to.equal(false)
     wrapper.unmount()
   })

tests/components/Graph/Graph.spec.js

@@ -673,6 +673,151 @@ describe('Graph.vue', () => {
     wrapper.unmount()
   })
 
+  it('rerenders when search or navigate through found nodes', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        showViewSettings: true,
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1, "label": "Node Ab"}',
+            '{"object_type": 0, "node_id": 2, "label": "Node Ba"}',
+            '{"object_type": 0, "node_id": 3, "label": "Node Cc"}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            highlightMode: 'node_and_neighbors',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4',
+                opacity: 100
+              },
+              label: {
+                source: 'label',
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const container =
+      wrapper.find('.graph-container').wrapperElement.parentElement
+    container.style.height = '400px'
+
+    const nodeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsBefore = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    await wrapper.find('.query-input input').setValue('a')
+    clock.tick(500)
+    await nextTick()
+
+    const nodeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsAfter = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    expect(nodeCanvasPixelsBefore).not.equal(nodeCanvasPixelsAfter)
+    expect(edgeCanvasPixelsBefore).not.equal(edgeCanvasPixelsAfter)
+
+    await wrapper.find('[data-test="next-match-btn"]').trigger('click')
+    clock.tick(500)
+    await nextTick()
+
+    const nodeCanvasPixelsAfterFocusingFoundNode = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-nodes').wrapperElement
+    )
+    const edgeCanvasPixelsAfterAfterFocusingFoundNode = getPixels(
+      wrapper.find('.test_graph_output canvas.sigma-edges').wrapperElement
+    )
+
+    expect(nodeCanvasPixelsAfterFocusingFoundNode).not.equal(
+      nodeCanvasPixelsAfter
+    )
+    expect(edgeCanvasPixelsAfterAfterFocusingFoundNode).not.equal(
+      edgeCanvasPixelsAfter
+    )
+
+    await wrapper.setProps({
+      dataSources: {
+        doc: [
+          '{"object_type": 0, "node_id": 1, "label": "Node A"}',
+          '{"object_type": 0, "node_id": 2, "label": "Node B"}',
+          '{"object_type": 0, "node_id": 3, "label": "Node C"}',
+          '{"object_type": 1, "source": 1, "target": 2}',
+          '{"object_type": 1, "source": 1, "target": 3}'
+        ]
+      }
+    })
+
+    const searchPanel = wrapper.findComponent({ name: 'GraphSearchPanel' })
+    expect(searchPanel.find('.counter').text()).to.not.contain('1 of 2')
+    expect(searchPanel.find('[data-test="no-results-text"]').isVisible()).to.be
+      .false
+
+    await expect(
+      wrapper.find('[data-test="next-match-btn"]').attributes('disabled')
+    ).to.not.equal(undefined)
+    await expect(
+      wrapper.find('[data-test="previous-match-btn"]').attributes('disabled')
+    ).to.not.equal(undefined)
+
+    await wrapper
+      .find('.query-input input')
+      .trigger('keydown', { key: 'Enter' })
+    expect(searchPanel.find('.counter').text()).to.contain('1 node found')
+
+    clock.restore()
+    wrapper.unmount()
+  })
+
   it('saveAsPng', async () => {
     const wrapper = mount(Graph, {
       props: {

tests/components/Graph/GraphSearchPanel.spec.js

@@ -0,0 +1,236 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Graph from 'graphology'
+import GraphSearchPanel from '@/components/Graph/GraphSearchPanel.vue'
+import sinon from 'sinon'
+import { nextTick } from 'vue'
+
+describe('GraphSearchPanel.vue', () => {
+  const buildGraph = () => {
+    const graph = new Graph()
+    graph.addNode('node-1', { label: 'Alpha' })
+    graph.addNode('node-2', { label: 'Beta' })
+    graph.addNode('node-3', { label: 'Gamma' })
+    graph.addNode('node-4', { label: 'Foo' })
+    return graph
+  }
+
+  it('matches labels and emits node ids for navigation', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(GraphSearchPanel, {
+      props: {
+        graph: buildGraph(),
+        nodesMatchingSearchQuery: null,
+        focusedFoundNodeId: null,
+        'onUpdate:nodesMatchingSearchQuery': nodes => {
+          wrapper.setProps({ nodesMatchingSearchQuery: nodes })
+        },
+        'onUpdate:focusedFoundNodeId': nodeId => {
+          wrapper.setProps({ focusedFoundNodeId: nodeId })
+        }
+      }
+    })
+
+    await wrapper.find('.query-input input').setValue('a')
+    clock.tick(500)
+
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[0][0]).to.eql([
+      'node-1',
+      'node-2',
+      'node-3'
+    ])
+    expect(wrapper.emitted('update:focusedFoundNodeId')[0][0]).to.equal(null)
+    await nextTick()
+    expect(wrapper.text()).to.contain('3 nodes found')
+
+    await wrapper.find('[data-test="next-match-btn"]').trigger('click')
+    expect(wrapper.emitted('update:focusedFoundNodeId')[1][0]).to.equal(
+      'node-1'
+    )
+    await nextTick()
+    expect(wrapper.text()).to.contain('1 of 3')
+
+    await wrapper.find('[data-test="next-match-btn"]').trigger('click')
+    expect(wrapper.emitted('update:focusedFoundNodeId')[2][0]).to.equal(
+      'node-2'
+    )
+    await nextTick()
+    expect(wrapper.text()).to.contain('2 of 3')
+
+    await wrapper.find('[data-test="previous-match-btn"]').trigger('click')
+    expect(wrapper.emitted('update:focusedFoundNodeId')[3][0]).to.equal(
+      'node-1'
+    )
+
+    await nextTick()
+    expect(wrapper.text()).to.contain('1 of 3')
+
+    await wrapper.find('[data-test="previous-match-btn"]').trigger('click')
+    expect(wrapper.emitted('update:focusedFoundNodeId')[4][0]).to.equal(
+      'node-3'
+    )
+
+    await nextTick()
+    expect(wrapper.text()).to.contain('3 of 3')
+
+    await wrapper.find('[data-test="next-match-btn"]').trigger('click')
+    expect(wrapper.emitted('update:focusedFoundNodeId')[5][0]).to.equal(
+      'node-1'
+    )
+    await nextTick()
+    expect(wrapper.text()).to.contain('1 of 3')
+
+    await wrapper.find('.query-input input').setValue('Foo')
+    clock.tick(500)
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[1][0]).to.eql([
+      'node-4'
+    ])
+    expect(wrapper.emitted('update:focusedFoundNodeId')[6][0]).to.equal(null)
+
+    await wrapper.find('.query-input input').setValue('')
+    clock.tick(500)
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[2][0]).to.eql(
+      null
+    )
+    expect(wrapper.emitted('update:focusedFoundNodeId')[7][0]).to.equal(null)
+    clock.restore()
+  })
+
+  it('matches case and uses reg exp', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(GraphSearchPanel, {
+      props: {
+        graph: buildGraph(),
+        nodesMatchingSearchQuery: null,
+        focusedFoundNodeId: null,
+        'onUpdate:nodesMatchingSearchQuery': nodes => {
+          wrapper.setProps({ nodesMatchingSearchQuery: nodes })
+        },
+        'onUpdate:focusedFoundNodeId': nodeId => {
+          wrapper.setProps({ focusedFoundNodeId: nodeId })
+        }
+      }
+    })
+
+    await wrapper.find('.query-input input').setValue('A')
+    clock.tick(500)
+
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[0][0]).to.eql([
+      'node-1',
+      'node-2',
+      'node-3'
+    ])
+
+    const matchCaseBtn = wrapper.find('[data-test="match-case-btn"]')
+    const useRegExpBtn = wrapper.find('[data-test="use-reg-exp-btn"]')
+
+    await matchCaseBtn.trigger('click')
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[1][0]).to.eql([
+      'node-1'
+    ])
+
+    await wrapper.find('.query-input input').setValue('a.+a$')
+    clock.tick(500)
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[2][0]).to.eql([])
+
+    await useRegExpBtn.trigger('click')
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[3][0]).to.eql([
+      'node-3'
+    ])
+
+    await matchCaseBtn.trigger('click')
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[4][0]).to.eql([
+      'node-1',
+      'node-3'
+    ])
+
+    clock.restore()
+  })
+
+  it('shows No items found and disables navigation arrows', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(GraphSearchPanel, {
+      props: {
+        graph: buildGraph(),
+        nodesMatchingSearchQuery: null,
+        focusedFoundNodeId: null,
+        'onUpdate:nodesMatchingSearchQuery': nodes => {
+          wrapper.setProps({ nodesMatchingSearchQuery: nodes })
+        },
+        'onUpdate:focusedFoundNodeId': nodeId => {
+          wrapper.setProps({ focusedFoundNodeId: nodeId })
+        }
+      }
+    })
+
+    await wrapper.find('.query-input input').setValue('baz')
+    clock.tick(500)
+
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[0][0]).to.eql([])
+    expect(wrapper.emitted('update:focusedFoundNodeId')[0][0]).to.equal(null)
+    await nextTick()
+    expect(wrapper.find('[data-test="no-results-text"]').isVisible()).to.be.true
+
+    await expect(
+      wrapper.find('[data-test="next-match-btn"]').attributes('disabled')
+    ).to.not.equal(undefined)
+    await expect(
+      wrapper.find('[data-test="previous-match-btn"]').attributes('disabled')
+    ).to.not.equal(undefined)
+    clock.restore()
+  })
+
+  it('handles invalid regular expressions by clearing matches', async () => {
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(GraphSearchPanel, {
+      props: {
+        graph: buildGraph(),
+        nodesMatchingSearchQuery: ['node-1'],
+        focusedFoundNodeId: 'node-1'
+      }
+    })
+
+    await wrapper.find('.query-input input').setValue('[')
+    clock.tick(500)
+
+    expect(wrapper.emitted('update:nodesMatchingSearchQuery')[0][0]).to.eql([])
+    const useRegExpBtn = wrapper.find('[data-test="use-reg-exp-btn"]')
+
+    await useRegExpBtn.trigger('click')
+
+    expect(
+      wrapper.emitted('update:nodesMatchingSearchQuery').at(-1)[0]
+    ).to.equal(null)
+    expect(wrapper.emitted('update:focusedFoundNodeId').at(-1)[0]).to.equal(
+      null
+    )
+    expect(wrapper.text()).to.contain('Invalid regular expression')
+
+    clock.restore()
+  })
+
+  it('toggles the search panel visibility', async () => {
+    const wrapper = mount(GraphSearchPanel, {
+      props: {
+        graph: buildGraph(),
+        nodesMatchingSearchQuery: null,
+        focusedFoundNodeId: null
+      },
+      attachTo: document.body
+    })
+
+    const searchControls = wrapper.find('.graph-search-panel--search-controls')
+    expect(searchControls.isVisible()).to.be.false
+
+    const toggleButton = wrapper.find(
+      '[data-test="toggle-search-panel-visibility-btn"]'
+    )
+    await toggleButton.trigger('click')
+    expect(searchControls.isVisible()).to.be.true
+
+    await toggleButton.trigger('click')
+    expect(wrapper.vm.panelOpen).to.be.false
+
+    wrapper.unmount()
+  })
+})

tests/components/Schema/Schema.spec.js

@@ -144,10 +144,7 @@ describe('Schema.vue', () => {
       }
     })
 
-    await wrapper
+    await wrapper.find('[data-test="export-db-btn"]').trigger('click')
-      .findComponent({ name: 'export-icon' })
-      .find('svg')
-      .trigger('click')
     expect(state.db.export.calledOnceWith('fooDB'))
     wrapper.unmount()
   })
@@ -190,10 +187,7 @@ describe('Schema.vue', () => {
     sinon.spy(wrapper.vm, 'addCsvJson')
     sinon.spy(wrapper.vm.$refs.addCsvJson, 'loadToDb')
 
-    await wrapper
+    await wrapper.find('[data-test="add-csv-json-btn"]').trigger('click')
-      .findComponent({ name: 'add-table-icon' })
-      .find('svg')
-      .trigger('click')
     await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
     await wrapper.vm.addCsvJson.returnValues[0]
     await nextTick()

tests/lib/graphHelper.spec.js

@@ -1246,7 +1246,9 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: new Set(['node-1.1']),
       neighborsOfHoveredNode: new Set(['node-2.1']),
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: ['node-4', 'node-1', 'node-2', 'node-5'],
+      focusedFoundNodeId: 'node-5'
     }
 
     expect(
@@ -1270,6 +1272,17 @@ describe('graphHelper.js', () => {
       forceLabel: true
     })
 
+    expect(
+      graphHelper.reduceNodes('node-5', nodeData, interactionState, settings)
+    ).to.eql({
+      color: '#FF0000CC',
+      label: 'Node label',
+      labelColor: 'black',
+      zIndex: 2,
+      highlighted: true,
+      forceLabel: true
+    })
+
     expect(
       graphHelper.reduceNodes('node-1.1', nodeData, interactionState, settings)
     ).to.eql({
@@ -1292,6 +1305,16 @@ describe('graphHelper.js', () => {
       forceLabel: true
     })
 
+    expect(
+      graphHelper.reduceNodes('node-4', nodeData, interactionState, settings)
+    ).to.eql({
+      color: '#FF0000CC',
+      label: 'Node label',
+      labelColor: 'blue',
+      zIndex: 2,
+      highlighted: false
+    })
+
     expect(
       graphHelper.reduceNodes('node-3', nodeData, interactionState, settings)
     ).to.eql({
@@ -1310,7 +1333,9 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: new Set(['node-1.1']),
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: ['node-2', 'node-2.1']
+      hoveredEdgeExtremities: ['node-2', 'node-2.1'],
+      nodesMatchingSearchQuery: ['node-4', 'node-2'],
+      focusedFoundNodeId: null
     }
 
     expect(
@@ -1367,6 +1392,16 @@ describe('graphHelper.js', () => {
       highlighted: false
     })
 
+    expect(
+      graphHelper.reduceNodes('node-4', nodeData, interactionState, settings)
+    ).to.eql({
+      color: '#FF0000CC',
+      label: 'Node label',
+      labelColor: 'blue',
+      zIndex: 2,
+      highlighted: false
+    })
+
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1375,7 +1410,9 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: ['node-1', 'node-1.1'],
-      hoveredEdgeExtremities: ['node-2', 'node-2.1']
+      hoveredEdgeExtremities: ['node-2', 'node-2.1'],
+      nodesMatchingSearchQuery: [],
+      focusedFoundNodeId: null
     }
 
     expect(
@@ -1437,7 +1474,9 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: new Set(['node-2.1']),
       selectedEdgeExtremities: ['node-1', 'node-1.1'],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: ['node-4'],
+      focusedFoundNodeId: null
     }
 
     expect(
@@ -1491,6 +1530,16 @@ describe('graphHelper.js', () => {
       highlighted: false
     })
 
+    expect(
+      graphHelper.reduceNodes('node-4', nodeData, interactionState, settings)
+    ).to.eql({
+      color: '#FF0000CC',
+      label: 'Node label',
+      labelColor: 'blue',
+      zIndex: 2,
+      highlighted: false
+    })
+
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1499,40 +1548,13 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: null,
+      focusedFoundNodeId: null
     }
 
     expect(
-      graphHelper.reduceNodes('node-1', nodeData, interactionState, settings)
+      graphHelper.reduceNodes('node', nodeData, interactionState, settings)
-    ).to.eql({
-      color: '#FF0000CC',
-      label: 'Node label',
-      labelColor: 'blue'
-    })
-    expect(
-      graphHelper.reduceNodes('node-2', nodeData, interactionState, settings)
-    ).to.eql({
-      color: '#FF0000CC',
-      label: 'Node label',
-      labelColor: 'blue'
-    })
-    expect(
-      graphHelper.reduceNodes('node-1.1', nodeData, interactionState, settings)
-    ).to.eql({
-      color: '#FF0000CC',
-      label: 'Node label',
-      labelColor: 'blue'
-    })
-    expect(
-      graphHelper.reduceNodes('node-2.1', nodeData, interactionState, settings)
-    ).to.eql({
-      color: '#FF0000CC',
-      label: 'Node label',
-      labelColor: 'blue'
-    })
-
-    expect(
-      graphHelper.reduceNodes('node-3', nodeData, interactionState, settings)
     ).to.eql({
       color: '#FF0000CC',
       label: 'Node label',
@@ -1548,7 +1570,11 @@ describe('graphHelper.js', () => {
       }
     }
 
-    const edgeData = { color: '#FF0000CC', label: 'Edge label', size: 3 }
+    const edgeData = {
+      color: '#FF0000CC',
+      label: 'Edge label',
+      size: 3
+    }
     const graph = new Graph()
     graph.addNode('node-1.1')
     graph.addNode('node-1.2')
@@ -1568,7 +1594,18 @@ describe('graphHelper.js', () => {
       size: 6,
       forceLabel: true
     }
+    const visibleEdgeStyle = {
+      color: '#FF0000CC',
+      label: 'Edge label',
+      zIndex: 2,
+      size: 3
+    }
 
+    // No hovered or selected nodes,
+    // but hovered and selected edges
+    // Query matches some nodes connected by edge
+    // Expected: hovered and selected edges are highlighted,
+    // edge connected modes matching query is visible
     let interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1577,7 +1614,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: ['node-2.1', 'node-2.2'],
-      hoveredEdgeExtremities: ['node-1.1', 'node-1.2']
+      hoveredEdgeExtremities: ['node-1.1', 'node-1.2'],
+      nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -1605,8 +1643,7 @@ describe('graphHelper.js', () => {
         settings,
         graph
       )
-    ).to.eql(hiddenEdgeStyle)
+    ).to.eql(visibleEdgeStyle)
-
     expect(
       graphHelper.reduceEdges(
         edge1213,
@@ -1617,6 +1654,11 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No hovered nodes,
+    // One node selected
+    // No hovered or selected edges
+    // Query matches some nodes but no edges connecting 2 nodes matching the query
+    // Expected: all edges are hidden
     interactionState = {
       selectedNodeId: 'node-1.1',
       hoveredNodeId: null,
@@ -1625,7 +1667,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']),
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: ['node-2.1', 'node-1.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -1665,6 +1708,11 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No selected nodes,
+    // One node hovered
+    // No hovered or selected edges
+    // Query does not match any nodes
+    // Expected: all edges are hidden
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: 'node-1.1',
@@ -1673,7 +1721,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']),
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: []
     }
     expect(
       graphHelper.reduceEdges(
@@ -1713,6 +1762,10 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No hovered or selected nodes,
+    // No hovered or selected edges
+    // No query applied
+    // Expected: all edges are visible
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1721,7 +1774,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: null
     }
 
     expect(
@@ -1772,7 +1826,11 @@ describe('graphHelper.js', () => {
       }
     }
 
-    const edgeData = { color: '#FF0000CC', label: 'Edge label', size: 3 }
+    const edgeData = {
+      color: '#FF0000CC',
+      label: 'Edge label',
+      size: 3
+    }
     const graph = new Graph()
     graph.addNode('node-1.1')
     graph.addNode('node-1.2')
@@ -1799,6 +1857,11 @@ describe('graphHelper.js', () => {
       size: 3
     }
 
+    // No hovered or selected nodes,
+    // but hovered and selected edges
+    // Query matches some nodes connected by edge
+    // Expected: hovered and selected edges are highlighted,
+    // edge connected modes matching query is visible
     let interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1807,7 +1870,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: ['node-2.1', 'node-2.2'],
-      hoveredEdgeExtremities: ['node-1.1', 'node-1.2']
+      hoveredEdgeExtremities: ['node-1.1', 'node-1.2'],
+      nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -1835,7 +1899,7 @@ describe('graphHelper.js', () => {
         settings,
         graph
       )
-    ).to.eql(hiddenEdgeStyle)
+    ).to.eql(visibleEdgeStyle)
 
     expect(
       graphHelper.reduceEdges(
@@ -1847,6 +1911,12 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No hovered nodes,
+    // One node selected
+    // No hovered or selected edges
+    // Query matches some nodes but no edges connecting 2 nodes matching the query
+    // Expected: edges connecting selected node with its neighbors are visible,
+    // all other edges are hidden
     interactionState = {
       selectedNodeId: 'node-1.1',
       hoveredNodeId: null,
@@ -1855,7 +1925,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']),
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: ['node-2.1', 'node-1.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -1895,6 +1966,12 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No selected nodes,
+    // One node hovered
+    // No hovered or selected edges
+    // Query does not match any nodes
+    // Expected: edges connecting hovered node with its neighbors are visible,
+    // all other edges are hidden
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: 'node-1.1',
@@ -1903,7 +1980,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']),
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: []
     }
     expect(
       graphHelper.reduceEdges(
@@ -1943,6 +2021,10 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No selected or hovered nodes,
+    // No hovered or selected edges
+    // Query is not applied
+    // Expected: all edges are visible
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -1951,7 +2033,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: null
     }
 
     expect(
@@ -2029,6 +2112,11 @@ describe('graphHelper.js', () => {
       size: 3
     }
 
+    // No hovered or selected nodes,
+    // but hovered and selected edges
+    // Query matches some nodes connected by edge
+    // Expected: hovered and selected edges are highlighted,
+    // edge connected modes matching query is visible
     let interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -2037,7 +2125,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: ['node-2.1', 'node-2.2'],
-      hoveredEdgeExtremities: ['node-1.1', 'node-1.2']
+      hoveredEdgeExtremities: ['node-1.1', 'node-1.2'],
+      nodesMatchingSearchQuery: ['node-1.1', 'node-1.3', 'node-2.1', 'node-2.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -2065,7 +2154,7 @@ describe('graphHelper.js', () => {
         settings,
         graph
       )
-    ).to.eql(hiddenEdgeStyle)
+    ).to.eql(visibleEdgeStyle)
 
     expect(
       graphHelper.reduceEdges(
@@ -2077,6 +2166,12 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(hiddenEdgeStyle)
 
+    // No hovered nodes,
+    // One node selected
+    // No hovered or selected edges
+    // Query matches some nodes but no edges connecting 2 nodes matching the query
+    // Expected: edges connecting selected node with its neighbors
+    // and between neighbours are visible, all other edges are hidden
     interactionState = {
       selectedNodeId: 'node-1.1',
       hoveredNodeId: null,
@@ -2085,7 +2180,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: new Set(['node-1.2', 'node-1.3']),
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: ['node-2.1', 'node-1.2']
     }
     expect(
       graphHelper.reduceEdges(
@@ -2125,6 +2221,12 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(visibleEdgeStyle)
 
+    // No selected nodes,
+    // One node hovered
+    // No hovered or selected edges
+    // Query does not match any nodes
+    // Expected: edges connecting hovered node with its neighbors
+    // and between beighbours are visible, all other edges are hidden
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: 'node-1.1',
@@ -2133,7 +2235,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: new Set(['node-1.2', 'node-1.3']),
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: []
     }
     expect(
       graphHelper.reduceEdges(
@@ -2173,6 +2276,10 @@ describe('graphHelper.js', () => {
       )
     ).to.eql(visibleEdgeStyle)
 
+    // No selected or hovered nodes,
+    // No hovered or selected edges
+    // Query is not applied
+    // Expected: all edges are visible
     interactionState = {
       selectedNodeId: null,
       hoveredNodeId: null,
@@ -2181,7 +2288,8 @@ describe('graphHelper.js', () => {
       neighborsOfSelectedNode: undefined,
       neighborsOfHoveredNode: undefined,
       selectedEdgeExtremities: [],
-      hoveredEdgeExtremities: []
+      hoveredEdgeExtremities: [],
+      nodesMatchingSearchQuery: null
     }
 
     expect(

tests/tooltipMixin.spec.js

@@ -1,6 +1,7 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
 import tooltipMixin from '@/tooltipMixin'
+import sinon from 'sinon'
 
 describe('tooltipMixin.js', () => {
   let container
@@ -23,6 +24,7 @@ describe('tooltipMixin.js', () => {
   })
 
   it('tooltipStyle is correct when showTooltip: top-right', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -38,15 +40,18 @@ describe('tooltipMixin.js', () => {
         clientY: 20
       })
     )
+    await clock.tick(500)
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '8px',
       left: '22px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: top-left', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -61,6 +66,7 @@ describe('tooltipMixin.js', () => {
       }),
       'top-left'
     )
+    await clock.tick(500)
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -69,9 +75,11 @@ describe('tooltipMixin.js', () => {
     })
 
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: bottom-right', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -86,15 +94,18 @@ describe('tooltipMixin.js', () => {
       }),
       'bottom-right'
     )
+    await clock.tick(500)
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '32px',
       left: '22px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: bottom-left', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -109,6 +120,7 @@ describe('tooltipMixin.js', () => {
       }),
       'bottom-left'
     )
+    await clock.tick(500)
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -116,9 +128,11 @@ describe('tooltipMixin.js', () => {
       left: '100px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltip is not visible after hideTooltip', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template: '<div :style="tooltipStyle"></div>',
       mixins: [tooltipMixin]
@@ -131,6 +145,8 @@ describe('tooltipMixin.js', () => {
       })
     )
     await wrapper.vm.hideTooltip()
+    await clock.tick(500)
     expect(wrapper.find('div').isVisible()).to.equal(false)
+    clock.restore()
   })
 })

tests/views/Inquiries.spec.js

@@ -265,10 +265,7 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    await wrapper
+    await wrapper.find('[data-test="export-btn"]').trigger('click')
-      .findComponent({ name: 'ExportIcon' })
-      .find('svg')
-      .trigger('click')
     expect(
       fu.exportToFile.calledOnceWith('I am a serialized inquiry', 'foo.json')
     ).to.equals(true)
@@ -304,10 +301,7 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    await wrapper
+    await wrapper.find('[data-test="copy-btn"]').trigger('click')
-      .findComponent({ name: 'CopyIcon' })
-      .find('svg')
-      .trigger('click')
 
     expect(
       storedInquiries.duplicateInquiry.calledOnceWith(inquiryInStorage)
@@ -353,10 +347,7 @@ describe('Inquiries.vue', () => {
       .findComponent({ ref: 'mainCheckBox' })
       .find('.checkbox-container')
       .trigger('click')
-    await wrapper
+    await wrapper.find('[data-test="copy-btn"]').trigger('click')
-      .findComponent({ name: 'CopyIcon' })
-      .find('svg')
-      .trigger('click')
 
     const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
     expect(checkboxes[0].vm.checked).to.equals(true)
@@ -460,10 +451,7 @@ describe('Inquiries.vue', () => {
     await nextTick()
 
     // click Rename icon in the grid
-    await wrapper
+    await wrapper.find('[data-test="rename-btn"]').trigger('click')
-      .findComponent({ name: 'RenameIcon' })
-      .find('svg')
-      .trigger('click')
 
     // check that rename dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
@@ -538,10 +526,7 @@ describe('Inquiries.vue', () => {
     await nextTick()
 
     // click Rename icon in the grid
-    await wrapper
+    await wrapper.findComponent('[data-test="rename-btn"]').trigger('click')
-      .findComponent({ name: 'RenameIcon' })
-      .find('svg')
-      .trigger('click')
 
     // change the name
     await wrapper.find('.dialog-body input').setValue('')
@@ -714,10 +699,7 @@ describe('Inquiries.vue', () => {
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
     // click Delete icon in the first row of the grid
-    await wrapper
+    await wrapper.findComponent('[data-test="delete-btn"]').trigger('click')
-      .findComponent({ name: 'DeleteIcon' })
-      .find('svg')
-      .trigger('click')
 
     // check that delete dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)