feat: muted tag bubble

Author: MenxLi

lires_web/src/components/home/FileTags.vue

@@ -39,6 +39,13 @@
             return ret
         }
     });
+    const mutedTags = computed(() => {
+        const ret = uiState.tagStatus.checked.copy();
+        if (currentSelectedDatapoint.value !== null){
+            ret.pop_ifcontains_(currentSelectedDatapoint.value.tags);
+        }
+        return ret
+    });
 
     function clearTagSelection(){
         uiState.tagStatus.checked = new DataTags();
@@ -94,15 +101,17 @@
             <hr>
         </div>
         <TagSelector @onCheck="(status: TagStatus) => emit('onCheck', status)" v-model:tagStatus="uiState.tagStatus"></TagSelector>
-        <TagBubbleContainer v-if="currentSelectedDatapoint"  
+        <hr>
+        <TagBubbleContainer 
             @click-on-bubble="(tag: string) => {
                 if (uiState.tagStatus.checked.has(tag)){ uiState.tagStatus.checked.delete(tag); }
                 else{ uiState.tagStatus.checked.add(tag); }
                 uiState.updateShownData();
             }"
-            :tags="currentSelectedDatapoint.tags" 
-            :highlightTags="highlightTags" 
-            :maxWidth="ftPanel? ftPanel.clientWidth : null">
+            :tags="currentSelectedDatapoint? currentSelectedDatapoint.tags : uiState.tagStatus.checked"
+            :highlight-tags="highlightTags" 
+            :muted-tags="mutedTags"
+            :max-width="ftPanel? ftPanel.clientWidth : null">
         </TagBubbleContainer>
         <div class="buttons">
             <button id="btnClear" class="green" @click="clearTagSelection">CLEAR SELECTION</button>

lires_web/src/components/tags/TagBubble.vue

@@ -5,9 +5,9 @@
 
     const props = withDefaults(defineProps<{
         tag: string,
-        highlight?: boolean
+        tStyle: "" | "highlight" | "muted"
     }>(), {
-        highlight: false,
+        tStyle: "",
     })
 
     const emit = defineEmits<{
@@ -25,7 +25,7 @@
 </script>
 
 <template>
-    <div :class="`bubble${highlight? ' highlight' : ''}`" @click="()=>emit('click')">
+    <div :class="`bubble${tStyle? ' '+tStyle : ''}`" @click="()=>emit('click')">
         <div class="prefix" v-if="tagComponents[0]">
             {{ tagComponents[0] }}
         </div>
@@ -54,7 +54,9 @@ div.bubble{
 div.highlight{
     background-color: rgba(248, 54, 255, 0.247);
     box-shadow: 0 0 5px var(--color-shadow);
-    transition: all 0.2s;
+}
+div.muted{
+    opacity: 0.35;
 }
 
 div.prefix{

lires_web/src/components/tags/TagBubbleContainer.vue

@@ -2,14 +2,17 @@
 <script setup lang="ts">
     import { DataTags } from '../../core/dataClass';
     import TagBubble from './TagBubble.vue';
+    import { computed } from 'vue';
 
     const props = withDefaults(defineProps<{
         tags: DataTags | string[]
         highlightTags?: DataTags | null
+        mutedTags?: DataTags | null
         maxWidth?: number | null
         middleAlign?: boolean
     }>(), {
         highlightTags: null,
+        mutedTags: null,
         maxWidth: null,
         middleAlign: false,
     })
@@ -18,6 +21,20 @@
         (e: "clickOnBubble", tag: string): void
     }>()
 
+    const tagStyles = computed(() => {
+        const style = {} as Record<string, "highlight" | "muted" | "">;
+        for (const tag of props.tags){
+            if (props.highlightTags && props.highlightTags.has(tag)){
+                style[tag] = "highlight";
+            }else if (props.mutedTags && props.mutedTags.has(tag)){
+                style[tag] = "muted";
+            }else{
+                style[tag] = "";
+            }
+        }
+        return style;
+    })
+
 </script>
 
 <template>
@@ -29,7 +46,7 @@
         <TagBubble v-for="tag in props.tags" 
             @click="()=>emit('clickOnBubble', tag)"
             :tag="tag" 
-            :highlight="props.highlightTags? props.highlightTags.has(tag) : false">
+            :t-style="tagStyles[tag]">
         </TagBubble>
     </div>
 </template>
@@ -39,7 +56,6 @@ div#bubbleContainer{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    overflow: hidden;
     gap: 5px;
     padding: 5px;
     border-radius: 5px;

lires_web/src/core/dataClass.ts

@@ -30,6 +30,9 @@ export class DataTags extends Set<string>{
         _tags.forEach((tag) => { return DataTags.removeSpaces(tag); })
         super(_tags);
     }
+    copy(){
+        return new DataTags(this);
+    }
     add(tag: string){
         return super.add(DataTags.removeSpaces(tag));
     }
@@ -54,6 +57,10 @@ export class DataTags extends Set<string>{
         tags.forEach((value) => this.delete(value));
         return this;
     }
+    pop_ifcontains_( tags: DataTags){
+        tags.forEach((value)=>{ if (this.has(value)){ this.delete(value); } })
+        return this;
+    }
     issubset(tags: DataTags){
         return TagRule.isSubset(this, tags)
     }