EBA UI is implemented using React.js as the foundation library. Official React.js documentation can be found here. All data snippets you can see in the conversation, content or graph areas are implemented using corresponding React.js components.
We use auto discovery for data visualization components: give your component a name following the following convention: <concept namespace>_<concept name><suffix> where suffix can be one of:
Data – will be used both in conversation area and Knowledge GraphNode – will be used in Knowledge Graph onlyContent – will be used on Content tab and in full screen mode.Note that you likely want to use multiple suffix types for the same concept. For example, if you are rendering data for weather, you will likely want to show this both within the chat panel as well as the content panel. A concise, largely textual representation of the weather can be provided within weather_WeatherData, while a larger, graphical representation will be provided within weather_WeatherContent.
The following properties will be given to your component in @props:
data – concept’s data in JSONnode – information space nodecolors – d3 ordinal colors you can use as the consistent paletteUnder any circumstances UI component must not modify data passed through @props.
As a cautionary note, it is important to understand that the UI components of all agents are gathered and run in the same browser environment. Consequently, we encourage developers to employ the appropriate namespacing for their components and to implement their assets strictly to visualize their own data. The rule here is that developers should respect other components and styles within the system so as to prevent any interference.
The following packages are available out of the box for front-end assets and can be used within your front end asset codes.
Core
Util
Internationalization
Graphs, charts, editors, and more
EBA provides global functions for rendering primitive data types which are available for frontend assets. A subset of common used functions are listed here:
renderText(field) – used to render long string values in a way that is suitable for table columns; globally replaces _ with _\u200brenderBoolean(field) – renders the boolean value based on the user’s locale, e.g. with locale: de_DE => renderBoolean(true) => 'wahr'renderDecimal(field) – renders the number value based on the user’s locale, e.g. locale: de => renderDecimal(17.34) => '17,34'renderPercent(field) – renders the percent value based on the user’s locale, e.g. locale: de => renderPercent(34.4) => '34,4%'renderCurrency(field, currency='USD') – renders the currency value based on the user’s locale, e.g. locale: de => renderCurrency(17.34, 'EUR') => '17,34 EUR'renderDate(field) – renders the date value based on the user’s locale, e.g. locale: fr => renderDate(1549369035) => '5 février 2019'.renderDuration(field) – renders the duration value based on the user’s locale (time units are pretty well standardized), e.g. locale: fr => renderDuration(0.12) => '120 ms'Note: renderDate can work with Javascript Dates, Numbers, and Strings and, in the case the input is a number, we expect its value to be in terms of seconds.
Note: Locale is taken from browser, and defaults to en-us.
EBA provides a set of global objects which are available for frontend assets.
bridge object enables communication between EBA frotend and backend. Most commonly this module is used to generate a question to the backend from an event handler on the client side.
.trigger('ask', question) – triggers an event to ask EBA a question, bridge.trigger('ask', 'Tell me a joke') will execute the question Tell me a joke in the EBA reasoning pipeline..trigger('showDetails', detailsObject) – triggers an event which passes data from Data component to Content components. This is useful in cases where the Content components is meant to show the details of a single data item which is selected from the content view (such behavior can be viewed by our Docs agent), e.g. bridge.trigger "showDetails", {id: @props.id, node: @props.node, data: @props.data, item: item} executed from the Data component will enable the Content component to show details for item.R global object for creating DOM elements given set of arguments, e.g. R.p null, "Hello World" creates <p>Hello World</p>.React global object used in React library$ global object used in JQuery_ global object used in lodashOur team provides users with a few pre-built and configurable react components that are generic across any application domain. We intend the detail these components and their usage within this document.
In particular, we support the following components:
EBA provides a few convenience mechanisms for formatting NL messages: