Merge pull request #47 from zazuko/virtual-scroll

imporve spo perormance

Author: BenjaminHofstetter

src/App.vue

@@ -7,6 +7,7 @@ import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 import Select from 'primevue/select';
 import Dialog from 'primevue/dialog';
+import Drawer from 'primevue/drawer';
 
 import RdfEditor from './components/RdfEditor.vue';
 import type {  RdfData } from './components/RdfEditor.vue';
@@ -30,7 +31,9 @@ const rdfText = ref<string>('');
 const currentSerialization = computed(() => selectedFormat.value.type);
 const dataset  = ref<Dataset>(rdfEnvironment.dataset() as unknown as Dataset);
 const hideEditorSplitterPanel = ref(false);
-const hideSearchPanel = ref(true);
+const showTable = ref(false);
+const showSearchPanel = ref(false);
+
 const showAboutDialog = ref(false);
 
 function onQuadsChanged(rdfData: RdfData) {
@@ -47,7 +50,7 @@ function makeEditorBig() {
 }
 
 function toggleSearch () {
-  hideSearchPanel.value = !hideSearchPanel.value;
+  showSearchPanel.value = !showSearchPanel.value;
 }
 
 function onFormatChange(rdfSerializationType: RdfSerializationType) {
@@ -110,15 +113,27 @@ function onNdeSelected(term: Term) {
       <GraphView :dataset="dataset" />
     </SplitterPanel>
 
-    <SplitterPanel v-if="!hideSearchPanel">
-      <SPOSearch :dataset="dataset" @selected="onNdeSelected"/>
-    </SplitterPanel>
-
   </Splitter>
 
 
-
-  <Dialog v-model:visible="showAboutDialog" modal header="Zazuko RDF Sketch" :style="{ width: '60rem' }">
+  <Drawer v-model:visible="showSearchPanel" header="SPO Search" :modal="false" position="bottom" :dismissable="false" style="height: 40vh" :pt="{
+        root: {
+            style: 'padding: 0;'
+        },
+        content: {
+            style: 'padding: 0;'
+        },
+        title: {
+          style: 'font-size: 16px; font-weight: 600;'
+        },
+        header: {
+            style: 'padding-left: 16px; padding-top:0; padding-bottom:0; padding-right: 0px; '
+            
+        }}">
+    <SPOSearch :dataset="dataset" @selected="onNdeSelected"/>
+  </Drawer>
+
+  <Dialog v-model:visible="showAboutDialog" header="Zazuko RDF Sketch" :style="{ width: '60rem' }">
     <div style="display: flex; flex-direction: row; gap: 24px">  
       <img src="/img/icons/zazuko_icon.svg" alt="Zazuko Logo" style="width: 100px;">
 

src/components/SPOSearch.vue

@@ -1,5 +1,8 @@
 <template>
-<DataTable  v-model:filters="filters" filterDisplay="row" :value="spo" scrollable scrollHeight="flex">
+<ProgressSpinner v-if="!spo" />
+
+
+<DataTable v-if="spo" v-model:filters="filters" filterDisplay="row" :value="spo" :itemSize="61" scrollable scrollHeight="calc(40vh - 42px)" :virtualScrollerOptions="{ itemSize: 61 }" >
     <Column field="subject" header="Subject" style="width: 20%">  
         <template #filter="{ filterModel, filterCallback }">
             <InputText size="small" v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Subject" />
@@ -25,7 +28,7 @@
             <InputText size="small" v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Object" />
         </template>
         <template #body="{ data }">
-            <span v-if="data.predicateTerm.value === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type' || data.objectTerm.termType === 'Literal'">
+            <span class="row" v-if="data.predicateTerm.value === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type' || data.objectTerm.termType === 'Literal'">
                 {{ data.object }}
             </span>
             <span v-else @click="nodeSelected(data.objectTerm)" class="node-link">
@@ -43,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+import ProgressSpinner from 'primevue/progressspinner';
 
 import type { Dataset, Term } from '@rdfjs/types';
 import { computed, ref } from 'vue'

src/resources-utils.ts

@@ -99,8 +99,6 @@ function mapTypeToLabel(typeIri: string): string {
     const lastPart = iriParts[iriParts.length - 1];
 
     const cc = lastPart.replace(/[a-z]/g, '');
-    console.log(lastPart);
-    console.log(cc);
     if (cc.length > 1) {
 
         return cc.slice(0, 2);