Options
All
  • Public
  • Public/Protected
  • All
Menu

The Journal class encapsulates the required information to render a Context (and its children) in an HTML document.

flux-builder's journal presentation

The class gathers:

  • an entry point context, basically the root function call
  • registered custom views associated to some particular data (usually w/ their type)

Registering a custom view

Below is an example of a module willing to provide feedbacks on a convergence process as it goes. Looking at the journal while the module is running would present a 2D graph with live updates.

The library flux-view is used in the example, the same can most likely be done with your favorite library (an HTMLElement is required at the end).

import * as Plotly from 'plotly.js-gl2d-dist-min'
import Journal from './flux-core'
import {VirtualDOM, render} from './flux-view'
import {compute} from 'somewhere'

class DataView{
     source$ = new Subject<Array<[number, number]>()
     constructor(){}
}

function journalView( data$ : Observable<Array<[number,number]>) : HTMLElement{
     let id = uuidv4()
     let vDOM : VirtualDOM = {
         id,
         class: "w-100 h-100",
         connectedCallback: (div) =>       
             elem.ownSubscription( 
                 data$.subscribe( data => Plotly.newPlot(div, data) );
             )
         }
     }
     return render(vDOM)
}

Journal.registerView<ConvergenceDataView>({
     name: 'convergence Module X',
     isCompatible: (d:unknown) => d instanceof(ConvergenceDataView),
     view: (d:ConvergenceDataView) => journalView(d.source$) 
})

 class Module extends ModuleFlux{
     // ...        
     process(data, context: Context) {

         let dataView = new DataView()

         context.info( "Live convergence result", dataView )
         // compute is supposed to run in another worker, and to provide
         // updates on convergence into dataView.source$ stream
         compute(data, dataView.source$, context).subscribe( 
             (result) => {
                 this.output$.next(result);
                 context.end()
              };
     }
 } 

Declaring data

A data structure (here DataView) need to be defined to encapsulate all the data needed by the view

Implementing a view function

A function (here journalView) is required to map the data to the view element

Registering the view

A call to registerView with the callback functions

Usage in the module

A simple context.info( "Live convergence result", dataView ) is inserting the reference on the view factory at the right location in the journal.

Hierarchy

  • Journal

Index

Constructors

Properties

Methods

Constructors

constructor

  • new Journal(__namedParameters: { entryPoint: Context; title: string }): Journal

Properties

entryPoint

entryPoint: Context

The entry point: the journal can render this context and all of its children

title

title: string

title of the journal

Static Private views

views: { description?: string; isCompatible: (data: any) => boolean; name: string; view: (data: unknown) => HTMLElement }[] = ...

Registered widgets that are used to render the data property of a Log if possible (if the function [[JournalWidget.isCompatible]] apply to this data return true).

Methods

Static getViews

  • getViews(data: unknown): { description: string; name: string; view: HTMLElement }[]
  • Returns the (instantiated) views compatible with given source data

    Parameters

    • data: unknown

      source data

    Returns { description: string; name: string; view: HTMLElement }[]

    instantiated view with name and description of the factory used

Static registerView

  • registerView<TData>(__namedParameters: { description?: string; isCompatible: (data: any) => boolean; name: string; view: (data: TData) => HTMLElement }): void
  • Register a new factory to display some data using a specific view.

    It allows for flux-pack developer (or host applications) to register custom views to help the builder of flux applications understanding module's processes.

    An example is provided in the class documentation.

    Type parameters

    • TData = any

    Parameters

    • __namedParameters: { description?: string; isCompatible: (data: any) => boolean; name: string; view: (data: TData) => HTMLElement }
      • Optional description?: string

        description

      • isCompatible: (data: any) => boolean

        a function that takes data as argument and return true if it can be processed by the factory to create a view

          • (data: any): boolean
          • Parameters

            • data: any

            Returns boolean

      • name: string

        name of the factory

      • view: (data: TData) => HTMLElement

        a function that takes a data as argument (for which isCompatibe(data) is true) and return an HTMLElement

          • (data: TData): HTMLElement
          • Parameters

            • data: TData

            Returns HTMLElement

    Returns void

Generated using TypeDoc