website: add quickview UI overview

Author: huiwanpnnl

docs/guides/quickview/index.md

@@ -1,9 +1,13 @@
 # What is QuickView?
 
-**QuickView** is an open-source, interactive visualization tool designed for
-Earth system modelers with an initial focus on the horizontal meshes used by
-the atmosphere component, EAM, of the
-[Energy Exascale Earth System Model (E3SM)](https://e3sm.org/),
+**QuickView** is an open-source, interactive visualization
+tool designed to help Earth system modelers take a quick look at
+a collection of physical quantities in their simulation files.
+The physical quantities are presented in the form of global or regional maps.
+Currently, QuickView supports only the cubed-sphere "physics" grids,
+i.e., the ne\*pg2 meshes used by the atmosphere component of the
+[Energy Exascale Earth System Model (E3SM)](https://e3sm.org),
+but extensions to other grids are underway.
 QuickView's Python- and
 [trame](https://www.kitware.com/trame/)-based User Interface (UI)
 provides intuitive access to [ParaView](https://www.paraview.org/)'s powerful

docs/guides/quickview/screenshots/quickview_ui.png

@@ -1 +1,27 @@
-# QuickView's graphical UI
+# QuickView's Graphical UI
+
+QuickView's UI contains three main components.
+
+- The **viewport** displays global or regional maps for the user-selected
+  physical quantities (variables in the NetCDF files):
+  The sequence of the displayed variables and the size of the maps
+  can be adjusted using the Viewport Layout control panel.
+  For each variable, the colormap, value ranges etc. can be adjusted
+  separately using the pop-up menu activated by a click on the colorbar.
+
+- Various **control panels** for changing properties of all maps
+  shown in the viewport: The control panels can be collapsed (hiddlen)
+  or expanded (shown) by clicking on their corresponding icons in the
+  toolbar or by using [keybord shortcuts](./shortcuts).
+
+- The vertical **toolbar** located on the left of the UI:
+  The various buttons either activate pop-up menus on a single click
+  or serve as toggles for showing or hiding control panels.
+  The toolbar is shown in a collapsed mode by default, but
+  will change into an expanded mode if the user clicks on the
+  colorful QuickView icon at the top of the toolbar or press the
+  `H` key on the keyboard. 
+
+![QuickView UI](./screenshots/quickview_ui.png){ width="90%" }
+
+![Toolbar expanded](./screenshots/toolbar_expanded.png){ width="20%" }