Merge pull request #4975 from systeminit/victor/eng-2846-view-nodes-o…

…n-diagram-api

feat: view nodes on diagram api

app/web/src/api/sdf/dal/component.ts

@@ -1,10 +1,10 @@
-import { Vector2d } from "konva/lib/types";
+import { IRect, Vector2d } from "konva/lib/types";
 import { StandardModel } from "@/api/sdf/dal/standard_model";
 import { CodeView } from "@/api/sdf/dal/code_view";
 import { ActorView } from "@/api/sdf/dal/history_actor";
 import { ChangeStatus } from "@/api/sdf/dal/change_set";
 import { ComponentType } from "@/api/sdf/dal/schema";
-import { ViewId } from "@/api/sdf/dal/views";
+import { ViewDescription, ViewId } from "@/api/sdf/dal/views";
 import {
   DiagramSocketDef,
   Size2D,
@@ -37,6 +37,11 @@ export interface ViewGeometry {
   geometry: Vector2d & Partial<Size2D>;
 }
 
+export interface ViewNodeGeometry {
+  view: ViewDescription;
+  geometry: IRect;
+}
+
 export interface RawComponent {
   changeStatus: ChangeStatus;
   color: string;

app/web/src/api/sdf/dal/schema.ts

@@ -22,6 +22,7 @@ export type SchemaId = string;
 
 export enum ComponentType {
   Component = "component",
+  View = "view",
   ConfigurationFrameDown = "configurationFrameDown",
   ConfigurationFrameUp = "configurationFrameUp",
   AggregationFrame = "aggregationFrame",

app/web/src/api/sdf/dal/views.ts

@@ -2,21 +2,27 @@ import { IRect } from "konva/lib/types";
 import { ComponentId } from "@/api/sdf/dal/component";
 import {
   DiagramElementUniqueKey,
+  DiagramViewData,
   SocketLocationInfo,
 } from "@/components/ModelingDiagram/diagram_types";
+import { ComponentType } from "./schema";
 
 export type ViewId = string;
 
 export type Components = Record<ComponentId, IRect>;
 export type Groups = Record<ComponentId, IRect>;
 export type Sockets = Record<DiagramElementUniqueKey, SocketLocationInfo>;
+export type ViewNode = ViewDescription &
+  IRect & { componentType: ComponentType.View };
+export type ViewNodes = Record<ViewId, DiagramViewData>;
 
 export interface View {
   id: ViewId;
   name: string;
   components: Components;
   groups: Groups;
   sockets: Sockets;
+  viewNodes: ViewNodes;
 }
 
 export interface ViewDescription {

app/web/src/components/Actions/ActionRunnerCard.vue

@@ -95,6 +95,7 @@ import { TreeNode, useTheme, IconButton } from "@si/vue-lib/design-system";
 import { DeprecatedActionRunner } from "@/store/actions.store";
 import { useComponentsStore } from "@/store/components.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useViewsStore } from "@/store/views.store";
 import CodeViewer from "../CodeViewer.vue";
 import StatusIndicatorIcon from "../StatusIndicatorIcon.vue";
 import ActionRunnerDetails from "./ActionRunnerDetails.vue";
@@ -140,10 +141,12 @@ const componentNameTooltip = computed(() => {
   return {};
 });
 
+const viewStore = useViewsStore();
+
 function onClick() {
   const component = componentsStore.allComponentsById[props.runner.componentId];
   if (component) {
-    componentsStore.setSelectedComponentId(props.runner.componentId);
+    viewStore.setSelectedComponentId(props.runner.componentId);
     componentsStore.eventBus.emit("panToComponent", {
       component,
       center: true,
@@ -153,18 +156,18 @@ function onClick() {
 }
 
 const isHover = computed(
-  () => componentsStore.hoveredComponentId === props.runner.componentId,
+  () => viewStore.hoveredComponentId === props.runner.componentId,
 );
 
 function onHoverStart() {
   if (componentsStore.allComponentsById[props.runner.componentId]) {
-    componentsStore.setHoveredComponentId(props.runner.componentId);
+    viewStore.setHoveredComponentId(props.runner.componentId);
   }
 }
 
 function onHoverEnd() {
   if (componentsStore.allComponentsById[props.runner.componentId]) {
-    componentsStore.setHoveredComponentId(null);
+    viewStore.setHoveredComponentId(null);
   }
 }
 

app/web/src/components/Actions/ActionRunnerCardV2.vue

@@ -48,6 +48,7 @@ import { TreeNode, useTheme } from "@si/vue-lib/design-system";
 import { ActionProposedView } from "@/store/actions.store";
 import { useComponentsStore } from "@/store/components.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useViewsStore } from "@/store/views.store";
 import StatusIndicatorIcon from "../StatusIndicatorIcon.vue";
 
 const changeSetsStore = useChangeSetsStore();
@@ -83,11 +84,13 @@ const componentNameTooltip = computed(() => {
   return {};
 });
 
+const viewStore = useViewsStore();
+
 function onClick() {
   const component =
     componentsStore.allComponentsById[props.action.componentId || ""];
   if (component) {
-    componentsStore.setSelectedComponentId(props.action.componentId);
+    viewStore.setSelectedComponentId(props.action.componentId);
     componentsStore.eventBus.emit("panToComponent", {
       component,
       center: true,
@@ -97,15 +100,15 @@ function onClick() {
 }
 
 const isHover = computed(
-  () => componentsStore.hoveredComponentId === props.action.componentId,
+  () => viewStore.hoveredComponentId === props.action.componentId,
 );
 
 function onHoverStart() {
   if (
     props.action.componentId &&
     componentsStore.allComponentsById[props.action.componentId]
   ) {
-    componentsStore.setHoveredComponentId(props.action.componentId);
+    viewStore.setHoveredComponentId(props.action.componentId);
   }
 }
 
@@ -114,7 +117,7 @@ function onHoverEnd() {
     props.action.componentId &&
     componentsStore.allComponentsById[props.action.componentId]
   ) {
-    componentsStore.setHoveredComponentId(null);
+    viewStore.setHoveredComponentId(null);
   }
 }
 </script>

app/web/src/components/Actions/ActionWidget.vue

@@ -51,7 +51,8 @@ import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useActionsStore } from "@/store/actions.store";
 import { Action } from "@/api/sdf/dal/func";
-import { useComponentsStore } from "@/store/components.store";
+import { useViewsStore } from "@/store/views.store";
+import { ComponentType } from "@/api/sdf/dal/schema";
 import StatusIndicatorIcon from "../StatusIndicatorIcon.vue";
 import {
   DiagramGroupData,
@@ -68,8 +69,8 @@ const props = defineProps<{
   binding: BindingWithDisplayName;
 }>();
 
-const componentsStore = useComponentsStore();
-const { selectedComponent } = storeToRefs(componentsStore);
+const viewStore = useViewsStore();
+const { selectedComponent } = storeToRefs(viewStore);
 const actionsStore = useActionsStore();
 const router = useRouter();
 
@@ -92,7 +93,10 @@ function clickHandler() {
 }
 
 function onClickView() {
-  if (props.binding) {
+  if (
+    props.binding &&
+    selectedComponent.value?.def.componentType !== ComponentType.View
+  ) {
     router.push({
       name: "workspace-lab-assets",
       query: {

app/web/src/components/AssetActionsDetails.vue

@@ -2,9 +2,7 @@
   <div class="h-full relative">
     <TabGroup
       variant="secondary"
-      :startSelectedTabSlug="
-        componentsStore.detailsTabSlugs[1] || 'resource-actions'
-      "
+      :startSelectedTabSlug="viewStore.detailsTabSlugs[1] || 'resource-actions'"
       marginTop="2xs"
       @update:selectedTab="onTabSelected"
     >
@@ -43,10 +41,10 @@
 import { computed, ref, watch } from "vue";
 import * as _ from "lodash-es";
 import { TabGroup, TabGroupItem } from "@si/vue-lib/design-system";
-import { useComponentsStore } from "@/store/components.store";
 import { useFuncStore } from "@/store/func/funcs.store";
 import EmptyStateIcon from "@/components/EmptyStateIcon.vue";
 import ActionWidget from "@/components/Actions/ActionWidget.vue";
+import { useViewsStore } from "@/store/views.store";
 import ComponentDetailsResource from "./ComponentDetailsResource.vue";
 import {
   DiagramGroupData,
@@ -58,17 +56,17 @@ const props = defineProps<{
 }>();
 
 const funcStore = useFuncStore();
-const componentsStore = useComponentsStore();
+const viewStore = useViewsStore();
 
 const tabsRef = ref<InstanceType<typeof TabGroup>>();
 function onTabSelected(newTabSlug?: string) {
-  componentsStore.setComponentDetailsTab(newTabSlug || null);
+  viewStore.setComponentDetailsTab(newTabSlug || null);
 }
 
 const bindings = computed(() => funcStore.actionBindingsForSelectedComponent);
 
 watch(
-  () => componentsStore.selectedComponentDetailsTab,
+  () => viewStore.selectedComponentDetailsTab,
   (tabSlug) => {
     if (tabSlug?.startsWith("resource-")) {
       tabsRef.value?.selectTab(tabSlug);

app/web/src/components/AssetDiffDetails.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    v-if="selectedComponent && selectedComponent.def.changeStatus !== 'deleted'"
+    v-if="
+      selectedComponent &&
+      'changeStatus' in selectedComponent.def &&
+      selectedComponent.def.changeStatus !== 'deleted'
+    "
     class="h-full relative"
   >
     <ErrorMessage :requestStatus="diffReqStatus" />
@@ -46,15 +50,17 @@ import { ErrorMessage } from "@si/vue-lib/design-system";
 import CodeViewer from "@/components/CodeViewer.vue";
 import { useComponentsStore } from "@/store/components.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useViewsStore } from "@/store/views.store";
 
 const componentsStore = useComponentsStore();
+const viewStore = useViewsStore();
 const changeSetsStore = useChangeSetsStore();
 
-const selectedComponentId = computed(() => componentsStore.selectedComponentId);
-const selectedComponent = computed(() => componentsStore.selectedComponent);
+const selectedComponentId = computed(() => viewStore.selectedComponentId);
+const selectedComponent = computed(() => viewStore.selectedComponent);
 
 const selectedComponentDiff = computed(
-  () => componentsStore.selectedComponentDiff,
+  () => componentsStore.componentDiffsById[viewStore.selectedComponentId || ""],
 );
 
 const diffReqStatus = componentsStore.getRequestStatus(

app/web/src/components/AttributesPanel/AttributesPanel.vue

@@ -83,8 +83,8 @@ import {
   LoadingMessage,
   themeClasses,
 } from "@si/vue-lib/design-system";
-import { useComponentsStore } from "@/store/components.store";
 import { useComponentAttributesStore } from "@/store/component_attributes.store";
+import { useViewsStore } from "@/store/views.store";
 import TreeFormItem from "./TreeFormItem.vue";
 import AttributesPanelCustomInputs from "./AttributesPanelCustomInputs.vue";
 
@@ -94,8 +94,8 @@ const rootRef = ref<HTMLDivElement>();
 const SHOW_DEBUG_TREE = false;
 
 // NON-REACTIVE component id. This works because the parent has a :key which rerenders if the selected component changes
-const componentsStore = useComponentsStore();
-const componentId = componentsStore.selectedComponent?.def.id;
+const viewStore = useViewsStore();
+const componentId = viewStore.selectedComponent?.def.id;
 if (!componentId) {
   throw new Error("Do not use this component without a selectedComponentId");
 }

app/web/src/components/AttributesPanel/AttributesPanelCustomInputs.vue

@@ -50,6 +50,7 @@
           configurationFrameUp: 'Up Frame',
           configurationFrameDown: 'Down Frame',
           aggregationFrame: 'Frame',
+          view: 'View',
         }[siValues.type]
       "
       size="lg"
@@ -99,13 +100,16 @@ import {
 import { useComponentsStore } from "@/store/components.store";
 import { useComponentAttributesStore } from "@/store/component_attributes.store";
 import { ComponentType } from "@/api/sdf/dal/schema";
+import { useViewsStore } from "@/store/views.store";
+import { DiagramViewData } from "../ModelingDiagram/diagram_types";
 
+const viewStore = useViewsStore();
 const componentsStore = useComponentsStore();
-const componentId = componentsStore.selectedComponent?.def.id;
+const componentId = viewStore.selectedComponent?.def.id;
 if (!componentId) {
   throw new Error("Do not use this component without a selectedComponentId");
 }
-const component = componentsStore.selectedComponent;
+const component = viewStore.selectedComponent;
 
 const attributesStore = useComponentAttributesStore(componentId || "NONE");
 
@@ -117,7 +121,10 @@ const siProps = computed(() => attributesStore.siTreeByPropName);
 // in case in the future we may want to show more info (like where the value is coming from, its update status, etc...)
 const siValuesFromStore = computed(() => ({
   name:
-    (siProps.value?.name?.value?.value as string) || component.def.displayName,
+    (siProps.value?.name?.value?.value as string) ||
+    ("displayName" in component.def && component.def.displayName) ||
+    ("name" in component.def && component.def.name) ||
+    "",
   color: (siProps.value?.color?.value?.value as string) || component.def.color,
   type:
     (siProps.value?.type?.value?.value as ComponentType) ||
@@ -137,6 +144,7 @@ watch(
   { deep: true },
 );
 function updateSiProp(key: keyof typeof siValues) {
+  if (component instanceof DiagramViewData) return;
   if (key === "name") siValues[key] = siValues[key].trim();
 
   const newVal = siValues[key];

app/web/src/components/AttributesPanel/TreeFormItem.vue

@@ -835,17 +835,16 @@ import {
   AttributeTreeItem,
   useComponentAttributesStore,
 } from "@/store/component_attributes.store";
-import { useComponentsStore } from "@/store/components.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { Secret, useSecretsStore } from "@/store/secrets.store";
+import { useViewsStore } from "@/store/views.store";
 import {
   PropertyEditorProp,
   PropertyEditorPropKind,
   PropertyEditorPropWidgetKind,
   PropertyEditorValue,
   ValidationOutput,
 } from "@/api/sdf/dal/property_editor";
-import TreeFormItem from "./TreeFormItem.vue"; // eslint-disable-line import/no-self-import
 import CodeEditor from "../CodeEditor.vue";
 import SecretsModal from "../SecretsModal.vue";
 import SourceIconWithTooltip from "./SourceIconWithTooltip.vue";
@@ -959,9 +958,9 @@ const headerHasContent = computed(() => {
 const rootCtx = props.context();
 
 // not reactive - and we know it's populated - since the parent will rerender if it changes
-const componentsStore = useComponentsStore();
+const viewStore = useViewsStore();
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const componentId = componentsStore.selectedComponentId!;
+const componentId = viewStore.selectedComponentId!;
 
 const changeSetsStore = useChangeSetsStore();
 const attributesStore = useComponentAttributesStore(componentId);