Common Components

Visit the MUI Documentation for a list of available out-of-the-box components.

GQC Custom Components

Exceptions

The following components came with the template and it's unclear if GQC has used them anywhere.

• animate/
• charts/

Menu Components

• ActionSideBar
  • Can be found in DWD, SWC, and SWMM
• Gearbox
  • Can be found in DWD, SWC, and SWMM
• MenuPopover
  • Can be found in DWD, SWC, SWMM, and Riverflows
• NavSection
  • Can be found in DWD, SWC, SWMM, and Riverflows

Layout Components

• ColorTableRow
  • Can be found in DWD, SWC, and SWMM
  • Functionality is used for displaying and selecting input values in SWC such as soil type, drainage, slope, ...
• DisplayCard
  • Can be found in DWD
• FeatureInfoBox
  • Can be found in SWMM
  • Basically just a specially-formatted MUI Table
• infoContainer
  • Can be found in SWMM
  • Seems related to modals/popup content
• MuiTableSortable
  • Can be found in SWMM
• Page
  • Can be found in DWD, SWC, SWMM, and Riverflows
• ScrollToTop
  • Can be found in DWD, SWC, SWMM, and Riverflows
• Scrollbar
  • Can be found in DWD, SWC, SWMM, and Riverflows
• SearchNotFound
  • Can be found in DWD, SWC, SWMM, and Riverflows
• SliderComponent
  • Can be found in DWD
• SvgIconStyle
  • Can be found in DWD, SWC, SWMM, and Riverflows
• WeatherStationInfoBox
  • Can be found in DWD and SWC

Modals and Popups

There are a lot of components that relate to modals and popup boxes. This section will document all of them and denote the most important and reusable components with bold font.

• ChildModal
  • Can be found in DWD, SWC, and SWMM
  • Contains an open button and a Modal with {children} content
  • Doesn't look like the component is currently being used anywhere
• GQCMapModal
  • Can be found in DWD and SWMM
  • Seems to be a placeholder; The only content is Lorem ipsum, ...
  • Implemented on ScenarioDashboard.jsx
• GQCModal
  • Can be found in DWD, SWC, and SWMM
  • Seems like our "Gold Standard" option for Modals
  • Used extensively in SWC and SWMM.
  • Implemented in other components such as ModalInput, ModalRadioInput, and ModalInputWithChild
  • Essentially a wrapper around MUI's base Modal component.
• ModalInput
  • Can be found in DWD, SWC, and SWMM
  • This is just a TextField, so it's unclear if there's any dependence on being in a Modal.
• ModalInputWithChild
  • Can be found in DWD, SWC, and SWMM
  • Grid with an extra Modal wrapped around children.
• ModalRadioInput
  • Can be found in DWD, SWC, and SWMM
  • Modal containing a form and group of radio buttons
  • Excellent option for reusability.
• ParentModal
  • Can be found in DWD, SWC, and SWMM
  • Has a Gearbox component included to open the child modals?
  • Contains theming and positioning.
  • Otherwise seems to just be a starting point to support multiple child modals.
• PopoverBox
  • Can be found in SWMM
  • Doesn't seem to be used anywhere currently.
• modal/ModalButtonBar
  • Can be found in SWC and SWMM
  • This component came with the MUI template but doesn't seem to be in use anywhere.
  • I suspect it might have been used in the top-bar originally, which we trimmed to only contain theme switching.
• modal/NestableModal
  • Can be found in SWC and SWMM
  • Simple wrapper around children.
  • Children can be more modals.
  • This component most likely came from the MUI template.

Theme/Styling Components

• ColorManyPicker
  • Can be found in DWD, SWC, SWMM, and Riverflows
• ColorPreview
  • Can be found in DWD, SWC, SWMM, and Riverflows
• Iconify
  • Can be found in DWD, SWC, SWMM, and Riverflows
• Label
  • Can be found in DWD, SWC, SWMM, and Riverflows
• Logo
  • Can be found in DWD, SWC, SWMM, and Riverflows

Chart/Graph Components

• FeatureGraphBox
  • Can be found in SWMM
  • Requires react-apexcharts
  • Doesn't appear to be used anywhere currently...
• HydroGraph
  • Can be found in DWD
  • Requires react-apexcharts
• HydrographPopup
  • Can be found in DWD
  • Requires react-apexcharts
• LineChartPopup
  • Can be found in DWD
  • Requires chart.js
• NetworkChart
  • Can be found in DWD and SWMM
  • Requires react-apexcharts
• SystemChart
  • Can be found in SWMM
  • Requires react-apexcharts

Map Components

2D Map Components

• ColorCircleStyle
  • Can be found in DWD, SWC, and SWMM
  • Requires OpenLayers
  • Used to display a colored (r, g, b) circle on an OpenLayers map
• EsriMap2d
  • Can be found in DWD
• HeatmapComponent
  • Can be found in DWD
  • Requires @arcgis/core
• MapComponent
  • Can be found in DWD
  • Requires OpenLayers
• MapWrapper
  • Can be found in DWD
  • Requires OpenLayers
• OpenLayersBaseLayer
  • Can be found in DWD, SWC, and SWMM
• OpenLayersMap2d
  • Can be found in DWD, SWC, and SWMM
• QualityPopup
  • Can be found in DWD
  • Requires @arcgis/core

3D Map Components

• CylinderPrimitive
  • Can be found in DWD
• JunctionSphere
  • Can be found in DWD
• OrientedCylinder
  • Can be found in DWD
• ReservoirPrimitive
  • Can be found in DWD
• TankPrimitive
  • Can be found in DWD