NeoVis.js not displaying all relationships when connecting to AuraDB Neo4j instance

Question

I am using NeoVis.js to visualize Neo4j graph databases. The visualization works fine when connecting to a local Neo4j instance, but I encounter issues when trying to connect to a Neo4j AuraDB instance. Specifically, not all arrows/relationships are displayed in the visualization.

This is how I connect to the database using NeoVis.

const isAuraServer = import.meta.env.VITE_SERVER_URL === 'auradb'

onMounted(async () => {
  let neoViz = null

  const config = {
    containerId: `viz${props.index}`,

    neo4j: {
      serverUrl: import.meta.env.VITE_SERVER_URL,
      serverUser: import.meta.env.VITE_SERVER_USER,
      serverPassword: import.meta.env.VITE_SERVER_PASSWORD,
      driverConfig: {
        encrypted: isAuraServer ? 'ENCRYPTION_ON' : 'ENCRYPTION_OFF',
        trust: 'TRUST_SYSTEM_CA_SIGNED_CERTIFICATES'
      }
    },

Local Neo4j:

Remote Neo4j Aura:

Here is the whole code

<script setup lang="ts">
import NeoVis from 'neovis.js/dist/neovis.js'
import { onMounted } from 'vue'

interface SelectedAnnotationInformation {
  createdAt: string
  shortcut: string
  firebaseUserUID: string
  name: string
  description: string
  id: string
}

const props = defineProps({
  index: Number,
  selectedAnnotation: {
    type: Array as () => SelectedAnnotationInformation[],
    default: () => []
  }
})

const isAuraServer = import.meta.env.VITE_SERVER_URL === 'auradb'

onMounted(async () => {
  let neoViz = null

  const config = {
    containerId: `viz${props.index}`,

    neo4j: {
      serverUrl: import.meta.env.VITE_SERVER_URL,
      serverUser: import.meta.env.VITE_SERVER_USER,
      serverPassword: import.meta.env.VITE_SERVER_PASSWORD,
      driverConfig: {
        encrypted: isAuraServer ? 'ENCRYPTION_ON' : 'ENCRYPTION_OFF',
        trust: 'TRUST_SYSTEM_CA_SIGNED_CERTIFICATES'
      }
    },

    visConfig: {
      nodes: {
        shape: 'circle',
        size: 100,
        font: {
          color: 'black',
          size: 10
        },
        color: {
          border: '#2B7CE9',
          background: '#97C2FC',
          highlight: {
            border: '#red',
            background: '#D2E5FF'
          },
          hover: {
            border: '#2B7CE9',
            background: '#D2E5FF'
          }
        }
      },
      edges: {
        color: {
          color: '#00ffff',
          highlight: '#ff0000'
        },
        selectionWidth: 2,
        length: 200,
        width: 1,
        arrows: {
          to: { enabled: true }
        }
      },
      physics: {
        hierarchicalRepulsion: { avoidOverlap: 1 },
        solver: 'repulsion',
        repulsion: {
          nodeDistance: 100
        }
      }
    },

    layout: {
      improvedLayout: true,
      randomSeed: 420,
      hierarchical: {
        enabled: true,
        direction: 'DU',
        sortMethod: 'directed',
        nodeSpacing: 1000,
        treeSpacing: 20,
        levelSeparation: 250
      }
    },

    labels: {
      Annotation: {
        label: 'name',
        value: 'id',

        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
          function: {
            title: (props: any) =>
              NeoVis.objectToTitleHtml(props, [
                'id',
                'name',
                'shortcut',
                'description',
                'createdAt',
                'firebaseUserUID'
              ]),
            color: (node: any) => {
              const selectedAnnotationIds = props.selectedAnnotation.map(
                (annotation: any) => annotation.id
              )
              if (selectedAnnotationIds.includes(node.properties.id)) {
                return '#e74c3c'
              } else {
                return '#3498db'
              }
            }
          }
        }
      }
    },

    relationships: {
      RELATED_TO: {
        value: 'weight',

        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
          static: {
            label: 'RELATED_TO',
            color: 'green',
            font: {
              background: 'none',
              strokeWidth: '0',
              size: 10,
              color: 'Black'
            }
          }
        }
      }
    },

    hierarchical_layout: true,
    hierarchical_sort_method: 'directed',

    initialCypher: `MATCH (start:Annotation {id: '${props.selectedAnnotation[0].id}'})
                    OPTIONAL MATCH (a:Annotation)-[r:RELATED_TO*]-(start)
                    RETURN a AS node, r AS relationship, start AS otherNode
                    UNION
                    MATCH (start:Annotation {id: '${props.selectedAnnotation[0].id}'})
                    OPTIONAL MATCH (start)-[r:RELATED_TO*]-(b:Annotation)
                    RETURN start AS node, r AS relationship, b AS otherNode`
  }

  neoViz = new NeoVis(config as any)
  neoViz.render()
})
</script>

<template>
  <div
    class="mx-auto h-full w-full flex justify-center border border-gray-300"
    :id="`viz${props.index}`"
  ></div>
</template>

<style scoped></style>

I've tried everything, but I have no idea where the problem might be. I'm encountering a warning in the console, and I'm unsure how to fix it. I'm not certain if this is the root cause of the issue. The warning is as follows:

VisualizeAnnotationsComponent.vue:139 Neo4j driver is configured to use a secure WebSocket on an HTTP web page. WebSockets might not work in a mixed content environment. Please consider configuring the driver to not use encryption.

Any insights or suggestions on how to address this warning would be greatly appreciated.

When I switched to paid Aura proffesional it fixed the problem any idea why ?