How to use the esp-js-ui.Logger.create function in esp-js-ui

import { observeEvent } from 'esp-js';
import { viewBinding } from 'esp-js-react';
import { RegionManager } from 'esp-js-ui';
import CashTileView from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import CashTileState from './cashTileState';

let _log = Logger.create('CashTileModel');
let _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export default class CashTileModel extends ModelBase {
    private _regionManager:RegionManager;
    private _initialState:CashTileState;
    constructor(
        router,
        regionManager:RegionManager,
        initialState:CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }
    public getTitle(): string {
        return 'Cash Tile';

import {observeEvent} from 'esp-js';
import {viewBinding} from 'esp-js-react';
import {RegionManager} from 'esp-js-ui';
import {CashTileView} from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import {CashTileState} from './cashTileState';

const _log = Logger.create('CashTileModel');
const _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export class CashTileModel extends ModelBase {
    private _regionManager: RegionManager;
    private _initialState: CashTileState;

    constructor(
        router,
        regionManager: RegionManager,
        initialState: CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

// This class shows how an OO model can interop with a polimer immurable model
import {Logger} from 'esp-js-ui';
import {DateSelectorState} from './dateSelectorState';
import {DisposableBase, observeEvent, Router} from 'esp-js';
import {StateHandlerModel} from 'esp-js-polimer';
import {DateSelectorEvents} from '../../events';

const _log = Logger.create('CashTile-DateSelectorModel');

export class DateSelectorModel extends DisposableBase implements StateHandlerModel {
    private _currentState: DateSelectorState;

    constructor(private _modelId: string, private _router: Router) {
        super();
    }

    @observeEvent(DateSelectorEvents.tenorDateChanged)
    _onTenorDateChanged(event: DateSelectorEvents.TenorDateChanged) {
        let resolvedDate: Date;
        if (event.tenor === '1m') {
            resolvedDate = new Date();
            resolvedDate.setDate(resolvedDate.getDate()+7);
        }
        this._currentState = {

import {PolimerHandlerMap} from 'esp-js-polimer';
import {
    Logger
} from 'esp-js-ui';
import {ReferenceDataEvents} from '../../events';
import {CashTileModel} from '../cashTileModel';

const _log = Logger.create('CashTile-ReferenceDataState');

export interface ReferenceDataState {
    currencyPairs: string[];
}

export const defaultReferenceDataStateFactory = (): ReferenceDataState => {
    return {
        currencyPairs: ['EURUSD', 'USDJPY', 'EURGBP']
    };
};

export const referenceDataStateHandlerMap: PolimerHandlerMap = {
    [ReferenceDataEvents.currencyPairsUpdated]: (draft: ReferenceDataState, event: ReferenceDataEvents.CurrencyPairsUpdated) => {
        _log.info(`Adding new currenty pairs ${event.newPairs}`, event.newPairs);
        draft.currencyPairs = event.newPairs;
    }

import {viewBinding} from 'esp-js-react';
import {ShellView} from '../views/shellView';
import {SplashScreenModel, SplashScreenState} from './splashScreenModel';
import {
    Logger,
    ModelBase,
    MultiItemRegionModel,
    SingleItemRegionModel,
    ModuleLoader,
    IdFactory,
    ModuleLoadResult,
    ModuleChangeType
} from 'esp-js-ui';
import {TradingModule} from '../../trading-module/tradingModule';

const _log = Logger.create('ShellModel');

@viewBinding(ShellView)
export class ShellModel extends ModelBase {
    public splashScreen: SplashScreenModel;

    constructor(router,
                private _moduleLoader: ModuleLoader,
                private _workspaceRegion: MultiItemRegionModel,
                private _blotterRegion: SingleItemRegionModel
    ) {
        super(IdFactory.createId('shellModelId'), router);
        this.splashScreen = {
            state: SplashScreenState.Default
        };
    }

MultiItemRegionModel,
    SingleItemRegionModel,
    LiteralResolver,
    SystemContainerConfiguration,
    SystemContainerConst,
    ModuleLoader,
    ModuleDescriptor,
    ModuleLoadChange
} from 'esp-js-ui';
import ShellModel from './models/shellModel';
import ShellModuleContainerConst from './shellModuleContainerConst';
import RegionNames from './regionNames';
import {Router} from 'esp-js';
import TradingModule from '../trading-module/tradingModule';

let _log = Logger.create('ShellBootstrapper');

class ShellBootstrapper {
    private _container:Container;
    private _moduleLoader:ModuleLoader;

    start() {
        this._container = new Container();
        SystemContainerConfiguration.configureContainer(this._container);
        this._configureContainer();
        this._displayShell();
    }

    _configureContainer() {
        this._container
            .register(ShellModuleContainerConst.workspace_region, MultiItemRegionModel)
            .inject(

import { viewBinding } from 'esp-js-react';
import ShellView from '../views/shellView';
import { SplashScreenModel,  SplashScreenState } from './splashScreenModel'; 
import {
    Logger,
    ModelBase,
    MultiItemRegionModel,
    SingleItemRegionModel,
    ModuleLoader,
    IdFactory,
    ModuleLoadResult,
    ModuleDescriptor
} from 'esp-js-ui';
import TradingModule from '../../trading-module/tradingModule';

let _log = Logger.create('ShellModel');

@viewBinding(ShellView)
export default class ShellModel extends ModelBase {
    public splashScreen: SplashScreenModel;

    constructor(router,
                private _moduleLoader: ModuleLoader,
                private _workspaceRegion:MultiItemRegionModel,
                private _blotterRegion:SingleItemRegionModel
    ) {
        super(IdFactory.createId('shellModelId'), router);
        this.splashScreen = {
            state: SplashScreenState.Default
        };
    }

import {
    ModuleBase,
    StateService,
    ComponentFactoryBase,
    SystemContainerConst,
    PrerequisiteRegistrar,
    Logger
} from 'esp-js-ui';
import TradingModuleDefautStateProvider from './tradingModuleDefaultStateProvider';
import TradingModuleContainerConst from './tradingModuleContainerConst';
import CashTileComponentFactory from './cash-tile/cashTileComponentFactory';
import CashTileModel from './cash-tile/models/cashTileModel';
import BlotterComponentFactory from './blotter/blotterComponentFactory';
import BlotterModel from './blotter/models/blotterModel';

let _log = Logger.create('TradingModule');

export default class TradingModule extends ModuleBase {
    _componentFactoryGroupId:string;

    constructor(container:Container, stateService:StateService) {
        super(
            'trading-module',
            container,
            stateService,
            new TradingModuleDefautStateProvider()
        );
        this._componentFactoryGroupId = uuid.v4();
    }

    static get requiredPermission():string {
        return 'fx-trading';

import {
    ModuleBase,
    StateService,
    ComponentFactoryBase,
    SystemContainerConst,
    PrerequisiteRegister,
    Logger,
    espModule
} from 'esp-js-ui';
import {TradingModuleContainerConst} from './tradingModuleContainerConst';
import {CashTileComponentFactory} from './cash-tile/cashTileComponentFactory';
import {BlotterComponentFactory} from './blotter/blotterComponentFactory';
import {BlotterModel} from './blotter/models/blotterModel';
import {TradingModuleDefaultStateProvider} from './tradingModuleDefaultStateProvider';

let _log = Logger.create('TradingModule');

@espModule('trading-module', 'Trading Module')
export class TradingModule extends ModuleBase {
    _componentFactoryGroupId: string;
    _tradingModuleDefaultStateProvider = new TradingModuleDefaultStateProvider();

    constructor(container: Container, stateService: StateService) {
        super(container, stateService);
        this._componentFactoryGroupId = uuid.v4();
    }

    protected getDefaultStateProvider() {
        return this._tradingModuleDefaultStateProvider;
    }

    configureContainer() {

import {PolimerHandlerMap} from 'esp-js-polimer';
import {
    Logger
} from 'esp-js-ui';
import {InputEvents} from '../../events';
import {CashTileModel} from '../cashTileModel';

const _log = Logger.create('CashTile-InputsState');

export interface InputsState {
    ccyPair: string;
    notional: number;
}

export const defaultInputsStateFactory = (ccyPair?: string): InputsState => {
    return {
        ccyPair: ccyPair || 'EURUSD',
        notional: 1000000
    };
};

export const inputStateHandlerMap: PolimerHandlerMap = {
    [InputEvents.changeCurrencyPair]: (draft: InputsState, event: InputEvents.CurrencyPairChangedEvent) => {
        _log.info(`Changing currency pair to ${event.newPair}`, event);