Node with Custom Shape, horizontal and vertical panels with expand and collapse

I am trying to create a node with rounded rectangle as a shape. i want to achieve something with vertical expand and collapse but in my node,“auto” it keeps on stacking vertical and horizontal panel on top of eachother.

diagram.nodeTemplateMap.add(

  "SimpleNode",

  $(

    go.Node,

    "Spot",

    "Vertical",

    {

      locationSpot: go.Spot.Center,

      // margin: 20,

      isShadowed: true,

      shadowOffset: new go.Point(0, 0),

      shadowColor: "#AFBBC2",

      shadowBlur: 8,

      // background: "yellow",

    },

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(

      go.Point.stringify

    ),

    $(go.Shape, "roundedrectangle", {

      //CornerRounding: 25,

      fill: "#DCE5EA",

      // height: 108,

      width: 280,

      strokeWidth: 0,

    }),

    $(

      go.Panel,

      "Horizontal",

      {},

      $(

        go.Panel,

        "Spot",

        $(

          go.Picture,

          {

            source: "",

            height: 40,

            width: 40,

          },

          new go.Binding("source", "source")

        ),

        $(

          go.TextBlock,

          "ABVR",

          {

            margin: 2,

            editable: false,

            font: "bold 8pt Inter, sans-serif",

            name: "TEXT",

            overflow: go.TextBlock.OverflowEllipsis,

            maxLines: 1,

            width: 20,

            // background: "lightblue",

            textAlign: "center",

          },

          new go.Binding("text", "abbreviation")

        )

      ),

      $(

        go.TextBlock,

        "PLACEHOLDER",

        {

          width: 220,

          margin: 5,

          font: "bold 9pt Inter, sans-serif",

          stroke: "#344C5A",

        },

        new go.Binding("text", "techObjPlaceholderName", (t) =>

          t.toUpperCase()

        )

      )

    ),

    $(

      go.Panel,

      "Auto",

      { alignment: new go.Spot(0.5, 0.7) },

      //this is unassigned object panel

      $(

        go.Panel,

        "Horizontal",

        { opacity: 1 },

        $(go.Shape, "roundedrectangle", {

          width: 45,

          height: 45,

          margin: 5,

          fill: "white",

          strokeWidth: 1,

          stroke: "grey ",

        }),

        $(go.TextBlock, "Unassigned object", {

          width: 205,

          margin: 5,

          font: "bold 14pt Inter, sans-serif",

          opacity: 0.4,

        })

      ),

      $(

        go.Panel,

        "Horizontal",

        { opacity: 0 },

        //this panel is for product icon

        $(

          go.Panel,

          "Spot",

          { isClipping: true },

          $(go.Shape, "roundedrectangle", {

            width: 45,

            height: 45,

            margin: 5,

            fill: "white",

            strokeWidth: 1,

            stroke: "grey ",

          }),

          $(go.Picture, {

            source: "./assets/img/NEC.svg",

            width: 45,

            height: 45,

          })

        ),

        $(

          go.Panel,

          // "Auto",

          { height: 50 },

          $(

            go.Panel,

            {},

            $(go.TextBlock, "placeholder", {

              margin: new go.Margin(5, 0, 0, 10),

              width: 205,

              font: "bold 13pt Inter, sans-serif",

              // background: "blue",

            })

          ),

          $(

            go.Panel,

            {},

            $(go.TextBlock, "placeholder", {

              margin: new go.Margin(30, 0, 0, 10),

              width: 205,

              font: " 11pt Inter, sans-serif",

              // background: "green",

              stroke: "#4C606C",

            })

          )

        )

      )

    )

  )

);

here are couple of images which i want to achieve

Group 143

Group 144

There’s too much in your code for me to understand. But here’s what I would do to implement something like what you show in your sketches:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 280 },
    $(go.Shape, "RoundedRectangle",
      { fill: "#DCE5EA", strokeWidth: 0 }),
    $(go.Panel, "Vertical",
      { stretch: go.GraphObject.Horizontal },
      $(go.TextBlock, "...stuff..."),
      $(go.Panel, "Table",
        new go.Binding("itemArray", "items"),
        {
          name: "LIST",
          stretch: go.GraphObject.Horizontal,
          itemTemplate: $(go.Panel, "TableRow",
            $(go.Shape, { column: 0, width: 10, height: 10 }),
            $(go.TextBlock, { column: 1 }, new go.Binding("text")),
            $(go.Shape, { column: 2, width: 10, height: 10 }),
          )
        },
        $(go.RowColumnDefinition, { column: 0, sizing: go.RowColumnDefinition.None }),
        $(go.RowColumnDefinition, { column: 2, sizing: go.RowColumnDefinition.None })
      ),
      $("PanelExpanderButton", "LIST")
    ),
  );

  myDiagram.model = new go.GraphLinksModel([
    {
      items: [
        { text: "A" },
        { text: "B" }
      ]
    }
  ]);

Of course you’ll need to fill in the stuff at the top and the stuff in the itemTemplate.

The way how panel and table are implemented is impressive! Thanks a lot Walter :D