website: quickview - variable selection and viewport layout

Author: huiwanpnnl

docs/guides/quickview/file_selection.md

@@ -37,6 +37,9 @@ The user can now start to search for and load variables to inspect.
 
 ![File loaded](./screenshots/file_loaded.png){ width="95%", align=center }
 
+::: tip Tip: File system navigation 
+:::
+
 ::: tip Tip: Loading a file series from the same simulation 
 :::
 

docs/guides/quickview/screenshots/variable_selection_in_viewport_when_grouped.png

@@ -2,40 +2,56 @@
 
 QuickView's capabilities of variable search and selection
 has been enhanced substantially compared to the earlier version.
-The enhancement was motivated partly by the generalization of
-the tool to handle arbitrarily shaped arrays defined on the cubed sphere,
-and partly due to the wish to help users navigate through simulation
+The enhancement was partly motivated by the generalization of
+the tool to handle arbitrarily-shaped arrays,
+and partly due to the intention to help users navigate through simulation
 files containing many (e.g., hundreds of) variables.
-Here, we use a file with more than one thousand variables as an example
+
+Here, we use a simulation file with more than one thousand variables as an example
 to explain the search and selection capabilities.
 
-<!-- ![File loaded](./screenshots/variables_none_or_all.png){ width="95%", align=center } -->
+## Checkboxes for selecting and unselecting variables
 
 ![File loaded](./screenshots/variable_list_none_selected.png){ width="55%", align=right }
-The first screenshot shows the Variable Selection panel
+The first screenshot here shows the Variable Selection panel
 right after the files have been loaded.
 - The checkboxes to the left of each variable name can be used
   to select or unselect the corresponding variables.
 - The first checkbox, to the left of "Name" and below the eye icon,
   can be used to select or unselect all variables.
 
+## Variable proups
+
 ![File loaded](./screenshots/variable_list_all_selected.png){ width="55%", align=right }
-When all variables are selected using the first checkbox, we get the second screenshot shown here.
+QuickView sorts variables into different groups according to their dimensions
+and allows the users to select, unselect, and inspect groups.
+
+In the same example as discussed above, when all variables are selected
+using the first checkbox in the Variable Selection control panel,
+we get the second screenshot shown here.
 - The **wide blue button** at the top of the contol panel indicates there is
   a total of 1385 variables displayable in the file.
-- The **colorful tabs** correspond to different variable shapes (dimension
-  combinations). The different cominations, as well as the number
-  of displayable variables in each group, are shown in the tabs.
-  Each tab has a close button that can be used to unselect the entire group.
+- The **colorful tabs** correspond to different variable groups with distinct shapes.
+  Each groups shape (dimension combination), as well as the number
+  of displayable variables in the group, is shown in the corresponding tab.
+  Each tab also has a "close" button that can be used to unselect the entire group.
 
 Note that at this point, QuickView has *not* loaded all the variables into memory.
 It has finished a scan and *is ready to load* these variables.
 
+## The filter box
 
-Additional talk points:
+Talk points to be expanded after we further revise the filter logic:
 
 - filter box; filter by dimension name, dimension combination, or variable name
 - eye icon: cycle through lists of selected, unselected, and all variables in the filtered list.
-- clicking on a tab applys filter by shape combination.
-- close button in filter box clears filter (make cross always visible) 
-
+- clicking a tab will filter the list of all variables by the shape combination.
+- filter is applied immediately when contents are entered.
+  - implication: when the filter box is not empty, the eye icon and the first checkbox
+    will operate on the filtered list. If the user wants them to apply to the full list
+    of displayable variables instead, then the filter box should be cleared by deleteing the
+    text;  a shortcut would be to use the "close button" that shows up when the cursor
+    hoves over the filter box".
+
+::: warning Reminder: Use the `Load X variables` button to apply selection or change
+:::

docs/guides/quickview/screenshots/variable_selection_in_viewport_when_ungrouped.png

@@ -1 +1,50 @@
 # Customizing Viewport Layout
+
+::: For users of QuickView version 1
+QuickView version 1 allowed the user to change the size and sequence
+of different views (map plots) in the viewport by drag-and-drop.
+Users' feedback indicated that arbitrary drag-and-drop can get confusing,
+and it was inconvenient to not having a way to reapply the same size to all views.
+With these comments in mind, we have changed the mechanisms for
+configuring the viewport in version 2.
+:::
+
+## View size
+
+QuickView version 2 supports showing 1, 2, 3, 4, or 6 columns of views (map plots)
+in the view port. The number of columns can be changed by pressing the desired number
+on the keyboard or using the Viewport Layout control panel, via the "Size" menu
+on the right of that panel, as shown in the screenshot below.
+
+The viewport is evenly divided into the selected number of columns.
+When the user adjusts the size of their browser window, the
+sizes of the map plots will be automatically adjusted to fit into the adjusted browser window.
+
+![Viewport column size](./screenshots/viewport_with_column_size_menu.png){ width="95%", align=center }
+
+## Grouped or ungrouped views
+
+If the user has selected and loaded variables of different shapes,
+then, by default, the viewport will present the map plots in groups.
+For each group, a vertical bar, shown in the same color as the group tab
+in the Variable Selection control panel, is shown on the left side of
+the viewport to distinguish the group.
+The screenshot above shows 3 variable groups. 
+
+This grouping in the viewport can be canceled (or reapplied) by using
+the `G` key or a "Grouped" versus "Ungrouped" toggle.
+
+## Variable sequence
+
+In the top-left corner of each individual view, the variable name is shown.
+Clicking the text will activate a drop-down menu for the user to replace
+the current variable by a different one.
+
+If the plots in the viewport are ungrouped, the drop-down menu will
+list all the other variables that have been loaded. See example
+in the screenshot below.
+
+If the plots in the viewport are grouped, the drop-down menu will
+list all the other loaded variables *in the same group*.
+
+![Select variable for a view](./screenshots/variable_selection_in_viewport_when_ungrouped.png){ width="95%", align=center }