update: log display

Signed-off-by: ArvinHuang <[email protected]>
FederatedAI · Dec 27, 2023 · 87d361b · 87d361b
1 parent b6aad4a
commit 87d361b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 80 deletions.
diff --git a/resources-front-end/packages/fate-board/src/components/VirtualScroll/VirtualScroll.vue b/resources-front-end/packages/fate-board/src/components/VirtualScroll/VirtualScroll.vue
@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce } from 'lodash';
 import {
 computed,
 nextTick,
@@ -121,11 +120,10 @@ let resizeObserver: any = undefined;
 
 const itemsWithSize = computed<any[]>(() => {
   const result = [];
-  const { items, keyField } = _props;
   const sizes: any = scrollData.sizes;
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    const id = item[keyField] || i;
+  for (let i = 0; i < _props.items.length; i++) {
+    const item = _props.items[i];
+    const id = item[_props.keyField];
     let size = sizes[id];
     if (typeof size === 'undefined' && !$_undefinedMap[id]) {
       size = 0;
@@ -143,13 +141,11 @@ const sizes = computed<any>(() => {
   const sizes: any = {
     '-1': { accumulator: 0 },
   };
-  const items = itemsWithSize;
-  const minItemSize = _props.minItemSize;
   let computedMinSize = 10000;
   let accumulator = 0;
   let current;
-  for (let i = 0, l = items.value.length; i < l; i++) {
-    current = items.value[i].size || minItemSize;
+  for (let i = 0, l = itemsWithSize.value.length; i < l; i++) {
+    current = itemsWithSize.value[i].size || _props.minItemSize;
     if (current < computedMinSize) {
       computedMinSize = current;
     }
@@ -171,18 +167,17 @@ function addView(pool: any[], index: number, item: unknown, key: unknown) {
   const view = {
     item,
     position: 0,
-    info: property,
+    info: property
   };
   pool.push(view);
   return view;
 }
 function unuseView(view: any, fake = false) {
-  const unusedViews = $_unusedViews;
   const type = view.info.type;
-  let unusedPool = unusedViews.get(type);
+  let unusedPool = $_unusedViews.get(type);
   if (!unusedPool) {
     unusedPool = [];
-    unusedViews.set(type, unusedPool);
+    $_unusedViews.set(type, unusedPool);
   }
   unusedPool.push(view);
   if (!fake) {
@@ -192,19 +187,18 @@ function unuseView(view: any, fake = false) {
   }
 }
 
-const scrollUpdateItem = debounce(() => {
-  $_scrollDirty.value = false;
-  const { continuous } = updateItems(false, true);
-  if (!continuous) {
-    clearTimeout($_refreshTimout);
-    $_refreshTimout = setTimeout(handleScroll, 200);
-  }
-}, 100);
 function handleScroll() {
   checkPosition();
   if (!$_scrollDirty.value) {
     $_scrollDirty.value = true;
-    requestAnimationFrame(scrollUpdateItem);
+    requestAnimationFrame(() => {
+      $_scrollDirty.value = false;
+      const { continuous } = updateItems(false, true);
+      if (!continuous) {
+        clearTimeout($_refreshTimout);
+        $_refreshTimout = setTimeout(handleScroll, 100);
+      }
+    });
   }
 }
 function getRange(scroll: { start: any; end: any }) {
@@ -486,22 +480,9 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => scrollData.sizes,
-  () => updateItems(true),
-  { deep: true }
-);
-
-watch(
-  () => scrollData.validSizes,
-  () => updateItems(true),
-  { deep: true }
-);
-
 onMounted(() => {
   nextTick(() => {
     updateItems(true);
-    emit('afterMounted');
     ready.value = true;
   });
   addResizeObserver();

diff --git a/resources-front-end/packages/fate-board/src/components/VirtualScroll/VirtualScrollItem.vue b/resources-front-end/packages/fate-board/src/components/VirtualScroll/VirtualScrollItem.vue
@@ -1,30 +1,34 @@
 <template>
-  <article ref="container">
+  <component ref="container" :is="tag || 'div'">
     <slot name="default"></slot>
-  </article>
+  </component>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue';
 
 const scrollData: any = inject('scrollData');
 const scrollResizeObserver: any = inject('scrollResizeObserver');
 const undefinedMap: any = inject('undefinedMap');
 const undefinedSizes: any = inject('undefinedSizes');
 
 const $_forceNextScrollUpdate = ref<any>(null);
+const $_pendingSizeUpdate = ref<any>('');
+const $_pendingScrollUpdate = ref<any>('');
 
 interface Props {
-  item: any;
-  active: boolean;
-  tag?: string;
+  item: any,
+  active: boolean,
+  index?: number | undefined,
+  tag?: string
 }
 const props = withDefaults(defineProps<Props>(), {
+  index: undefined,
   tag: 'div',
 });
 const slots = defineSlots<{
-  default(): any;
-}>();
+  default(): any
+}>()
 
 const id = computed(() => props.item[scrollData.keyField]);
 const size = computed<any>(
@@ -40,10 +44,6 @@ watch(
     if (!size.value) {
       onDataUpdate();
     }
-  },
-  {
-    deep: true,
-    immediate: true,
   }
 );
 
@@ -70,39 +70,40 @@ watch(
       } else {
         unobserveSize();
       }
-    }
-    if (value) {
+    } else if (value && $_pendingScrollUpdate.value === id.value) {
       updateSize();
     }
-  },
-  { deep: true, immediate: true }
+  }
 );
 
 onMounted(() => {
   if (scrollData.active) {
     updateSize();
     observeSize();
   }
-  // observeSizeOfItem();
 });
 
-onBeforeUnmount(() => {
-  // unobserveSizeOfItem()
-})
-
 function updateSize() {
   if (finalActive.value) {
-    computeSize(id.value);
+    if ($_pendingSizeUpdate.value !== id.value) {
+      $_pendingSizeUpdate.value = id.value;
+      $_forceNextScrollUpdate.value = null;
+      $_pendingScrollUpdate.value = null;
+      computeSize(id.value);
+    }
+  } else {
+    $_forceNextScrollUpdate.value = id.value;
   }
 }
 
-function computeSize(id: any) {
+function computeSize(idChecked: any) {
   nextTick(() => {
-    if (id.value === id) {
+    if (id.value === idChecked) {
       const width = container.value.offsetWidth;
       const height = container.value.offsetHeight;
       applySize(width, height);
     }
+    $_pendingSizeUpdate.value = null;
   });
 }
 
@@ -115,28 +116,9 @@ function applySize(_width: number, height: number) {
     }
     scrollData.sizes[id.value] = csize;
     scrollData.validSizes[id.value] = true;
-    return true;
-  } else {
-    return false;
   }
 }
 
-// let $_resizeOfItem: any
-// function observeSizeOfItem() {
-//   $_resizeOfItem = new ResizeObserver(debounce(() => {
-//     if (!scrollData.sizes[id.value] || !scrollData.validSizes[id.value]) {
-//       computeSize(id.value)
-//     }
-//   }))
-//   $_resizeOfItem.observe(container.value)
-// }
-
-// function unobserveSizeOfItem() {
-//   if ($_resizeOfItem) {
-//     $_resizeOfItem.disconnect()
-//   }
-// }
-
 function observeSize() {
   if (!scrollResizeObserver) return;
   if (container.value) {
@@ -160,7 +142,11 @@ function onResize(event: any) {
 
 function onScrollUpdate({ force }: any) {
   if (!finalActive.value && force) {
-    updateSize();
+    $_pendingScrollUpdate.value = id.value
+  }
+
+  if ($_forceNextScrollUpdate.value === id.value || force || !size.value) {
+    updateSize()
   }
 }
 

diff --git a/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue b/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue
@@ -31,7 +31,7 @@ import LayoutHeader from './LayoutHeader.vue';
 
   @include flex-row();
   @include flex-stretch();
-
+  
   background-color: $default-white;
   overflow: hidden;