add opacity to nodeview for strangeness repr

src/pages/library/LibraryMap.vue

@@ -12,6 +12,7 @@
           mode="card"
           :hidden="node.hidden"
           @click.native="onNodeClick(node.data)"
+          :style="`--opacity: ${getStrangenessOpacity(strangeness, node.data)};`"
         />
       </foreignObject>
     </map-zoom>
@@ -29,7 +30,7 @@ import { randomUniform } from 'd3'
 import { forceSimulation, forceCollide, forceManyBody } from 'd3-force'
 import { mapGetters } from 'vuex'
 
-import { searchInNode, tagsInNode, getRelation } from '@/store/utils'
+import { searchInNode, tagsInNode, getRelation, getStrangenessOpacity } from '@/store/utils'
 import { MapZoom, NodePreviewZone } from '@/components/layouts'
 import { NodeView } from '@/components/nodes'
 
@@ -52,7 +53,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['search', 'tags']),
+    ...mapGetters(['search', 'tags', 'strangeness']),
 
     filteredNodes () {
       if (!this.nodes) return
@@ -72,6 +73,8 @@ export default {
   },
 
   methods: {
+    getStrangenessOpacity,
+
     onOpen (node) {
       this.$parent.$emit('open-node', getRelation(node))
     },
@@ -126,6 +129,7 @@ export default {
 
   .node-view {
     width: $node-card-width-sm;
+    opacity: var(--opacity);
 
     @include media-breakpoint-up($size-bp) {
       width: $node-card-width;