How to use the esp-js.observeEvent function in esp-js

export default class HeaderModel extends ModelBase {

  constructor(
    modelId:string,
    router:Router
  ) {
    super(modelId, router);
  }

  @observeEvent('init')
  _onInit() {
    _log.info(`Header model starting`);
  }

  @observeEvent('externalLinkClicked')
  _onExternalLinkClicked() {
    _log.info(`external link clicked`);
    // TODO , if in open fin deal with launching the link
  }

  @observeEvent('minimiseClicked')
  _onMinimiseClicked(e) {
    _log.info(`minimise clicked`);
    // TODO , if in open fin deal with launching the link
  }

  @observeEvent('maximiseClicked')
  _onMaximiseClicked() {
    _log.info(`maximise clicked`);
    // TODO , if in open fin deal with launching the link
  }

this.selectedEpic = null;
    }

    @esp.observeEvent(EventConsts.EPIC_SELECTED)
    _onEpicSelected(event) {
        this.selectedEpic = event.epic;
        _.forEach(this.epics, epic => {
            epic.isSelected = epic == event.epic;
        });
        if(this.selectedStory && this.selectedStory.epic !== this.selectedEpic) {
            this.selectedStory.isSelected = false;
            this.selectedStory = null;
        }
    }

    @esp.observeEvent(EventConsts.STORY_SELECTED)
    _onStorySelected(event) {
        this.selectedStory = event.story;
        _.forEach(this.allStories, story => {
            story.isSelected = story == event.story;
        });
    }

    // Gets called by the router when an event for this model has been processed by observers,
    // great place for aggregate operations and/or validation.
    postProcess() {
        this.allStories = _.reduce(
            this.epics, (result, epic) => {
                return result.concat(epic.stories);
            },
            []
        );

}
    @esp.observeEvent('MessageSent')
    _observeMessageSent(event, context, model) {
        this._messageService
            .sendMessage(event.text, model.selectedThreadId, model.messageSection.threadName)
            .subscribe(ack => {
                /* ack received from send operation */
            }
        );
    }
    @esp.observeEvent('MessagesReceived')
    _observeMessagesReceived(event, context, model) {
        this._updateMessages(model);
        this.hasChanges = true;
    }
    @esp.observeEvent('ThreadSelected',  esp.ObservationStage.committed)
    _observeThreadSelected(event, context, model) {
        this._updateMessages(model);
        this.threadName = event.threadName;
        this.hasChanges = true;
    };
    _updateMessages(model) {
        var rawMessages = model.rawMessagesByThreadId[model.selectedThreadId];
        var messages = rawMessages.map(rawMessage => {
            return new Message(
                rawMessage.id,
                rawMessage.authorName,
                rawMessage.text,
                new Date(rawMessage.timestamp));
        }).sort(function (a, b) {
            return a.time < b.time ? -1 : a.time > b.time ? 1 : 0;
        });

export const defaultRequestForQuoteStateFactory = (): RequestForQuoteState => {
    return {
        rfqId: null,
        currentQuoteId: null,
        status: RfqStatus.Idle
    };
};

export class RequestForQuoteStateHandlers {

    constructor(/* can use DI if required for readonly access to other services */) {

    }

    @observeEvent(RfqEvents.requestQuote)
    onRequestQuote(draft: RequestForQuoteState, event: RfqEvents.RequestQuoteEvent, model: CashTileModel /* , context: EventContext */) {
        _log.info(`Requesting Quote for ${model.inputs.ccyPair} ${model.inputs.notional}`);
        draft.rfqId = uuid.v4();
        draft.status = RfqStatus.Requesting;
    }

    @observeEvent(RfqEvents.rfqUpdate)
    onRfqUpdated(draft: RequestForQuoteState, event: RfqEvents.RfqUpdateEvent, model: CashTileModel /* , context: EventContext */) {
        _log.info(`Quote received. RfqId ${event.rfqId} price: ${event.quote.price}`, event);
        draft.status = event.status;
        draft.quote = event.quote;
    }

    @observeEvent(RfqEvents.cancelRfq)
    onCancelQuote(draft: RequestForQuoteState, event: RfqEvents.CancelRfqEvent, model: CashTileModel) {
        _log.info(`Passing on quote ${draft.rfqId}`, event);

export default class ChromeModel extends ModelBase {
  _openFin;
  isRunningInOpenFin;

  constructor(modelId, router, openFin) {
    super(modelId, router);
    this._openFin = openFin;
  }

  @observeEvent('init')
  _onInit() {
    _log.info('Chrome model starting');
    this.isRunningInOpenFin = this._openFin.isRunningInOpenFin;
  }

  @observeEvent('minimizeClicked')
  _onMinimizeClicked() {
    this._openFin.minimize();
  }

  @observeEvent('maximizeClicked')
  _onMaximizeClicked() {
    this._openFin.maximize();
  }

  @observeEvent('closeClicked')
  _onCloseClicked() {
    this._openFin.close();
  }

}

modelId,
    router,
    compositeStatusService,
    openFin
  ) {
    super(modelId, router);
    this._compositeStatusService = compositeStatusService;
    this._openFin = openFin;

    this.serviceLookup = new ServiceStatusLookup();
    this.isConnectedToBroker = false;
    this.shouldShowServiceStatus = false;
    this.applicationStatus = ApplicationStatusConst.Unknown;
  }

  @observeEvent('init')
  _onInit() {
    _log.info(`Footer model starting`);
    this._subscribeToConnectionStatus();
    this.isRunningInOpenFin = this._openFin && this._openFin.isRunningInOpenFin;
  }

  @observeEvent('toggleServiceStatus')
  _onToggleServiceStatus() {
    _log.debug(`toggling service status`);
    this.shouldShowServiceStatus = !this.shouldShowServiceStatus;
  }


  _subscribeToConnectionStatus() {
    this.addDisposable(
      this._compositeStatusService.serviceStatusStream.subscribeWithRouter(

}

    public get canSave() {
        return this._canSave;
    }

    public get resultsStream() {
        return this._resultsSubject.asRouterObservable(this.router);
    }

    public observeEvents() {
        this.router.addModel(this.modelId, this);
        super.observeEvents();
    }

    @observeEvent(EventConst.ITEM_NAME_CHANGED)
    private _onItemNameChanged(event) {
        this._itemName = event.itemName || '';
        this._canSave = this._itemName.length > 0;
    }

    @observeEvent(EventConst.ITEM_NAME_CANCELED)
    private _onCanceled(event) {
        this._resultsSubject.onNext({type: ItemNameDialogResultType.Canceled});
    }

    @observeEvent(EventConst.ITEM_NAME_SAVED)
    private _onSaved(event) {
        let name = this.itemName;
        this._reset();
        this._resultsSubject.onNext({type: ItemNameDialogResultType.Saved, name: name});
    }

_onAddEpic() {
        this._createEpicDialog.resultsStream
            .streamFor(this.modelId)
            .take(1)
            .subscribe(results => {
                if(results.type === ItemNameDialogResultType.Saved) {
                    var epic = new Epic(this.modelId, this.router, this._createStoryDialog, results.name);
                    epic.observeEvents();
                    this.epics.push(epic);
                }
                this._createEpicDialog.close();
            });
        this._createEpicDialog.open();
    }

    @esp.observeEvent(EventConsts.SHOW_ALL_STORIES)
    _onShowAllStories() {
        this.selectedEpic.isSelected = false;
        this.selectedEpic = null;
    }

    @esp.observeEvent(EventConsts.EPIC_SELECTED)
    _onEpicSelected(event) {
        this.selectedEpic = event.epic;
        _.forEach(this.epics, epic => {
            epic.isSelected = epic == event.epic;
        });
        if(this.selectedStory && this.selectedStory.epic !== this.selectedEpic) {
            this.selectedStory.isSelected = false;
            this.selectedStory = null;
        }
    }

return this._colour;
    }

    public get doneCount(): number {
        return this._doneCount;
    }

    public get isSelected(): boolean {
        return this._isSelected;
    }

    public set isSelected(value: boolean) {
        this._isSelected = value;
    }

    @observeEvent(EventConst.EPIC_NAME_CHANGED, epicEventPredicate)
    private _onNameChanged(event) {
        this._name = event.name;
    }

    @observeEvent(EventConst.ADD_STORY, epicEventPredicate)
    private _onAddStory() {
        this._createStoryDialog.resultsStream
            .streamFor(this.modelId)
            .take(1)
            .subscribe((results: ItemNameDialogResult) => {
                if (results.type === ItemNameDialogResultType.Saved) {
                    let story = new Story(this.modelId, this.router, this, results.name);
                    story.observeEvents();
                    this._stories = this._stories.push(story);
                }
                this._createStoryDialog.close();