How to use the @hpcc-js/common.publish function in @hpcc-js/common

return [];
        }
        return data;
    }

    rowFilter(row: object): boolean {
        const validMappings = this.validMappings();
        return validMappings.every(mapping => mapping.doFilter(row, this.sourceSelection()));
    }
}
Filter.prototype._class += " Filter";

export class Filters extends Activity {
    private _owner: View;

    @publish([], "propertyArray", "Filter", null, { autoExpand: Filter })
    filter: publish;

    constructor(owner: View) {
        super();
        this._owner = owner;
    }

    visualizationIDs(): string[] {
        return this._owner._dashboard.visualizationIDs();
    }

    visualization(sourceID: string | PropertyExt): Viz {
        return this._owner._dashboard.visualization(sourceID);
    }

    //  Activity overrides  ---

export function isDatasource(activity: Activity) {
    return activity instanceof DSPicker ||
        activity instanceof Databomb ||
        activity instanceof Form ||
        activity instanceof LogicalFile ||
        activity instanceof RoxieRequest ||
        activity instanceof HipieRequest ||
        activity instanceof WUResult;
}

export type DSPickerType = "wuresult" | "wuresult-vm" | "logicalfile" | "logicalfile-vm" | "form" | "databomb" | "hipie" | "roxie" | "roxie-vm";
let dsPickerID = 0;
export class DSPicker extends ActivitySelection {
    private _view: HipiePipeline;

