From d2cd56c5686baa5e148389a7cab30c13092c142e Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:08:48 +0900
Subject: [PATCH] dirty initial model metadata load & preview

based on node preview code
---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   |  1 +
 .../tabs/modelLibrary/ModelPreview.vue        | 40 +++++++++++
 .../tabs/modelLibrary/ModelTreeLeaf.vue       | 72 +++++++++++++++++++
 3 files changed, 113 insertions(+)
 create mode 100644 src/components/sidebar/tabs/modelLibrary/ModelPreview.vue

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 8d8f7ee44..0d4ef350f 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -26,6 +26,7 @@
       </div>
     </template>
   </SidebarTabTemplate>
+  <div id="model-library-model-preview-container" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
new file mode 100644
index 000000000..3f611dc67
--- /dev/null
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="model_preview">
+    <div class="model_preview_title">
+      {{ modelDef.title }}
+    </div>
+    <div class="model_preview_descript">
+      {{ modelDef.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComfyModelDef } from '@/stores/modelStore'
+
+const props = defineProps({
+  modelDef: {
+    type: ComfyModelDef,
+    required: true
+  }
+})
+
+const modelDef = props.modelDef
+</script>
+<style scoped>
+.model_preview {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  font-size: small;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  width: min-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+</style>
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 5d372a027..a4fd78474 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,15 +1,87 @@
 <template>
   <div ref="container" class="model-lib-node-container h-full w-full">
     <TreeExplorerTreeNode :node="node"> </TreeExplorerTreeNode>
+
+    <teleport v-if="isHovered" to="#model-library-model-preview-container">
+      <div class="model-lib-model-preview" :style="modelPreviewStyle">
+        <ModelPreview ref="previewRef" :modelDef="modelDef"></ModelPreview>
+      </div>
+    </teleport>
   </div>
 </template>
 
 <script setup lang="ts">
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import ModelPreview from './ModelPreview.vue'
 import { ComfyModelDef } from '@/stores/modelStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import {
+  computed,
+  CSSProperties,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref
+} from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyModelDef>
 }>()
+
+const modelDef = computed(() => props.node.data)
+
+const previewRef = ref<InstanceType<typeof ModelPreview> | null>(null)
+const modelPreviewStyle = ref<CSSProperties>({
+  position: 'absolute',
+  top: '0px',
+  left: '0px'
+})
+
+const settingStore = useSettingStore()
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+const handleModelHover = async () => {
+  const hoverTarget = modelContentElement.value
+  const targetRect = hoverTarget.getBoundingClientRect()
+
+  const previewHeight = previewRef.value?.$el.offsetHeight || 0
+  const availableSpaceBelow = window.innerHeight - targetRect.bottom
+
+  modelPreviewStyle.value.top =
+    previewHeight > availableSpaceBelow
+      ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
+      : `${targetRect.top - 40}px`
+  if (sidebarLocation.value === 'left') {
+    modelPreviewStyle.value.left = `${targetRect.right}px`
+  } else {
+    modelPreviewStyle.value.left = `${targetRect.left - 400}px`
+  }
+
+  modelDef.value.load()
+}
+
+const container = ref<HTMLElement | null>(null)
+const modelContentElement = ref<HTMLElement | null>(null)
+const isHovered = ref(false)
+const handleMouseEnter = async () => {
+  isHovered.value = true
+  await nextTick()
+  handleModelHover()
+}
+const handleMouseLeave = () => {
+  isHovered.value = false
+}
+onMounted(() => {
+  modelContentElement.value = container.value?.closest('.p-tree-node-content')
+  modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
+  modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
+})
+
+onUnmounted(() => {
+  modelContentElement.value?.removeEventListener('mouseenter', handleMouseEnter)
+  modelContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
+})
 </script>