Fix: creating new View fixes, and two Scenario 1 fixes

app/web/src/components/LeftPanelDrawer.vue

@@ -80,9 +80,11 @@ import {
 } from "@si/vue-lib/design-system";
 import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
 import { useViewsStore } from "@/store/views.store";
+import { useChangeSetsStore } from "@/store/change_sets.store";
 import ViewCard from "./ViewCard.vue";
 
 const viewStore = useViewsStore();
+const changeSetsStore = useChangeSetsStore();
 
 const emit = defineEmits<{
   (e: "closed"): void;
@@ -116,7 +118,13 @@ const create = async () => {
   if (!viewName.value) {
     labelRef.value?.setError("Name is required");
   } else {
+    const onHead = changeSetsStore.headSelected;
+    // creating a view will force a changeset if you're on head
     const resp = await viewStore.CREATE_VIEW(viewName.value);
+    // while awaiting CREATE_VIEW, the changeSet changes
+    // and the viewStore we _currently_ have is still the HEAD viewStore
+    // so we need to keep that in a variable
+    if (onHead) return;
     if (resp.result.success) {
       modalRef.value?.close();
       viewStore.selectView(resp.result.data.id);

app/web/src/components/ModelingDiagram/ModelingDiagram.vue

@@ -1508,6 +1508,7 @@ const currentSelectionMovableElements = computed(() => {
 
 const findChildrenByBoundingBox = (
   el: DiagramNodeData | DiagramGroupData,
+  allowDeletedChildrenToBeFilteredOut: boolean,
 ): (DiagramNodeData | DiagramGroupData | DiagramViewData)[] => {
   const cRect = el.def.isGroup
     ? viewsStore.groups[el.def.id]
@@ -1526,16 +1527,18 @@ const findChildrenByBoundingBox = (
     if (rectContainsAnother(rect, _r)) {
       const component = componentsStore.allComponentsById[id];
       if (component) {
-        if (
-          "changeStatus" in component.def &&
-          component.def.changeStatus === "deleted"
-        )
-          return;
-        if (
-          "fromBaseChangeSet" in component.def &&
-          component.def.fromBaseChangeSet
-        )
-          return;
+        if (allowDeletedChildrenToBeFilteredOut) {
+          if (
+            "changeStatus" in component.def &&
+            component.def.changeStatus === "deleted"
+          )
+            return;
+          if (
+            "fromBaseChangeSet" in component.def &&
+            component.def.fromBaseChangeSet
+          )
+            return;
+        }
         nodes.push(component);
       }
     }
@@ -1579,6 +1582,7 @@ function beginDragElements() {
     if (el.def.componentType !== ComponentType.View) {
       const childs = findChildrenByBoundingBox(
         el as DiagramNodeData | DiagramGroupData,
+        true,
       );
       childs.forEach((c) => children.add(c));
     }
@@ -2915,7 +2919,7 @@ const groups = computed(() => {
   );
   const ancestryByBounds = new DefaultMap<ComponentId, ComponentId[]>(() => []);
   frames.forEach((g) => {
-    const childIds = findChildrenByBoundingBox(g).map((el) => el.def.id);
+    const childIds = findChildrenByBoundingBox(g, false).map((el) => el.def.id);
     childIds.forEach((child) => {
       const ancestors = ancestryByBounds.get(child);
       ancestors.push(g.def.id);

app/web/src/pages/WorkspaceSinglePage.vue

@@ -130,6 +130,7 @@ import {
   VormInput,
 } from "@si/vue-lib/design-system";
 import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useViewsStore } from "@/store/views.store";
 import { useWorkspacesStore } from "@/store/workspaces.store";
 import { useAuthStore } from "@/store/auth.store";
 import AppLayout from "@/components/layout/AppLayout.vue";
@@ -191,13 +192,30 @@ function handleUrlChange() {
   const changeSetId = route.params.changeSetId as string | undefined;
   if ([undefined, "null", "undefined", "auto"].includes(changeSetId ?? "")) {
     const id = changeSetsStore.getAutoSelectedChangeSetId();
+    const newChangeSetId =
+      id === false || id === changeSetsStore.headChangeSetId ? "head" : id;
+
+    const viewId = route.params.viewId as string | undefined;
+    if (viewId) {
+      const viewStore = useViewsStore(newChangeSetId);
+      if (!viewStore.viewsById[viewId]) {
+        delete route.params.viewId;
+        const defaultView =
+          viewStore.viewList.find((v) => v.id === viewId) ||
+          viewStore.viewList[0];
+        if (viewStore.outlinerViewId === viewId)
+          viewStore.outlinerViewId = defaultView?.id ?? null;
+        if (viewStore.selectedViewId === viewId)
+          if (defaultView?.id) viewStore.selectView(defaultView.id);
+          else viewStore.clearSelectedView();
+      }
+    }
 
     router.replace({
       name: route.name, // eslint-disable-line @typescript-eslint/no-non-null-assertion
       params: {
         ...route.params,
-        changeSetId:
-          id === false || id === changeSetsStore.headChangeSetId ? "head" : id,
+        changeSetId: newChangeSetId,
       },
       query: { ...route.query },
     });

app/web/src/store/views.store.ts

@@ -616,6 +616,13 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           // to begin, and then adjust it via delta when things move
           this.sockets = view.sockets;
         },
+        clearSelectedView() {
+          this.selectedViewId = null;
+          this.sockets = {};
+          this.components = {};
+          this.groups = {};
+          this.viewNodes = {};
+        },
         async selectView(id: ViewId) {
           const view = this.viewsById[id];
           if (view) {
@@ -753,11 +760,6 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
             method: "post",
             url: API_PREFIX,
             params: { name, clientUlid },
-            onSuccess: (view) => {
-              const idx = this.viewList.findIndex((v) => v.name === name);
-              // confirming we dont already have the data
-              if (idx === -1) this.viewList.push(view);
-            },
           });
         },
         async UPDATE_VIEW_NAME(view_id: ViewId, name: string) {
@@ -1740,6 +1742,11 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                     finalGeo.height = node.height;
                     finalGeo.width = node.width;
                     view.components[data.component.id] = finalGeo as IRect;
+                    for (const [key, loc] of Object.entries(
+                      setSockets(node, finalGeo),
+                    )) {
+                      view.sockets[key] = loc;
+                    }
                   } else {
                     if (!finalGeo.width) finalGeo.width = 500;
                     if (!finalGeo.height) finalGeo.height = 500;
@@ -1748,6 +1755,15 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                       size: finalGeo.width * finalGeo.height,
                       zIndex: 0,
                     };
+                    const node = processRawComponent(
+                      data.component,
+                      componentsStore.rawComponentsById,
+                    ) as DiagramGroupData;
+                    for (const [key, loc] of Object.entries(
+                      setSockets(node, finalGeo),
+                    )) {
+                      view.sockets[key] = loc;
+                    }
                   }
                 });
                 this.setGroupZIndex();