ixa 2.0.0-beta2

A framework for building agent-based models
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

import { Fragment, useEffect, useState } from "react";
import { html } from "htm/react";
import { useAppState } from "./app-state.js";
import { PeopleChartsContainer } from "./PeopleCharts.js";

function Population() {
  const { generation, api } = useAppState();
  const [population, setPopulation] = useState(0);
  useEffect(() => {
    api.getPopulation().then((p) => setPopulation(p));
  }, [generation]);

  return html`
    <dl>
      <dt>Population:</dt>
      <dd>${population}</dd>
    </dl>
  `;
}

function GlobalSettings() {
  const { generation, api } = useAppState();
  // This is an array of [propertyName, value] pairs because we want to
  // preserve the order of the chosen property names.
  const [settings, setSettings] = useState([]);

  useEffect(() => {
    (async () => {
      const newSettings = [];
      const globalProperties = await api.getGlobalSettingsList();
      for (const propertyName of globalProperties) {
        const value = await api.getGlobalSettingValue(propertyName);
        newSettings.push([propertyName, value]);
      }
      setSettings(newSettings);
    })();
  }, [generation]);

  return html`
    <div className="settings">
      <h2>Global Settings</h2>
      <ul>
        ${settings.map(
          ([propertyName, value]) => html` <li key=${propertyName}>
            <span className="key">${propertyName}</span>: ${value}
          </li>`
        )}
      </ul>
    </div>
  `;
}

function PersonProperties() {
  const { generation, api } = useAppState();
  const [properties, setProperties] = useState([]);

  useEffect(() => {
    api.getPeoplePropertiesList().then((p) => setProperties(p));
  }, [generation]);

  return html`
    <div className="settings">
      <h2>Person Properties</h2>
      <ul>
        ${properties.map(
          (property) => html` <li key=${property}>
            <span className="key">${property}</span>
          </li>`
        )}
      </ul>
    </div>
  `;
}

function NextButton() {
  const { goNext, isLoading } = useAppState();
  return html` <button onClick=${() => goNext()}>Advance time</button> `;
}

function App() {
  const { currentTime, isLoading } = useAppState();
  return html`
    <${Fragment}>
      <header>
        <div id="logo">
          <a href="https://github.com/cdcgov/ixa" target="_blank">
            <img src="ixa.png" className=${`logo${
              isLoading ? " spin" : ""
            }`} alt="Ixa logo" />
          </a>
        </div>
        <div>
          <h1>Ixa Debugger</h1>
        </div>
        <div>Current time: <strong>${currentTime.toFixed(1)}</strong></div>
        <div><${NextButton} /></div>
      </header>
      <div className="body-wrapper">
        <aside>
          <div className="panel">${html`<${Population} />`}</div>
          <div className="panel">${html`<${GlobalSettings} />`}</div>
          <div className="panel">${html`<${PersonProperties} />`}</div>
        </aside>
        <main>${html`<${PeopleChartsContainer} />`}</main>
      </div>
      <div className=${isLoading ? "loading-cover" : ""}></div>
    </${Fragment}>
  `;
}

export default App;