    @publish("wuresult", "set", "Type", ["wuresult", "wuresult-vm", "logicalfile", "logicalfile-vm", "form", "databomb", "hipie", "roxie", "roxie-vm"])
    _type: DSPickerType; // DDL2.IDatasourceType;
    type(_?: DSPickerType/*DDL2.IDatasourceType*/): this | DSPickerType { // DDL2.IDatasourceType | this {
        if (!arguments.length) return this._type;
        this._type = _;
        switch (_) {
            case "wuresult":
                this.selection(this.activities()[0]);
                break;
            case "wuresult-vm":
                this.selection(this.activities()[6]);
                break;
            case "logicalfile":
                this.selection(this.activities()[1]);
                break;
            case "logicalfile-vm":
                this.selection(this.activities()[7]);

hasColumn() {
        return this.columns().length;
    }

    aggregate(values: Array<{ [key: string]: any }>) {
        return d3Aggr[this.aggrType() as string](values, leaf => +leaf[this.aggrColumn()]);
    }
}
AggregateField.prototype._class += " AggregateField";

//  ===========================================================================
export class GroupBy extends Activity {

    @publish([], "propertyArray", "Source Columns", null, { autoExpand: GroupByColumn })
    column: publish;
    @publish([], "propertyArray", "Computed Fields", null, { autoExpand: AggregateField })
    computedFields: publish;
    @publish(false, "boolean", "Show details")
    details: publish;
    @publish(false, "boolean", "Show groupBy fileds in details")
    fullDetails: publish;

    constructor(owner: View) {
        super();
    }

    hash(): string {
        return hashSum({
            groupBy: this.column().map(gb => gb.hash()),
            computedFields: this.computedFields().map(cf => cf.hash()),
        });
    }

fieldIDs() {
        return this._owner.fieldIDs();
    }

    field(id: string): IField | undefined {
        return this._owner.inFields().filter(field =>
            field.id === id
        )[0];
    }
}
SortColumn.prototype._class += " SortColumn";

//  ===========================================================================
export class Sort extends Activity {

    @publish([], "propertyArray", "Source Columns", null, { autoExpand: SortColumn })
    column: publish;

    constructor() {
        super();
    }

    hash(): string {
        return hashSum({
            Sort: this.column().map(sb => sb.hash())
        });
    }

    referencedFields(refs: ReferencedFields): void {
        super.referencedFields(refs);
        super.resolveInFields(refs, this.validSortBy().map(sortBy => sortBy.fieldID()));
    }

const baseUrl: string[] = [];
    const retVal: string[] = [];
    folders.forEach((folder, idx) => {
        if (idx >= depth) {
            retVal.push(href("gallery", `${baseUrl.join("/")}/${folder}`, folder));
        }
        baseUrl.push(folder);
    });
    const total = sampleFiles.filter(file => file.path.indexOf(path) === 0).length;
    retVal.push(total > 1 ? `${file} (${total})` : file);
    return retVal.join(" > ");
}

export class App extends HTMLWidget {

    @publish("", "string")
    _default: string;

    _navDiv;
    _body;
    _selectionStack = [];

    constructor() {
        super();
    }

    enter(domNode, element) {
        super.enter(domNode, element);
        this._navDiv = element.append("h3")
            .style("position", "absolute")
            .style("left", "0px")
            .style("top", "0px")

return retVal;
};

const payloadOrig = Databomb.prototype.payload;
Databomb.prototype.payload = function (this: Databomb, _?) {
    const retVal = payloadOrig.apply(this, arguments);
    if (arguments.length) {
        this.updateJsonData();
    }
    return retVal;
};

export const emptyDatabomb = new Databomb().id("Empty").payload("[]");

export class Form extends Datasource {
    @publish({}, "object", "Form object")
    payload: publish;

    constructor() {
        super();
        this.payload({
            id: 1000007,
            first_name: "John",
            last_name: "Doe",
            gender: "M"
        });
    }

    toDDL(): DDL2.IForm {
        return {
            type: "form",
            id: this.id(),

private _prevSortByDescending: boolean;

    constructor() {
        super();
        this._tag = "div";
    }

    @publish("...empty...", "string", "No Data Message")
    noDataMessage: publish;
    @publish("loading...", "string", "Loading Message")
    loadingMessage: publish;
    @publish(false, "boolean", "Enable paging")
    pagination: publish;
    @publish(false, "boolean", "Enable sorting by column")
    sortable: publish;
    @publish(null, "set", "Default 'sort by' Column ID", function () { return this.columns(); }, { optional: true })
    sortBy: publish;
    @publish(false, "boolean", "Default 'sort by' descending", null, { disable: self => !self.sortBy() })
    sortByDescending: publish;

    protected formatSortBy(): [{ property: string, descending: boolean }] | undefined {
        const idx = this.columns().indexOf(this.sortBy());
        return idx >= 0 ? [{ property: idx.toString(), descending: this.sortByDescending() }] : undefined;
    }

    enter(domNode, element) {
        super.enter(domNode, element);
        this._dgridDiv = element.append("div")
            .attr("class", "flat")
            ;
    }

import { PropertyExt, publish } from "@hpcc-js/common";
import { IField } from "@hpcc-js/dgrid";
import { hashSum } from "@hpcc-js/util";
import { Activity, ReferencedFields } from "./activity";

export type ComputedType = "=" | "*" | "/" | "+" | "-" | "scale";
export class ComputedField extends PropertyExt {
    private _owner: Project;

    @publish(null, "string", "Label", null, { optional: true })
    label: publish;
    @publish("mapping", "set", "Project type", ["=", "*", "/", "+", "-", "scale"], { optional: true, disable: w => !w.label() })
    type: publish;
    @publish(null, "set", "Param 1", function (this: ComputedField) { return this.columns(); }, { optional: false, disable: w => !w.label() })
    column1: publish;
    @publish(null, "set", "Param 2", function (this: ComputedField) { return this.columns(); }, { optional: true, disable: (w: ComputedField) => !w.label() || ["*", "/", "+", "-"].indexOf(w.type()) < 0 })
    column2: publish;
    @publish(null, "number", "Const value", null, { optional: true, disable: (w: ComputedField) => !w.label() || ["scale"].indexOf(w.type()) < 0 })
    constValue: publish;

    constructor(owner: Project) {
        super();
        this._owner = owner;
    }

    hash(): string {
        return hashSum({
            label: this.label(),
            type: this.type(),
            column1: this.column1(),
            column2: this.column2(),
            constValue: this.constValue(),

const d3Aggr: { [key: string]: AggrFunc } = {
    count: localCount,
    min: d3Min,
    max: d3Max,
    mean: d3Mean,
    median: d3Median,
    variance: d3Variance,
    deviation: d3Deviation,
    sum: d3Sum
};

export type AggregateType = "count" | "min" | "max" | "sum" | "mean" | "median" | "variance" | "deviation";
export class AggregateField extends PropertyExt {
    private _owner: GroupBy;

    @publish(null, "string", "Label", null, { optional: true, disable: (w: AggregateField) => !w.hasColumn() })
    label: publish;
    @publish("count", "set", "Aggregation Type", ["count", "min", "max", "sum", "mean", "median", "variance", "deviation"], { optional: true, disable: w => !w.label() })
    aggrType: publish;
    @publish(null, "set", "Aggregation Field", function (this: AggregateField) { return this.columns(); }, { optional: true, disable: w => !w.label() || !w.aggrType() || w.aggrType() === "count" })
    aggrColumn: publish;

    constructor(owner: GroupBy) {
        super();
        this._owner = owner;
    }

    hash(): string {
        return hashSum({
            label: this.label(),
            aggrType: this.aggrType(),
            aggrColumn: this.aggrColumn()

protected _indInner: any;
    protected _indOuter: any;
    protected _centerTextG: any;
    protected _centerText: any;
    protected _bottomTextG: any;
    protected _bottomText: any;
    protected _tooltipG: any;
    protected _mainTooltip: any;

    @publish("", "string")
    title: publish;

    @publish("", "string")
    titleDescription: publish;

    @publish(128, "number")
    maxDiameter: publish;

    @publish(0, "number")
    value: publish;

    @publish("", "string")
    valueDescription: publish;

    @publish(false, "boolean")
    showTick: publish;

    @publish(0, "number")
    tickValue: publish;

    @publish("", "string")
    tickValueDescription: publish;