Having trouble connecting button signals

[jeremiahfallin]

I am trying to create a UI by adding controls directly. Things are showing up on my GUI but none of the buttons are working. I am not sure what I am doing wrong. Any help would be appreciated!

import {
  Button,
  Callable,
  Control,
  Engine,
  HBoxContainer,
  Label,
  Node2D,
  Panel,
  PanelContainer,
  printerr,
  VBoxContainer,
  Vector2,
} from "godot";

export default class Main extends Node2D {
  private researchButton: Button | null = null;
  private workshopButton: Button | null = null;
  private storyButton: Button | null = null;
  private settingsButton: Button | null = null;

  private researchPanel: Control | null = null;
  private workshopPanel: Control | null = null;
  private storyPanel: Control | null = null;
  private settingsPanel: Control | null = null;

  private contentPanels: Control[] = [];

  _ready() {
    if (Engine.is_editor_hint()) {
      return;
    }

    const uiRoot = new Control();
    uiRoot.set_name("UIRoot");
    uiRoot.set_anchors_preset(Control.LayoutPreset.PRESET_FULL_RECT);
    this.add_child(uiRoot);

    const mainLayout = new HBoxContainer();
    mainLayout.set_name("MainLayout");
    mainLayout.set_anchors_preset(Control.LayoutPreset.PRESET_FULL_RECT);
    uiRoot.add_child(mainLayout);

    const sidebar = new PanelContainer();
    sidebar.set_name("Sidebar");
    sidebar.custom_minimum_size = new Vector2(200, 0);
    sidebar.size_flags_horizontal = Control.SizeFlags.SIZE_EXPAND;
    mainLayout.add_child(sidebar);

    const menuItems = new VBoxContainer();
    menuItems.set_name("MenuItems");
    sidebar.add_child(menuItems);

    this.researchButton = new Button();
    this.researchButton.set_name("ResearchButton");
    this.researchButton.text = "Research";
    menuItems.add_child(this.researchButton);

    this.workshopButton = new Button();
    this.workshopButton.set_name("WorkshopButton");
    this.workshopButton.text = "Workshop";
    menuItems.add_child(this.workshopButton);

    this.storyButton = new Button();
    this.storyButton.set_name("StoryButton");
    this.storyButton.text = "Story";
    menuItems.add_child(this.storyButton);

    this.settingsButton = new Button();
    this.settingsButton.set_name("SettingsButton");
    this.settingsButton.text = "Settings";
    menuItems.add_child(this.settingsButton);

    const contentArea = new Control();
    contentArea.set_name("ContentArea");
    contentArea.size_flags_horizontal = Control.SizeFlags.SIZE_EXPAND_FILL;
    contentArea.set_anchors_preset(Control.LayoutPreset.PRESET_FULL_RECT);
    mainLayout.add_child(contentArea);

    this.researchPanel = new Panel();
    this.researchPanel.set_name("ResearchPanel");
    this.researchPanel.set_anchors_preset(
      Control.LayoutPreset.PRESET_FULL_RECT
    );
    const researchLabel = new Label();
    researchLabel.set_name("ResearchLabel");
    researchLabel.text = "Research";
    researchLabel.set_anchors_preset(Control.LayoutPreset.PRESET_CENTER);
    this.researchPanel.add_child(researchLabel);
    contentArea.add_child(this.researchPanel);

    this.workshopPanel = new Panel();
    this.workshopPanel.set_name("WorkshopPanel");
    this.workshopPanel.set_anchors_preset(
      Control.LayoutPreset.PRESET_FULL_RECT
    );
    const workshopLabel = new Label();
    workshopLabel.text = "Workshop Content Area";
    workshopLabel.set_anchors_preset(Control.LayoutPreset.PRESET_CENTER);
    this.workshopPanel.add_child(workshopLabel);
    contentArea.add_child(this.workshopPanel);

    // Create Story and Settings panels similarly...
    this.storyPanel = new Panel();
    this.storyPanel.set_name("StoryPanel");
    this.storyPanel.set_anchors_preset(Control.LayoutPreset.PRESET_FULL_RECT);
    const storyLabel = new Label();
    storyLabel.text = "Story Content Area";
    storyLabel.set_anchors_preset(Control.LayoutPreset.PRESET_CENTER);
    this.storyPanel.add_child(storyLabel);
    contentArea.add_child(this.storyPanel);

    this.settingsPanel = new Panel();
    this.settingsPanel.set_name("SettingsPanel");
    this.settingsPanel.set_anchors_preset(
      Control.LayoutPreset.PRESET_FULL_RECT
    );
    const settingsLabel = new Label();
    settingsLabel.text = "Settings Content Area";
    settingsLabel.set_anchors_preset(Control.LayoutPreset.PRESET_CENTER);
    this.settingsPanel.add_child(settingsLabel);
    contentArea.add_child(this.settingsPanel);

    // Store valid panels in the array
    this.contentPanels = [
      this.researchPanel,
      this.workshopPanel,
      this.storyPanel,
      this.settingsPanel,
    ];

    if (
      !this.researchButton ||
      !this.workshopButton ||
      !this.storyButton ||
      !this.settingsButton
    ) {
      printerr(
        "Error: Cannot connect signals, one or more buttons references are null!"
      );
      return;
    }

    console.log(" Connecting button signals...");
    this.researchButton.pressed.connect(
      Callable.create(this, () =>
        this._on_sidebar_button_pressed(this.researchPanel)
      )
    );
    this.workshopButton.pressed.connect(
      Callable.create(this, () =>
        this._on_sidebar_button_pressed(this.workshopPanel)
      )
    );
    this.storyButton.pressed.connect(
      Callable.create(this, () =>
        this._on_sidebar_button_pressed(this.storyPanel)
      )
    );
    this.settingsButton.pressed.connect(
      Callable.create(this, () =>
        this._on_sidebar_button_pressed(this.settingsPanel)
      )
    );
    console.log(" Button signals connected.");
  }

  _process(delta: number) {}

  private _on_sidebar_button_pressed(panel_to_show: Control | null): void {
    console.log(
      `Sidebar button pressed. Requesting panel: ${
        panel_to_show?.get_name() ?? "NULL"
      }`
    );
    if (panel_to_show) {
      this.show_panel(panel_to_show);
    } else {
      printerr("Error: _on_sidebar_button_pressed called with a null panel!");
    }
  }

  private show_panel(panel_to_show: Control | null): void {
    if (!panel_to_show) {
      console.log("show_panel called with null, hiding all panels.");
    } else {
      console.log(`Attempting to show panel: ${panel_to_show.get_name()}`);
    }

    for (const panel of this.contentPanels) {
      if (panel instanceof Control) {
        panel.visible = false;
      }
    }

    if (panel_to_show instanceof Control) {
      panel_to_show.visible = true;
      console.log(`Successfully shown panel: ${panel_to_show.get_name()}`);
    }
  }
}