Update comments

public/app/features/explore/Explore.tsx

@@ -110,26 +110,14 @@ interface ExploreProps {
  * Once a datasource is selected it populates the query section at the top.
  * When queries are run, their results are being displayed in the main section.
  * The datasource determines what kind of query editor it brings, and what kind
- * of results viewers it supports.
+ * of results viewers it supports. The state is managed entirely in Redux.
  *
- * QUERY HANDLING
+ * SPLIT VIEW
  *
- * TLDR: to not re-render Explore during edits, query editing is not "controlled"
+ * Explore can have two Explore areas side-by-side. This is handled in `Wrapper.tsx`.
- * in a React sense: values need to be pushed down via `initialQueries`, while
+ * Since there can be multiple Explores (e.g., left and right) each action needs
- * edits travel up via `this.modifiedQueries`.
+ * the `exploreId` as first parameter so that the reducer knows which Explore state
- *
+ * is affected.
- * By default the query rows start without prior state: `initialQueries` will
- * contain one empty DataQuery. While the user modifies the DataQuery, the
- * modifications are being tracked in `this.modifiedQueries`, which need to be
- * used whenever a query is sent to the datasource to reflect what the user sees
- * on the screen. Query"react-popper": "^0.7.5", rows can be initialized or reset using `initialQueries`,
- * by giving the respec"react-popper": "^0.7.5",tive row a new key. This wipes the old row and its state.
- * This property is als"react-popper": "^0.7.5",o used to govern how many query rows there are (minimum 1).
- *
- * This flow makes sure that a query row can be arbitrarily complex without the
- * fear of being wiped or re-initialized via props. The query row is free to keep
- * its own state while the user edits or builds a query. Valid queries can be sent
- * up to Explore via the `onChangeQuery` prop.
  *
  * DATASOURCE REQUESTS
  *

public/app/features/explore/state/reducers.ts

@@ -17,6 +17,9 @@ export const DEFAULT_RANGE = {
 // Millies step for helper bar charts
 const DEFAULT_GRAPH_INTERVAL = 15 * 1000;
 
+/**
+ * Returns a fresh Explore area state
+ */
 const makeExploreItemState = (): ExploreItemState => ({
   StartPage: undefined,
   containerWidth: 0,
@@ -42,12 +45,18 @@ const makeExploreItemState = (): ExploreItemState => ({
   supportsTable: null,
 });
 
+/**
+ * Global Explore state that handles multiple Explore areas and the split state
+ */
 const initialExploreState: ExploreState = {
   split: null,
   left: makeExploreItemState(),
   right: makeExploreItemState(),
 };
 
+/**
+ * Reducer for an Explore area, to be used by the global Explore reducer.
+ */
 const itemReducer = (state, action: Action): ExploreItemState => {
   switch (action.type) {
     case ActionTypes.AddQueryRow: {
@@ -375,6 +384,10 @@ const itemReducer = (state, action: Action): ExploreItemState => {
   return state;
 };
 
+/**
+ * Global Explore reducer that handles multiple Explore areas (left and right).
+ * Actions that have an `exploreId` get routed to the ExploreItemReducer.
+ */
 export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
   switch (action.type) {
     case ActionTypes.ClickCloseSplit: {
@@ -409,8 +422,6 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
     };
   }
 
-  console.error('Unhandled action', action.type);
-
   return state;
 };