Give more control for QueryResultList to the place it is used in.

Adjust ClassList, GraphList, InstanceList accordingly and add the
respective functionality to App.vue

src/App.vue

@@ -20,10 +20,10 @@ import 'splitpanes/dist/splitpanes.css'
         <pane size="30">
           <splitpanes horizontal style="height: 80vh">
             <pane size="30">
-              <GraphList/>
+              <GraphList :graph_iri="graph_iri" :selectGraph="(iri) => {useSelectionStore().changeGraphIri(iri); useSelectionStore().changeResourceIri(iri)}" />
             </pane>
             <pane size="70">
-              <ClassList/>
+              <ClassList :class_iri="resource_iri" :selectClass="(iri) => {useSelectionStore().changeResourceIri(iri)}" />
             </pane>
           </splitpanes>
         </pane>
@@ -51,6 +51,7 @@ import 'splitpanes/dist/splitpanes.css'
 <script>
 import { mapState } from 'pinia'
 import { useRdfStore } from './stores/rdf'
+import { useSelectionStore } from './stores/selection'
 
 export default {
   name: 'App',
@@ -60,6 +61,7 @@ export default {
   },
   computed: {
     ...mapState(useRdfStore, {store_ready: store => store.ready}),
+    ...mapState(useSelectionStore, ['graph_iri', 'resource_iri'])
   }
 }
 

src/components/ClassList.vue

@@ -1,19 +1,20 @@
 <script setup>
 import QueryResultList from './QueryResultList.vue'
-import { mapState } from 'pinia'
 import { useSelectionStore } from '../stores/selection'
 </script>
 
 <template>
-  <QueryResultList title="Class List" search query="select distinct ?class { {?s a ?class} union {?class a <http://www.w3.org/2000/01/rdf-schema#Class>} union {?class a <http://www.w3.org/2002/07/owl#Class>} } order by ?class" select-variable="class" ref="classList" :activeResource="resource_iri" />
+  <QueryResultList title="Class List" search query="select distinct ?class { {?s a ?class} union {?class a <http://www.w3.org/2000/01/rdf-schema#Class>} union {?class a <http://www.w3.org/2002/07/owl#Class>} } order by ?class" select-variable="class" ref="classList" :activeResource="class_iri" :selectResource="selectClass" />
 </template>
 
 <script>
+import { mapState } from 'pinia'
 
 export default {
   name: 'ClassList',
-  components: {
-    QueryResultList
+  props: {
+    class_iri: String,
+    selectClass: Function
   },
   watch: {
     graph_iri (value) {
@@ -22,7 +23,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(useSelectionStore, ['graph_iri', 'resource_iri'])
+    ...mapState(useSelectionStore, ['graph_iri'])
   }
 }
 

src/components/GraphList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <QueryResultList title="Graph List" search query="select distinct ?graph { graph ?graph {?s ?p ?o}} order by ?graph" query-quads select-variable="graph" ref="classList" :add="() => {add_graph_modal.show()}" :selectResource="(graphIri) => {select(graphIri)}" :activeResource="graph_iri"/>
+    <QueryResultList title="Graph List" search query="select distinct ?graph { graph ?graph {?s ?p ?o}} order by ?graph" query-quads select-variable="graph" ref="classList" :add="() => {add_graph_modal.show()}" :selectResource="selectGraph" :activeResource="graph_iri" />
     <div class="modal fade" ref="add_graph" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" size="lg">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
@@ -31,7 +31,6 @@
 <script>
 import { mapState } from 'pinia'
 import { useRdfStore } from '../stores/rdf'
-import { useSelectionStore } from '../stores/selection'
 import { Modal } from 'bootstrap'
 import rdf from '@rdfjs/data-model'
 
@@ -42,13 +41,16 @@ export default {
   name: 'GraphList',
   setup () {
     const store = useRdfStore();
-    const selection = useSelectionStore();
-    return { store, selection }
+    return { store }
   },
   components: {
     TermInput,
     QueryResultList
   },
+  props: {
+    graph_iri: String,
+    selectGraph: Function
+  },
   data () {
     return {
       graphs: [],
@@ -59,14 +61,7 @@ export default {
   mounted() {
     this.add_graph_modal = new Modal(this.$refs.add_graph)
   },
-  computed: {
-    ...mapState(useSelectionStore, ['graph_iri'])
-  },
   methods: {
-    select (graph) {
-      this.selection.changeGraphIri(graph)
-      this.selection.changeResourceIri(graph)
-    },
     async add_graph () {
       const newGraphData = [rdf.quad(this.new_graph_iri, rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'), rdf.namedNode('http://www.w3.org/2000/01/rdf-schema#Graph'))]
       console.log(this.new_graph_iri)

src/components/InstanceList.vue

@@ -1,17 +1,17 @@
+<script setup>
+import { useSelectionStore } from '../stores/selection'
+import QueryResultList from './QueryResultList.vue'
+</script>
+
 <template>
-  <QueryResultList title="Instance List" search :query="'select distinct ?instance { ?instance a <' + resource_iri + '> } order by ?instance'" select-variable="instance" itemClass="py-2" ref="instanceList" />
+  <QueryResultList title="Instance List" search :query="'select distinct ?instance { ?instance a <' + resource_iri + '> } order by ?instance'" select-variable="instance" itemClass="py-2" ref="instanceList" :activeResource="resource_iri" :selectResource="(iri) => {useSelectionStore().changeResourceIri(iri)}"  />
 </template>
 
 <script>
-import QueryResultList from './QueryResultList.vue'
 import { mapState } from 'pinia'
-import { useSelectionStore } from '../stores/selection'
 
 export default {
   name: 'InstanceList',
-  components: {
-    QueryResultList
-  },
   computed: {
     ...mapState(useSelectionStore, ['resource_iri'])
   },

src/components/QueryResultList.vue

@@ -89,8 +89,6 @@ export default {
     select (resource) {
       if (this.selectResource) {
         this.selectResource(resource)
-      } else {
-        this.selection.changeResourceIri(resource)
       }
     },
     async updateList () {