Added node details visualization

browser/vue-flow/src/components/flow/editor.vue

@@ -66,7 +66,7 @@
     </svg>
     <div class="flow-container__control">
       <button disabled>Deploy</button>
-      <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} sockets </button>
+      <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} details </button>
       <button @click="stickyTriggers=!stickyTriggers"> {{ stickyTriggers? 'Hide':'Show' }} triggers </button>
       <button @click="nodeActivity=!nodeActivity"> {{ nodeActivity? 'Hide':'Show' }} activity </button>
       <button @click="$emit('documentSave', nodeData)"> Save </button> <!-- should disable until confirmation -->

browser/vue-flow/src/components/flow/node.vue

@@ -162,6 +162,13 @@
       height="10"
       @mousedown.stop.prevent="triggerPointerDown($event, 'out')"
     />
+    <text
+      class="flow-node__src-detail"
+      x="0"
+      :y="-bodyProps.height/2 - 5"
+      text-anchor="middle">
+      {{ node.src }}
+    </text>
 
     <flow-node-activity
       v-if="nodeActivity"
@@ -416,6 +423,19 @@ export default {
   stroke: green !important;
 }
 
+/* opacity with the sockets */
+.flow-node__src-detail {
+  pointer-events:none;
+  user-select:none;
+  font-size:15px;
+  opacity:0;
+  fill: var(--normal);
+}
+
+.flow-linking .flow-node__src-detail {
+  opacity:0.7;
+}
+
 /* sockets */
 .flow-node__socket {
   pointer-events: none;
@@ -508,7 +528,4 @@ for hidden
   opacity:0.9;
 }
 
-canvas {
-  border: solid 1px #f00;
-}
 </style>