The interface

epanet-js runs in one browser window. There are no separate document windows. The map fills the middle. Everything else is a bar or a panel around it. You can close the panels to give the map the whole window.

This page names each part. The rest of the help center can then say “the toolbar” or “the status bar” and mean something.

From top to bottom

Part	Where	What it holds
Menu bar	Top row	The logo, the project name, Help, language, account
Toolbar	Second row	Files, editing, operational data, simulation, panels
Map toolbar	Floating at the top of the map	Select, the area and trace tools, the drawing tools
Network Review panel	Left of the map	The five model checks
Side panel	Right of the map	The Asset and Map tabs
Bottom panel	Below the map	Data tables and the HGL profile
Status bar	Bottom of the window	Scenario, units, run status

The menu bar

The epanet-js logo at the left reopens the welcome dialog. Help > Welcome page does the same. Next to the logo is the name of the project file, with the .ejsdb extension. When the project has unsaved changes, a dot appears next to the name. When the open project is one of the demo networks, a Demo badge appears.

The right of the menu bar holds these controls:

• Open source goes to the repository on GitHub.
• Help opens a menu of Welcome page, Help center, Roadmap, Utility apps and Keyboard shortcuts.
• A language selector — see Languages.
• Sign-in, or your account and plan once you are signed in. On the free plan, this group also holds Upgrade. See Accounts and privacy and Plans.

The toolbar

The toolbar is one row across the top. Its groups run from left to right:

• File — new projects, opening, saving, Import and Export. See Projects and Import and export.
• Save, and Allocate customer points — see Customer points.
• Undo and Redo.
• Operational data — Patterns, Curves, Pump Library, Pipe library, Controls and Custom attributes. See Patterns and the pages beside it.
• Data tables and HGL profile. Both of these open in the bottom panel.
• Simulate, Simulation settings and View report. See Running a simulation.
• The time browser. This browser appears only after a run produces more than one timestep. See Reading results.

The right-hand end holds Search assets… and the three panel toggles.

The map toolbar

The tools that act on the map are not in the toolbar. They float in a small bar at the top center of the map itself. This bar holds Select, Select area, Selection trace, and then Junction, Reservoir, Tank, Pipe, Pump, Valve and Customer point. See Selecting and finding assets and Drawing and editing.

While the Pipe tool is active, a second row appears below the tools. This row carries the Diameter and Roughness for new pipes.

The panels

The side panel on the right has two tabs. The Asset tab shows the properties of what you select — see The asset tab. The Map tab holds symbology, basemaps, layers, elevations, zones and the projection. See The map and its layers and Symbology. On a wide enough window, the side panel is open by default.

The Network Review panel on the left holds the five checks that read the model and report what is wrong with it. It starts closed, and opens by itself after a model build. See Network review.

The bottom panel holds tabs rather than one thing. There is one data table per asset type: Junctions, Pipes, Pumps, Valves, Reservoirs, Tanks and Customer points. An HGL profile tab appears once a profile exists. The bottom panel starts closed. Data tables and HGL profile in the toolbar both open it. See Data tables and HGL profile.

Each of the three has a toggle at the right of the toolbar and a shortcut:

Panel	Toggle	Shortcut
Network Review, on the left	Toggle Network Review	Ctrl+B
Bottom panel	Toggle bottom panel	Ctrl+J
Side panel, on the right	Toggle side panel	Ctrl+Shift+B

Drag the edge between a panel and the map to resize it. If you reopen a panel with its toggle, the panel returns to its default width.

The status bar

The status bar runs along the bottom of the window. It holds these parts, from left to right:

• The scenario switcher — see Scenario work.
• Flow, Pressure and Headloss, with the units and the headloss formula of the project.
• Demand multiplier.
• The status of the run.

The status is the quickest way to know where the model stands. It reads Ready to run before a run, and Running… during one. After a run it reads Simulation was successful, Simulation with warnings or Simulation with errors.

If you edit the model or the simulation settings after a run, the status changes to Simulation outdated. This status means that the results still drawn on the map no longer match the model.

On a narrower window, the left-hand group collapses into one button. This button opens the same values in a popover. The popover also holds Auto-lengths and Auto-elevations, which the bar does not show anywhere else.

Hints

The app shows a short hint over the bottom of the map about the work you are doing. A hint can tell you how to finish a pipe, that you can drag a node, or that you did not run the model yet. If you close a hint with its ×, it does not come back on that browser. Hints appear only on wide windows.

On a narrow window

The layout gives things up in stages as the window narrows. A small laptop or a tablet is then missing controls rather than showing them cramped. The stages are:

• The seven drawing tools collapse into one Drawing tools button. Each click on this button goes to the next tool. You can press and hold the button, or right-click it, to choose one tool from a list. Select area and Selection trace work the same way at every width.
• Open source, the language selector, Welcome page and Help center move into a menu behind the ☰ button at the right of the menu bar. The toolbar drops Undo and Redo, but the shortcuts still work.
• The side panel starts closed rather than open.
• On a narrower window still, the side panel moves below the map instead of beside it. The app also drops the file name, Save, Allocate customer points and the three panel toggles.

Next

• Selecting and finding assets — click, area select, trace, and the search box.
• Drawing and editing — the drawing tools and what happens when you move things.
• Keyboard shortcuts — the full list, and the in-app cheatsheet.