add opacity to nodeview for strangeness repr

src/pages/library/LibraryList.vue

@@ -13,6 +13,7 @@
             :preview="previewNode === parent"
             @open-node="$emit('open-node', $event)"
             @open-child="$emit('open-node', { parentId: parent.id, ...$event })"
+            :style="`--opacity: ${getStrangenessOpacity(strangeness, parent)};`"
           />
         </div>
       </div>
@@ -23,7 +24,7 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import { searchInNode, tagsInNode } from '@/store/utils'
+import { searchInNode, tagsInNode, getStrangenessOpacity } from '@/store/utils'
 import { NodeView } from '@/components/nodes'
 
 
@@ -41,7 +42,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['orderedTextsDepart', 'search', 'tags']),
+    ...mapGetters(['orderedTextsDepart', 'search', 'tags', 'strangeness']),
 
     filteredNodes () {
       if (!this.orderedTextsDepart) return {}
@@ -60,6 +61,8 @@ export default {
   },
 
   methods: {
+    getStrangenessOpacity,
+
     onContainerClick (e) {
       if (!e.target.classList.contains('node-view')) {
         this.previewNode = null
@@ -129,6 +132,10 @@ export default {
       &.preview {
         top: -2rem;
       }
+
+      &:not(.preview) {
+        opacity: var(--opacity);
+      }
     }
   }
 }

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;

src/store/utils.js

@@ -146,3 +146,12 @@ export function getRelation (node) {
   }
   return { parentId: node.id }
 }
+
+
+export function getStrangenessOpacity (currentStrangeness, node) {
+  if (currentStrangeness === undefined) return 1
+  const strangeness = (
+    node.type === 'prod' && node.parents && node.parents.length ? node.parents[0] : node
+  ).strangeness
+  return 1 / (Math.abs(strangeness - currentStrangeness) + 1)
+}