How to use the @hpcc-js/layout.Surface function in @hpcc-js/layout

context._ddlVisualizations.forEach(function (viz) {
                removedMap.remove(viz.id);
                if (!context._marshaller.widgetMappings().get(viz.id)) {
                    //  New widget  ---
                    viz.newWidgetSurface = null;
                    if (viz.widget instanceof Surface || viz.widget.classID() === "composite_MegaChart") {
                        viz.newWidgetSurface = viz.widget;
                    } else {
                        viz.newWidgetSurface = new Surface()
                            .widget(viz.widget)
                            ;
                    }
                    viz.newWidgetSurface.title(viz.title);
                    viz.widget.size({ width: 0, height: 0 });
                }
            });
            context._ddlPopupVisualizations.forEach(function (viz) {

.data(data.ND.subjects.data)
                                            )
                                        )
                                        .pushListItem(new Accordion()
                                            .pushListItem(new Line()
                                                .columns(data.ND.subjects.columns)
                                                .data(data.ND.subjects.data)
                                            )
                                        )
                                        .pushListItem(new Accordion()
                                            .pushListItem(new Line()
                                                .columns(data.ND.subjects.columns)
                                                .data(data.ND.subjects.data)
                                            )
                                            .pushListItem(
                                                new Surface()
                                                    .size({ height: 200, width: 200 })
                                                    .title("Hello and Welcome!")
                                                    .widget(new Line()
                                                        .columns(data.ND.subjects.columns)
                                                        .data(data.ND.subjects.data)
                                                    )
                                            )
                                        )
                                );
                                break;
                            case Border:
                                render(new Border()
                                    .setContent("top", new Pie()
                                        .columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    )

.columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    )
                                    ));
                                break;
                            case Modal:
                                render(new Modal()
                                    .widget(new Pie()
                                        .columns(data.TwoD.subjects.columns)
                                        .data(data.TwoD.subjects.data)
                                    )
                                );
                                break;
                            case Popup:
                                render(new Popup()
                                    .widget(new Surface()
                                        .widget(new Icon()
                                            .faChar("\uF007")
                                        )
                                    )
                                );
                                break;
                            case Tabbed:
                                render(new Tabbed()
                                    .addTab(new Pie()
                                        .columns(data.TwoD.subjects.columns)
                                        .data(data.TwoD.subjects.data)
                                        , "Pie Chart", true)
                                    .addTab(
                                        new Line()
                                            .columns(data.ND.subjects.columns)
                                            .data(data.TwoD.subjects.data)

constructor() {
        super();

        this.value("^");

        const context = this;
        this._popupSurface = new Surface()
            .surfaceBackgroundColor("rgb(234, 249, 255)")
            .buttonAnnotations([
                {
                    id: "",
                    label: "\uf00d",
                    width: 20,
                    padding: "0px 5px",
                    class: "close",
                    font: "FontAwesome"
                }
            ])
            .on("click", function (ann) {
                if (ann.class === "close") {
                    context._popup
                        .visible(false)
                        .popupState(false)