Merge branch 'dgoepp/config-modules' into 'master'
Make all gadgets configurable See merge request behaviors-ai/the_dashboard!2
Showing
| ... | ... | @@ -7,6 +7,7 @@ |
| "@trendmicro/react-sidenav": "^0.4.5", | ||
| "@types/d3-array": "^1.2.6", | ||
| "@types/roslib": "^0.18.3", | ||
| "bootstrap": "^4.3.1", | ||
| "d3": "^5.8.0", | ||
| "d3-scale": "^2.2.2", | ||
| "flexlayout-react": "^0.3.3", | ||
| ... | ... | @@ -16,6 +17,7 @@ |
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.7.0", | ||
| "react-jsonschema-form": "^1.5.0", | ||
| "react-numeric-input": "^2.2.3", | ||
| "react-scripts": "^3.0.1", | ||
| "react-sizeme": "^2.5.2", | ||
| ... | ... |
public/images/default.svg
0 → 100644
| import React, {Component} from 'react' | ||
| import {decorate, observable} from 'mobx' | ||
| import {decorate, observable, computed} from 'mobx' | ||
| import {observer} from 'mobx-react' | ||
| import * as d3 from 'd3' | ||
| import {defaultConfig} from '../utils/configurationHelpers' | ||
| import LinearLayout from '../utils/LinearLayout' | ||
| import { extent } from '../utils/extent'; | ||
| import { getBoredom, getIValence, getEValence } from './accessors'; | ||
| ... | ... | @@ -13,10 +14,50 @@ import { Backgrounds, Iteration, Actions, Mood, |
| class InteractionTraceStore { | ||
| currentInteraction = null; | ||
| showInteraction = false; | ||
| config = {}; | ||
| configSchema = { | ||
| title: "Interaction trace", | ||
| type: "object", | ||
| properties: { | ||
| maxBoredom: { | ||
| title: "Maximal expected value for the boredom (used for scaling)", | ||
| type: "integer", | ||
| default: 2, | ||
| }, | ||
| nbPrimitiveActions: { | ||
| title: "How many primitive actions are displayed", | ||
| type: "integer", | ||
| default: 3, | ||
| }, | ||
| widthInEm: { | ||
| title: "The width of each column in em units", | ||
| type: "number", | ||
| default: 2.5, | ||
| }, | ||
| debug: { | ||
| title: "Debug mode", | ||
| type: "boolean", | ||
| default: false | ||
| } | ||
| } | ||
| }; | ||
| readme = ( | ||
| <div className="about"> | ||
| <h1>Trace of the reasoning process performed by the agent</h1> | ||
| <p>The <b>mood</b> represents the effect of the <b>valence</b> on the mood of the agent.</p> | ||
| <h2>Boredom</h2> | ||
| <p> | ||
| Observe the evolution of the <b>interactions</b> performed by the agent. <b>Intended</b> interactions are the | ||
| interactions the agent plans to perform whereas <b>enacted</b> interactions are the interactions actually | ||
| performed in the physical world of the agent. An interaction is composed of an <b>action</b> and a | ||
| <b>valence</b>, the valence being dependent of the response from the environment. | ||
| </p> | ||
| </div>); | ||
| } | ||
| decorate(InteractionTraceStore, { | ||
| currentInteraction: observable, | ||
| showInteraction: observable, | ||
| config: observable, | ||
| }) | ||
| const InteractionTrace = observer( | ||
| ... | ... | @@ -26,11 +67,12 @@ class InteractionTrace extends Component { |
| super(props); | ||
| this.interactionStore = new InteractionTraceStore(); | ||
| this.props.store.components['interactionTrace'] = this.interactionStore; | ||
| this.props.store.components['int-trace'] = this.interactionStore; | ||
| // Fill the undefined fields of the configuration object with their default values. | ||
| defaultConfig(this.interactionStore); | ||
| // Use the margin convention practice | ||
| // Use the margin convention practice of D3 | ||
| this.margin = {top: 20, right: 30, bottom: 20, left: 20}; | ||
| // this.margin = {top: 0, right: 0, bottom: 0, left: 0}; | ||
| // Blanck space between each element of the figure | ||
| this.spacing = {v: 20, h: 15}; | ||
| ... | ... | @@ -54,37 +96,37 @@ class InteractionTrace extends Component { |
| .ratioCell(0.5) // Row for the valences (takes a ratio of the avalable space) | ||
| .fixedCell(75); // Row for the actions (temporary value, updated later in function of this.em) | ||
| // Value for the boredom at which we plot a red line (showing max value) | ||
| this.maxBoredom = 2; | ||
| // How many primitive actions (at least) we want to display | ||
| this.nbPrimitiveActions = 3; | ||
| // Will store the conversion from 1em in px for the LabelColumn. | ||
| // This is a tricky trick to set the size of the LabelColumn to match with the longest chain of actions that | ||
| // it will have to show. | ||
| // Will store the conversion from 1em in px. We have to assume that this computation is approximative. | ||
| this.em = undefined; | ||
| // In debug mode, we add bounding boxes for the different areas of this figure | ||
| this.debug = false; | ||
| // Other parameter: how many em the minimal column width has to be (function minXWidth). | ||
| } | ||
| // The smallest allowed space around each point on the x axis. | ||
| minXWidth() { | ||
| return 2.5*this.em; | ||
| /** In debug mode, we add bounding boxes for the different areas of this figure */ | ||
| get debug() { | ||
| return this.interactionStore.config.debug; | ||
| } | ||
| /** A red line, showing the maximum accepted boredom level, will be displayed using this value */ | ||
| get maxBoredom() { | ||
| return this.interactionStore.config.maxBoredom; | ||
| } | ||
| /** How many primitive actions (at least) we want to display */ | ||
| get nbPrimitiveActions() { | ||
| return this.interactionStore.config.nbPrimitiveActions; | ||
| } | ||
| /** The smallest allowed space around each point on the x axis. */ | ||
| get minXWidth() { | ||
| < |