Reimplement attributes view for component debug screen

app/web/src/components/ComponentDetails.vue

@@ -190,7 +190,7 @@ import { ComponentType } from "@/components/ModelingDiagram/diagram_types";
 import ComponentCard from "./ComponentCard.vue";
 import DetailsPanelTimestamps from "./DetailsPanelTimestamps.vue";
 import ComponentDetailsResource from "./ComponentDetailsResource.vue";
-import ComponentDebugDetails from "./ComponentDebugDetails.vue";
+import ComponentDebugDetails from "./Debug/ComponentDebugDetails.vue";
 import AssetQualificationsDetails from "./AssetQualificationsDetails.vue";
 import AssetActionsDetails from "./AssetActionsDetails.vue";
 import SidebarSubpanelTitle from "./SidebarSubpanelTitle.vue";

app/web/src/components/AttributeDebugView.vue → app/web/src/components/Debug/AttributeDebugView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden my-xs p-xs border-opacity-10 border-l-2">
     <dl class="flex flex-col gap-xs">
-      <DebugViewItem title="Attribute Value Id" :data="data.valueId" />
+      <DebugViewItem title="Attribute Value Id" :data="data.attributeValueId" />
       <DebugViewItem :data="data.kind ?? 'any'" title="Type" />
       <DebugViewItem
         :data="`${data.funcName} ${data.funcId}`"
@@ -21,31 +21,17 @@
       </DebugViewItem>
       <DebugViewItem title="Value" :data="data.value ?? 'NULL'" />
       <DebugViewItem title="Prototype Id" :data="data.prototypeId" />
-      <DebugViewItem title="Prototype Context" :data="data.prototypeContext" />
       <DebugViewItem
-        title="Implicit Attribute Value"
-        :data="
-          typeof data.implicitValue === 'undefined'
-            ? 'none'
-            : data.implicitValue ?? 'NULL'
-        "
+        title="Materialized View"
+        :data="data.materializedView ?? 'NULL'"
       />
-      <DebugViewItem
-        title="Implicit Set By Function"
-        :data="data.implicitFuncName"
-      />
-      <p class="text-2xs p-2 my-2 border border-opacity-10">
-        prototype in change set?
-        {{ data.prototypeInChangeSet ? "y" : "n" }} value in change set?
-        {{ data.valueInChangeSet ? "y" : "n" }}
-      </p>
     </dl>
   </div>
 </template>
 
 <script setup lang="ts">
-import { AttributeDebugData } from "@/store/components.store";
+import { AttributeDebugView } from "@/store/components.store";
 import DebugViewItem from "./DebugViewItem.vue";
 
-defineProps<{ data: AttributeDebugData }>();
+defineProps<{ data: AttributeDebugView }>();
 </script>

app/web/src/components/ComponentDebugDetails.vue → app/web/src/components/Debug/ComponentDebugDetails.vue

@@ -30,7 +30,7 @@
         <Collapsible
           :defaultOpen="false"
           contentAs="ul"
-          label="Attributes - Not Reimplemented"
+          label="Attributes"
           textSize="lg"
         >
           <Collapsible
@@ -43,15 +43,15 @@
             extraBorderAtBottomOfContent
             xPadding="double"
           >
-            <AttributeDebugView :data="attribute.debugData" />
+            <AttributeDebugView :data="attribute" />
           </Collapsible>
         </Collapsible>
 
         <!-- Input Sockets -->
         <Collapsible
           :defaultOpen="false"
           contentAs="ul"
-          label="Input Sockets - Not Reimplemented"
+          label="Input Sockets"
           textSize="lg"
         >
           <Collapsible
@@ -64,15 +64,15 @@
             extraBorderAtBottomOfContent
             xPadding="double"
           >
-            <AttributeDebugView :data="attribute.debugData" />
+            <SocketDebugView :data="attribute" />
           </Collapsible>
         </Collapsible>
 
         <!-- Output Sockets -->
         <Collapsible
           :defaultOpen="false"
           contentAs="ul"
-          label="Output Sockets - Not Reimplemented"
+          label="Output Sockets"
           textSize="lg"
         >
           <Collapsible
@@ -85,7 +85,7 @@
             extraBorderAtBottomOfContent
             xPadding="double"
           >
-            <AttributeDebugView :data="attribute.debugData" />
+            <SocketDebugView :data="attribute" />
           </Collapsible>
         </Collapsible>
       </div>
