@finos/legend-application 4.0.3 → 5.1.0

package/src/components/shared/execution-plan-viewer/ExecutionPlanViewer.tsx

@@ -0,0 +1,550 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react';
+import {
+  type TreeNodeContainerProps,
+  type TreeData,
+  Dialog,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanel,
+  ResizablePanelSplitterLine,
+  clsx,
+  TreeView,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  MenuContentItem,
+  MenuContent,
+  DropdownMenu,
+  BlankPanelContent,
+} from '@finos/legend-art';
+import {
+  addUniqueEntry,
+  filterByType,
+  isNonNullable,
+} from '@finos/legend-shared';
+import {
+  ExecutionNodeTreeNodeData,
+  ExecutionPlanViewTreeNodeData,
+  EXECUTION_PLAN_VIEW_MODE,
+  type ExecutionPlanState,
+} from '../../../stores/shared/ExecutionPlanState.js';
+import { observer } from 'mobx-react-lite';
+import {
+  ExecutionPlan,
+  ExecutionNode,
+  SQLExecutionNode,
+  RelationalTDSInstantiationExecutionNode,
+  type RawExecutionPlan,
+} from '@finos/legend-graph';
+import { EDITOR_LANGUAGE, TAB_SIZE } from '../../../const.js';
+import { TextInputEditor } from '../TextInputEditor.js';
+import { SQLExecutionNodeViewer } from './SQLExecutionNodeViewer.js';
+
+/**
+ * @modularize
+ * See https://github.com/finos/legend-studio/issues/65
+ */
+const generateExecutionNodeLabel = (type: ExecutionNode): string => {
+  if (type instanceof SQLExecutionNode) {
+    return `SQL Execution Node`;
+  } else if (type instanceof RelationalTDSInstantiationExecutionNode) {
+    return `Relational TDS Instantiation Execution Node`;
+  } else {
+    return 'Other';
+  }
+};
+
+const generateExecutionNodeTreeNodeData = (
+  executionNode: ExecutionNode,
+  label: string,
+  parentNode:
+    | ExecutionNodeTreeNodeData
+    | ExecutionPlanViewTreeNodeData
+    | undefined,
+): ExecutionNodeTreeNodeData => {
+  const executionNodeTreeNode = new ExecutionNodeTreeNodeData(
+    executionNode._UUID,
+    label,
+    executionNode,
+  );
+
+  const childrenIds: string[] = [];
+
+  executionNode.executionNodes
+    .slice()
+    .filter(filterByType(ExecutionNode))
+    .forEach((childExecutionNode) => {
+      addUniqueEntry(childrenIds, childExecutionNode._UUID);
+    });
+
+  executionNodeTreeNode.childrenIds = childrenIds;
+
+  return executionNodeTreeNode;
+};
+
+const generateExecutionPlanTreeNodeData = (
+  executionPlan: ExecutionPlan,
+): ExecutionPlanViewTreeNodeData => {
+  const executionPlanNode = new ExecutionPlanViewTreeNodeData(
+    `Execution Plan`,
+    `Execution Plan`,
+    executionPlan,
+  );
+
+  const childrenIds: string[] = [];
+
+  const rootNodeId = executionPlan.rootExecutionNode._UUID;
+  addUniqueEntry(childrenIds, rootNodeId);
+  executionPlanNode.childrenIds = childrenIds;
+  return executionPlanNode;
+};
+
+const getExecutionPlanTreeData = (
+  executionPlan: ExecutionPlan,
+): TreeData<ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData> => {
+  const rootIds: string[] = [];
+  const nodes = new Map<
+    string,
+    ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData
+  >();
+  const executionPlanTreeNode =
+    generateExecutionPlanTreeNodeData(executionPlan);
+  addUniqueEntry(rootIds, executionPlanTreeNode.id);
+  nodes.set(executionPlanTreeNode.id, executionPlanTreeNode);
+  return { rootIds, nodes };
+};
+
+const ExecutionNodeElementTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<
+    ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+    {
+      onNodeExpand: (
+        node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+      ) => void;
+    }
+  >
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { onNodeExpand } = innerProps;
+  const isExpandable = Boolean(node.childrenIds?.length);
+  const selectNode = (): void => onNodeSelect?.(node);
+  const expandNode = (): void => onNodeExpand(node);
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+
+  return (
+    <div
+      className={clsx(
+        'tree-view__node__container execution-plan-viewer__explorer-tree__node__container',
+        {
+          'menu__trigger--on-menu-open': !node.isSelected,
+        },
+        {
+          'execution-plan-viewer__explorer-tree__node__container--selected':
+            node.isSelected,
+        },
+      )}
+      style={{
+        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
+      }}
+      onClick={selectNode}
+    >
+      <div className="tree-view__node__icon">
+        <div className="tree-view__node__expand-icon" onClick={expandNode}>
+          {nodeExpandIcon}
+        </div>
+      </div>
+      <button
+        className="tree-view__node__label execution-plan-viewer__explorer-tree__node__label"
+        tabIndex={-1}
+        title={node.id}
+      >
+        {node.label}
+      </button>
+    </div>
+  );
+};
+
+export const ExecutionPlanTree: React.FC<{
+  executionPlanState: ExecutionPlanState;
+  executionPlan: ExecutionPlan;
+}> = (props) => {
+  const { executionPlanState, executionPlan } = props;
+  // NOTE: We only need to compute this once so we use lazy initial state syntax
+  // See https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [treeData, setTreeData] = useState<
+    TreeData<ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData>
+  >(() => getExecutionPlanTreeData(executionPlan));
+  const onNodeSelect = (
+    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+  ): void => {
+    if (node instanceof ExecutionPlanViewTreeNodeData) {
+      executionPlanState.transformMetadataToProtocolJson(node.executionPlan);
+    } else if (node instanceof ExecutionNodeTreeNodeData) {
+      executionPlanState.transformMetadataToProtocolJson(node.executionNode);
+    }
+    executionPlanState.setSelectedNode(node);
+  };
+
+  const onNodeExpand = (
+    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+  ): void => {
+    if (node.childrenIds?.length) {
+      node.isOpen = !node.isOpen;
+      if (node instanceof ExecutionPlanViewTreeNodeData) {
+        const rootNode = node.executionPlan.rootExecutionNode;
+        const rootNodeTreeNode = generateExecutionNodeTreeNodeData(
+          rootNode,
+          generateExecutionNodeLabel(rootNode),
+          node,
+        );
+        treeData.nodes.set(rootNodeTreeNode.id, rootNodeTreeNode);
+      } else if (node instanceof ExecutionNodeTreeNodeData) {
+        if (node.executionNode.executionNodes.length > 0) {
+          node.executionNode.executionNodes.forEach((exen) => {
+            const executionNodeTreeNode = generateExecutionNodeTreeNodeData(
+              exen,
+              generateExecutionNodeLabel(exen),
+              node,
+            );
+
+            treeData.nodes.set(executionNodeTreeNode.id, executionNodeTreeNode);
+          });
+        }
+      }
+    }
+
+    setTreeData({ ...treeData });
+  };
+
+  const getChildNodes = (
+    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+  ): (ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData)[] => {
+    if (!node.childrenIds || node.childrenIds.length === 0) {
+      return [];
+    }
+    const childrenNodes = node.childrenIds
+      .map((id) => treeData.nodes.get(id))
+      .filter(isNonNullable);
+
+    return childrenNodes;
+  };
+  return (
+    <TreeView
+      components={{
+        TreeNodeContainer: ExecutionNodeElementTreeNodeContainer,
+      }}
+      treeData={treeData}
+      getChildNodes={getChildNodes}
+      onNodeSelect={onNodeSelect}
+      innerProps={{
+        onNodeExpand,
+      }}
+    />
+  );
+};
+
+const ExecutionNodeViewer = observer(
+  (props: {
+    executionNode: ExecutionNode;
+    executionPlanState: ExecutionPlanState;
+  }) => {
+    const { executionNode, executionPlanState } = props;
+    if (executionNode instanceof SQLExecutionNode) {
+      return (
+        <SQLExecutionNodeViewer
+          query={executionNode.sqlQuery}
+          resultColumns={executionNode.resultColumns}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    return (
+      <BlankPanelContent>
+        <div className="execution-node-viewer__unsupported-view">
+          <div className="execution-node-viewer__unsupported-view__summary">
+            {`Can't display execution node`}
+          </div>
+          <button
+            className="btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn"
+            onClick={(): void =>
+              executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON)
+            }
+          >
+            View JSON
+          </button>
+        </div>
+      </BlankPanelContent>
+    );
+  },
+);
+
+const ExecutionPlanViewPanel = observer(
+  (props: { displayData: string; executionPlanState: ExecutionPlanState }) => {
+    const { displayData, executionPlanState } = props;
+    let currentElement;
+    if (executionPlanState.selectedNode !== undefined) {
+      if (
+        executionPlanState.selectedNode instanceof ExecutionPlanViewTreeNodeData
+      ) {
+        currentElement = executionPlanState.selectedNode.executionPlan;
+      } else if (
+        executionPlanState.selectedNode instanceof ExecutionNodeTreeNodeData
+      ) {
+        currentElement = executionPlanState.selectedNode.executionNode;
+      }
+    }
+    const nativeViewModes = Object.values(EXECUTION_PLAN_VIEW_MODE);
+
+    return (
+      <div className="execution-plan-viewer__panel">
+        {executionPlanState.selectedNode !== undefined && (
+          <>
+            <div className="panel__header execution-plan-viewer__panel__header">
+              <div className="execution-plan-viewer__panel__header__tabs">
+                <button className="execution-plan-viewer__panel__header__tab execution-plan-viewer__panel__header__tab--active">
+                  {executionPlanState.selectedNode.label}
+                </button>
+              </div>
+              <DropdownMenu
+                className="execution-plan-viewer__panel__view-mode"
+                content={
+                  <MenuContent className="execution-plan-viewer__panel__view-mode__options execution-plan-viewer__panel__view-mode__options--with-group">
+                    <div className="execution-plan-viewer__panel__view-mode__option__group execution-plan-viewer__panel__view-mode__option__group--native">
+                      <div className="execution-plan-viewer__panel__view-mode__option__group__name">
+                        native
+                      </div>
+                      <div className="execution-plan-viewer__panel__view-mode__option__group__options">
+                        {nativeViewModes.map((mode) => (
+                          <MenuContentItem
+                            key={mode}
+                            className="execution-plan-viewer__panel__view-mode__option"
+                            onClick={(): void =>
+                              executionPlanState.setViewMode(mode)
+                            }
+                          >
+                            {mode}
+                          </MenuContentItem>
+                        ))}
+                      </div>
+                    </div>
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                  transformOrigin: { vertical: 'top', horizontal: 'right' },
+                }}
+              >
+                <button
+                  className="execution-plan-viewer__panel__view-mode__type"
+                  title="View as..."
+                >
+                  <div className="execution-plan-viewer__panel__view-mode__type__label">
+                    {executionPlanState.viewMode}
+                  </div>
+                </button>
+              </DropdownMenu>
+            </div>
+            <div className="panel__content execution-plan-viewer__panel__content">
+              {executionPlanState.viewMode === EXECUTION_PLAN_VIEW_MODE.JSON &&
+                Boolean(displayData) && (
+                  <TextInputEditor
+                    inputValue={displayData}
+                    isReadOnly={true}
+                    language={EDITOR_LANGUAGE.JSON}
+                    showMiniMap={false}
+                  />
+                )}
+              {executionPlanState.viewMode ===
+                EXECUTION_PLAN_VIEW_MODE.FORM && (
+                <>
+                  {currentElement instanceof ExecutionNode && (
+                    <ExecutionNodeViewer
+                      executionNode={currentElement}
+                      executionPlanState={executionPlanState}
+                    />
+                  )}
+                  {currentElement instanceof ExecutionPlan && (
+                    <BlankPanelContent>
+                      <div className="execution-plan-viewer__unsupported-view">
+                        <div className="execution-plan-viewer__unsupported-view__summary">
+                          {`Can't display full execution plan`}
+                        </div>
+                        <button
+                          className="btn--dark execution-plan-viewer__unsupported-view__to-text-mode__btn"
+                          onClick={(): void =>
+                            executionPlanState.setViewMode(
+                              EXECUTION_PLAN_VIEW_MODE.JSON,
+                            )
+                          }
+                        >
+                          View JSON
+                        </button>
+                      </div>
+                    </BlankPanelContent>
+                  )}
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+
+const ExecutionPlanViewerContent = observer(
+  (props: {
+    executionPlanState: ExecutionPlanState;
+    rawPlan: RawExecutionPlan;
+  }) => {
+    const { executionPlanState, rawPlan } = props;
+    const plan = executionPlanState.plan;
+
+    return (
+      <div className="execution-plan-viewer__content">
+        {plan ? (
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel size={300} minSize={300}>
+              <div className="panel execution-plan-viewer__explorer">
+                <div className="panel__header side-bar__header">
+                  <div className="panel__header__title">
+                    <div className="panel__header__title__content side-bar__header__title__content">
+                      EXECUTION PLAN EXPLORER
+                    </div>
+                  </div>
+                </div>
+                <div className="panel__content execution-plan-viewer__explorer__content__container">
+                  <ExecutionPlanTree
+                    executionPlanState={executionPlanState}
+                    executionPlan={plan}
+                  />
+                </div>
+              </div>
+            </ResizablePanel>
+            <ResizablePanelSplitter>
+              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+            </ResizablePanelSplitter>
+            <ResizablePanel>
+              <ExecutionPlanViewPanel
+                displayData={executionPlanState.displayData}
+                executionPlanState={executionPlanState}
+              />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        ) : (
+          <TextInputEditor
+            inputValue={JSON.stringify(rawPlan, undefined, TAB_SIZE)}
+            isReadOnly={true}
+            language={EDITOR_LANGUAGE.JSON}
+            showMiniMap={true}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export const ExecutionPlanViewer = observer(
+  (props: { executionPlanState: ExecutionPlanState }) => {
+    const { executionPlanState } = props;
+    const closePlanViewer = (): void => {
+      executionPlanState.setRawPlan(undefined);
+      executionPlanState.setPlan(undefined);
+      executionPlanState.setExecutionPlanDisplayData('');
+      executionPlanState.setSelectedNode(undefined);
+      executionPlanState.setDebugText(undefined);
+    };
+    const rawPlan = executionPlanState.rawPlan;
+
+    if (!rawPlan) {
+      return null;
+    }
+    return (
+      <Dialog
+        open={Boolean(executionPlanState.rawPlan)}
+        onClose={closePlanViewer}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div className="modal modal--dark editor-modal">
+          <div className="modal__header">
+            <div className="modal__title">Execution Plan</div>
+          </div>
+          <div className="modal__body">
+            {executionPlanState.debugText ? (
+              <ResizablePanelGroup orientation="horizontal">
+                <ResizablePanel minSize={100}>
+                  <ExecutionPlanViewerContent
+                    executionPlanState={executionPlanState}
+                    rawPlan={rawPlan}
+                  />
+                </ResizablePanel>
+                <ResizablePanelSplitter>
+                  <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+                </ResizablePanelSplitter>
+                <ResizablePanel size={200} minSize={28}>
+                  <div className="panel execution-plan-viewer__debug-panel">
+                    <div className="panel__header">
+                      <div className="panel__header__title">
+                        <div className="panel__header__title__label">
+                          DEBUG LOG
+                        </div>
+                      </div>
+                    </div>
+                    <div className="panel__content">
+                      <TextInputEditor
+                        inputValue={executionPlanState.debugText}
+                        isReadOnly={true}
+                        language={EDITOR_LANGUAGE.TEXT}
+                        showMiniMap={true}
+                      />
+                    </div>
+                  </div>
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            ) : (
+              <ExecutionPlanViewerContent
+                executionPlanState={executionPlanState}
+                rawPlan={rawPlan}
+              />
+            )}
+          </div>
+          <div className="modal__footer">
+            <button
+              className="btn modal__footer__close-btn"
+              onClick={closePlanViewer}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/shared/execution-plan-viewer/SQLExecutionNodeViewer.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { ExecutionPlanState } from '../../../stores/shared/ExecutionPlanState.js';
+import { format } from 'sql-formatter';
+import type { SQLResultColumn } from '@finos/legend-graph';
+import { TextInputEditor } from '../TextInputEditor.js';
+import { EDITOR_LANGUAGE } from '../../../const.js';
+
+/**
+ * TODO: Create a new `AbstractPlugin` for this, called `ExecutionPlanViewerPlugin`
+ * when we modularize relational and execution plan processing, etc.
+ *
+ * @modularize
+ * See https://github.com/finos/legend-studio/issues/65
+ */
+export const SQLExecutionNodeViewer: React.FC<{
+  query: string;
+  resultColumns: SQLResultColumn[];
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { query } = props;
+
+  return (
+    <TextInputEditor
+      inputValue={format(query)}
+      isReadOnly={true}
+      language={EDITOR_LANGUAGE.SQL}
+      showMiniMap={false}
+    />
+  );
+});

package/src/const.ts

@@ -14,11 +14,6 @@
  * limitations under the License.
  */
 
-export const DATE_TIME_FORMAT_WITH_MILLISECONDS =
-  "yyyy-MM-dd'T'HH:mm:ss.SSSxxxx";
-export const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ssxxxx";
-export const DATE_FORMAT = 'yyyy-MM-dd';
-
 export const TAB_SIZE = 2;
 
 export const MONOSPACED_FONT_FAMILY = 'Roboto Mono';

package/src/index.ts

@@ -18,32 +18,21 @@ export * from './const.js';
 
 export * from './application/LegendApplicationPluginManager.js';
 export * from './application/LegendApplication.js';
-
 export * from './components/ApplicationStoreProvider.js';
 export * from './components/WebApplicationNavigatorProvider.js';
 export * from './components/LegendApplicationComponentFrameworkProvider.js';
 export * from './components/LegendApplicationNavigationContextServiceUtils.js';
-
 export * from './components/ApplicationStoreProviderTestUtils.js';
 export * from './components/WebApplicationNavigatorProviderTestUtils.js';
-
 // TODO: consider moving this to `LegendApplicationComponentFrameworkProvider`
 // once we think we can add virtual assistant support for all apps
 export * from './components/VirtualAssistant.js';
 
-export * from './components/DocumentationLink.js';
-export * from './components/TextInputEditor.js';
-export * from './components/LambdaEditor.js';
-export * from './components/BasicValueSpecificationEditor.js';
-export * from './components/LambdaParameterValuesEditor.js';
-
 export * from './stores/ApplicationStore.js';
 export * from './stores/ApplicationTelemetry.js';
 export * from './stores/ApplicationEvent.js';
 export * from './stores/LegendApplicationConfig.js';
 export { WebApplicationNavigator } from './stores/WebApplicationNavigator.js';
-export { LambdaEditorState } from './stores/LambdaEditorState.js';
-export * from './stores/PackageableElementOption.js';
 export * from './stores/LegendApplicationDocumentationService.js';
 export * from './stores/LegendApplicationEventService.js';
 export * from './stores/LegendApplicationAssistantService.js';
@@ -51,5 +40,19 @@ export * from './stores/LegendApplicationNavigationContextService.js';
 export * from './stores/LegendApplicationPlugin.js';
 
 export * from './stores/ApplicationStoreTestUtils.js';
-export * from './stores/ValueSpecificationModifierHelper.js';
-export * from './stores/LambdaParameterState.js';
+
+// ------------------------------------------- Shared components -------------------------------------------
+
+export * from './components/shared/DocumentationLink.js';
+export * from './components/shared/TextInputEditor.js';
+export * from './components/shared/LambdaEditor.js';
+export * from './components/shared/BasicValueSpecificationEditor.js';
+export * from './components/shared/LambdaParameterValuesEditor.js';
+export * from './components/shared/PackageableElementOptionRenderer.js';
+export * from './components/shared/execution-plan-viewer/ExecutionPlanViewer.js';
+
+export { LambdaEditorState } from './stores/shared/LambdaEditorState.js';
+export * from './stores/shared/PackageableElementOption.js';
+export * from './stores/shared/LambdaParameterState.js';
+export * from './stores/shared/ValueSpecificationModifierHelper.js';
+export * from './stores/shared/ExecutionPlanState.js';

package/src/stores/ApplicationEvent.ts

@@ -21,8 +21,10 @@ export enum APPLICATION_EVENT {
   ILLEGAL_APPLICATION_STATE_OCCURRED = 'application.error.illegal-state',
   APPLICATION_CONFIGURATION_FAILURE = 'application.configuration.failure',
 
-  APPLICATION_DOCUMTENTION_LOAD_SKIPPED = 'application.load.documentation.skipped',
-  APPLICATION_CONTEXTUAL_DOCUMTENTION_LOAD_SKIPPED = 'application.load.contextual-documentation.skipped',
+  APPLICATION_DOCUMENTATION_FETCH_FAILURE = 'application.fetch.documentation.failure',
+  APPLICATION_DOCUMENTATION_LOAD_SKIPPED = 'application.load.documentation.skipped',
+  APPLICATION_DOCUMENTATION_REQUIREMENT_CHECK_FAILURE = 'application.load.documentation.requirement-check.failure',
+  APPLICATION_CONTEXTUAL_DOCUMENTATION_LOAD_SKIPPED = 'application.load.contextual-documentation.skipped',
 
   APPLICATION_LOADED = 'application.load.success',
   APPLICATION_LOAD_FAILURE = 'application.load.failure',

package/src/stores/ApplicationStore.ts

@@ -147,11 +147,13 @@ export class ApplicationStore<T extends LegendApplicationConfig> {
     this.config = config;
     this.navigator = navigator;
     this.pluginManager = pluginManager;
+    // NOTE: set the logger first so other loading could use the configured logger
+    this.log.registerPlugins(pluginManager.getLoggerPlugins());
+
     this.navigationContextService =
       new LegendApplicationNavigationContextService();
     this.documentationService = new LegendApplicationDocumentationService(this);
     this.assistantService = new LegendApplicationAssistantService(this);
-    this.log.registerPlugins(pluginManager.getLoggerPlugins());
     this.telemetryService.registerPlugins(
       pluginManager.getTelemetryServicePlugins(),
     );