fix package names

.github/workflows/test.yml

@@ -23,7 +23,13 @@ jobs:
           export DEBIAN_FRONTEND=noninteractive
           sudo add-apt-repository -y ppa:mozillateam/ppa
           sudo apt-get update
-          sudo apt-get install -y chromium-browser firefox-esr
+          sudo apt-get install -y \
+            chromium-browser \
+            firefox-esr \
+            libgl1 \
+            libgl1-mesa-dri \
+            libegl1 \
+            mesa-utils
 
       - name: Update npm
         run: npm install -g npm@10

karma.conf.cjs

@@ -90,7 +90,12 @@ module.exports = function (config) {
         base: 'FirefoxHeadless',
         prefs: {
           'dom.w3c_touch_events.enabled': 1,
-          'dom.events.asyncClipboard.clipboardItem': true
+          'dom.events.asyncClipboard.clipboardItem': true,
+          'webgl.disabled': false,
+          'webgl.force-enabled': true,
+          'webgl.force-layers-readback': true,
+          'layers.acceleration.disabled': true,
+          'gfx.webrender.all': false
         }
       }
     },

package.json

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

src/components/Graph/CirclePackLayoutSettings.vue

@@ -40,7 +40,6 @@
 import { applyPureReactInVue } from 'veaury'
 import Field from 'react-chart-editor/lib/components/fields/Field'
 import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
-import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
 import Multiselect from 'vue-multiselect'
 import 'react-chart-editor/lib/react-chart-editor.css'
 
@@ -48,7 +47,6 @@ export default {
   components: {
     Field: applyPureReactInVue(Field),
     NumericInput: applyPureReactInVue(NumericInput),
-    Dropdown: applyPureReactInVue(Dropdown),
     Multiselect
   },
   props: {

src/components/Graph/GraphEditor.vue

@@ -11,7 +11,7 @@
                 documentation</a
               >.
             </Field>
-            <Field label="Object type" ref="objectTypeField">
+            <Field ref="objectTypeField" label="Object type">
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.objectType"
@@ -172,15 +172,15 @@
             <div class="force-atlas-buttons">
               <Button
                 variant="secondary"
-                @click="resetFA2LayoutSettings"
                 class="test_fa2_reset"
+                @click="resetFA2LayoutSettings"
               >
                 Reset
               </Button>
               <Button
                 variant="primary"
-                @click="toggleFA2Layout"
                 class="test_fa2_toggle"
+                @click="toggleFA2Layout"
               >
                 <template #node:icon>
                   <div
@@ -225,6 +225,7 @@ import Button from 'react-chart-editor/lib/components/widgets/Button'
 import Field from 'react-chart-editor/lib/components/fields/Field'
 import RandomLayoutSettings from '@/components/Graph/RandomLayoutSettings.vue'
 import ForceAtlasLayoutSettings from '@/components/Graph/ForceAtlasLayoutSettings.vue'
+// eslint-disable-next-line max-len
 import AdvancedForceAtlasLayoutSettings from '@/components/Graph/AdvancedForceAtlasLayoutSettings.vue'
 import CirclePackLayoutSettings from '@/components/Graph/CirclePackLayoutSettings.vue'
 import FA2Layout from 'graphology-layout-forceatlas2/worker'

src/components/svg/graph.vue

@@ -7,27 +7,33 @@
     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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      d="M14.1316 6.51712L3.13166 3.51723L2.86844 4.48202L13.8684 
+      7.48191L14.1316 6.51712Z"
       fill="#A2B1C6"
     />
   </svg>

src/components/svg/stop.vue

@@ -7,7 +7,8 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3 4C3 3.44772 3.44772 3 4 3H14C14.5523 3 15 3.44772 15 4V14C15 14.5523 14.5523 15 14 15H4C3.44772 15 3 14.5523 3 14V4Z"
+      d="M3 4C3 3.44772 3.44772 3 4 3H14C14.5523 3 15 3.44772 15 4V14C15 
+      14.5523 14.5523 15 14 15H4C3.44772 15 3 14.5523 3 14V4Z"
       fill="#A2B1C6"
     />
   </svg>

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

@@ -60,6 +60,21 @@ export default {
       resizeObserver: null
     }
   },
+  computed: {
+    dataSourceIsValid() {
+      return !this.dataSources || dataSourceIsValid(this.dataSources)
+    }
+  },
+  watch: {
+    async showViewSettings() {
+      await this.$nextTick()
+      this.handleResize()
+    },
+    dataSources() {
+      this.$emit('update:exportToPngEnabled', !!this.dataSources)
+      this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
+    }
+  },
   created() {
     this.$emit('update:exportToSvgEnabled', false)
     this.$emit('update:exportToHtmlEnabled', false)
@@ -73,21 +88,6 @@ export default {
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.graphContainer)
   },
-  watch: {
-    async showViewSettings() {
-      await this.$nextTick()
-      this.handleResize()
-    },
-    dataSources() {
-      this.$emit('update:exportToPngEnabled', !!this.dataSources)
-      this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
-    }
-  },
-  computed: {
-    dataSourceIsValid() {
-      return !this.dataSources || dataSourceIsValid(this.dataSources)
-    }
-  },
   methods: {
     getOptionsForSave() {
       return this.$refs.graphEditor.settings