fix wobbly spo scroll header

zazuko · Feb 7, 2025 · 330d125 · 330d125
1 parent 562ebac
commit 330d125
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/src-vscode/CHANGELOG.md b/src-vscode/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.0.5
+- Improve SPO scroll performance
+
+## 1.0.4
+- Add rdf:type Icon
+
 ## 1.0.3
 - Fix missing icon in readme.md
 

diff --git a/src/App.vue b/src/App.vue
@@ -157,7 +157,7 @@ function simpleHash(str: string): number {
             style: 'padding-left: 16px; padding-top:0; padding-bottom:0; padding-right: 0px; '
             
         }}">
-    <SPOSearch :dataset="dataset" @selected="onNdeSelected"/>
+    <SPOSearch :dataset="dataset" :is-vscode="false" @selected="onNdeSelected"/>
   </Drawer>
 
   <Dialog v-model:visible="showAboutDialog" header="Zazuko RDF Sketch" :style="{ width: '60rem' }">

diff --git a/src/components/SPOSearch.vue b/src/components/SPOSearch.vue
@@ -1,9 +1,7 @@
 <template>
-<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%">  
+<DataTable v-if="spo" v-model:filters="filters" filterDisplay="row" :value="spo" :itemSize="61" scrollable :scrollHeight="props.isVscode ? 'calc(40vh - 0px)' : 'calc(40vh - 42px)'" :virtualScrollerOptions="{ itemSize: 61 }" >
+    <Column field="subject" header="Subject" :style="{ width: hasContext ? '25%' : '33.33%' }">  
         <template #filter="{ filterModel, filterCallback }">
             <InputText size="small" v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Subject" />
         </template>
@@ -13,7 +11,7 @@
             </span>
         </template>
     </Column>
-    <Column field="predicate" header="Predicate" style="width: 20%">
+    <Column field="predicate" header="Predicate" :style="{ width: hasContext ? '25%' : '33.33%' }">
         <template #filter="{ filterModel, filterCallback }">
             <InputText size="small" v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Predicate" />
         </template>
@@ -23,7 +21,7 @@
             </span>
         </template>
     </Column>
-    <Column field="object" header="Object"  style="width: 20%">
+    <Column field="object" header="Object" :style="{ width: hasContext ? '25%' : '33.33%' }">
         <template #filter="{ filterModel, filterCallback }">
             <InputText size="small" v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Object" />
         </template>
@@ -36,7 +34,7 @@
             </span>
         </template>
     </Column>
-    <Column v-if="hasContext" field="context" header="Context" style="width: 20%">
+    <Column v-if="hasContext" field="context" header="Context" style="width: 33.33%">
         <template #filter="{ filterModel, filterCallback }">
             <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search Context aka Named Graph" />
         </template>
@@ -46,7 +44,6 @@
 </template>
 
 <script setup lang="ts">
-import ProgressSpinner from 'primevue/progressspinner';
 
 import type { Dataset, Term } from '@rdfjs/types';
 import { computed, ref } from 'vue'
@@ -68,6 +65,7 @@ interface SPO {
 
 interface GraphViewProps {
   dataset: Dataset,
+  isVscode: boolean
 }
 
 const props = defineProps<GraphViewProps>();

diff --git a/src/vscode-webview/AppVscode.vue b/src/vscode-webview/AppVscode.vue
@@ -127,7 +127,7 @@ onBeforeMount(() => {
 
     <SplitterPanel v-if="!hideSearchPanel" >
         <div class="search">
-            <SPOSearch :dataset="dataset" @selected="onNdeSelected"/>
+            <SPOSearch :dataset="dataset" :is-vscode="true" @selected="onNdeSelected"/>
         </div>
     </SplitterPanel>