@@ -102,6 +102,7 @@ import {
 import { PropType, computed, onMounted } from "vue";
 import { ComponentId, useComponentsStore } from "@/store/components.store";
 import AttributeDebugView from "./AttributeDebugView.vue";
+import SocketDebugView from "./SocketDebugView.vue";
 import DebugViewItem from "./DebugViewItem.vue";
 
 const componentsStore = useComponentsStore();

app/web/src/components/Debug/SocketDebugView.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="overflow-hidden my-xs p-xs border-opacity-10 border-l-2">
+    <dl class="flex flex-col gap-xs">
+      <DebugViewItem title="Attribute Value Id" :data="data.attributeValueId" />
+      <DebugViewItem :data="data.kind ?? 'any'" title="Type" />
+      <DebugViewItem
+        :data="`${data.funcName} ${data.funcId}`"
+        title="Set By Function"
+      />
+      <DebugViewItem title="Input" :data="data.funcArgs ?? 'NULL'" />
+      <DebugViewItem title="Input sources">
+        <template #data>
+          <ul v-if="data.argSources && Object.keys(data.argSources).length">
+            <li v-for="[k, v] in Object.entries(data.argSources)" :key="k">
+              <strong>{{ k }}</strong>
+              : {{ v ?? "?" }}
+            </li>
+          </ul>
+          <p v-else>No input sources</p>
+        </template>
+      </DebugViewItem>
+      <DebugViewItem title="Value" :data="data.value ?? 'NULL'" />
+      <DebugViewItem title="Prototype Id" :data="data.prototypeId" />
+      <DebugViewItem title="Socket Id" :data="data.socketId" />
+      <DebugViewItem title="Connection Annotations">
+        <template #data>
+          <ul
+            v-if="
+              data.connectionAnnotations && data.connectionAnnotations.length
+            "
+          >
+            <li
+              v-for="connection in data.connectionAnnotations"
+              :key="connection"
+              :data="connection"
+            >
+              {{ connection }}
+            </li>
+          </ul>
+          <p v-else>No input sources</p>
+        </template>
+      </DebugViewItem>
+      <DebugViewItem
+        title="Materialized View"
+        :data="data.materializedView ?? 'NULL'"
+      />
+    </dl>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SocketDebugView } from "@/store/components.store";
+import DebugViewItem from "./DebugViewItem.vue";
+
+defineProps<{ data: SocketDebugView }>();
+</script>

app/web/src/store/components.store.ts

@@ -135,8 +135,10 @@ const qualificationStatusToIconMap: Record<
   notexists: { icon: "none" },
 };
 
-export interface AttributeDebugData {
-  valueId: string;
+export interface AttributeDebugView {
+  path: string;
+  name: string;
+  attributeValueId: string;
   proxyFor?: string | null;
   funcName: string;
   funcId: string;
@@ -148,37 +150,20 @@ export interface AttributeDebugData {
   };
   value: object | string | number | boolean | null;
   prototypeId: string;
-  prototypeContext: {
-    prop_id: string;
-    internal_provider_id: string;
-    external_provider_id: string;
-    component_id: string;
-  };
   kind: string;
-  prototypeInChangeSet: boolean;
-  valueInChangeSet: boolean;
-  implicitValue?: object | string | number | boolean | null;
-  implicitValueContext?: {
-    prop_id: string;
-    internal_provider_id: string;
-    external_provider_id: string;
-    component_id: string;
-  };
-  implicitFuncName?: string;
+  materializedView?: string;
 }
-
-export interface AttributeDebugView {
-  path: string;
-  name: string;
-  debugData: AttributeDebugData;
+export interface SocketDebugView extends AttributeDebugView {
+  socketId: string;
+  connectionAnnotations: string[];
 }
 
 export interface ComponentDebugView {
   name: string;
   schemaVariantId: string;
   attributes: AttributeDebugView[];
-  inputSockets: AttributeDebugView[];
-  outputSockets: AttributeDebugView[];
+  inputSockets: SocketDebugView[];
+  outputSockets: SocketDebugView[];
 }
 
 type EventBusEvents = {

lib/dal/src/attribute/prototype.rs

@@ -37,6 +37,7 @@ use crate::{
 };
 
 pub mod argument;
+pub mod debug;
 
 #[remain::sorted]
 #[derive(Error, Debug)]
@@ -224,6 +225,33 @@ impl AttributePrototype {
 
         Ok(None)
     }
+    pub async fn find_for_input_socket(
+        ctx: &DalContext,
+        input_socket_id: InputSocketId,
+    ) -> AttributePrototypeResult<Option<AttributePrototypeId>> {
+        let workspace_snapshot = ctx.workspace_snapshot()?;
+
+        if let Some(prototype_idx) = workspace_snapshot
+            .edges_directed(input_socket_id, Direction::Outgoing)
+            .await?
+            .iter()
+            .find(|(edge_weight, _, _)| {
+                EdgeWeightKindDiscriminants::Prototype == edge_weight.kind().into()
+            })
+            .map(|(_, _, target_idx)| target_idx)
+        {
+            let node_weight = workspace_snapshot.get_node_weight(*prototype_idx).await?;
+
+            if matches!(
+                node_weight.content_address_discriminants(),
+                Some(ContentAddressDiscriminants::AttributePrototype)
+            ) {
+                return Ok(Some(node_weight.id().into()));
+            }
+        }
+
+        Ok(None)
+    }
 
     pub async fn get_by_id(
         ctx: &DalContext,