Add Power BI log (microsoft#548)

* add powerbi log * trigger onSetupOptionsChanged from Renderer * cleanup logging * fix for edit / view modes * do not re-persist * rename to LogView * tidy log presentation * rename * rename var * version patch * minor version * minor version
GhalamborM · Nov 1, 2022 · e1675d2 · e1675d2
1 parent d76e850
commit e1675d2
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 76 deletions.
diff --git a/packages/powerbi/pbiviz.json b/packages/powerbi/pbiviz.json
@@ -4,7 +4,7 @@
         "displayName": "SandDance",
         "guid": "SandDance201929976D117A654D0BAB8E96507442D80B",
         "visualClassName": "Visual",
-        "version": "4.0.0",
+        "version": "4.1.0",
         "description": "Visually explore, understand, and present your data.",
         "supportUrl": "https://github.com/Microsoft/SandDance/issues",
         "gitHubUrl": "https://github.com/microsoft/SandDance"

diff --git a/packages/powerbi/src/app.ts b/packages/powerbi/src/app.ts
@@ -20,6 +20,7 @@ import { Logo } from '@msrvida/sanddance-explorer/dist/es6/controls/logo';
 import { language } from './language';
 import { version } from './version';
 import powerbiVisualsApi from 'powerbi-visuals-api';
+import { LogView } from './logView';
 
 // tslint:disable-next-line
 use(fluentUIComponents, React as any, ReactDOM as any, vega);
@@ -32,6 +33,7 @@ function getThemePalette(darkTheme: boolean) {
 export interface ViewChangeOptions {
     tooltipExclusions?: string[];
     setup?: SandDance.types.Setup;
+    reason: string;
 }
 
 export interface Props {
@@ -56,6 +58,7 @@ export interface State {
     darkTheme: boolean;
     rowCount: number;
     fetching: boolean;
+    log: string[];
 }
 
 export class App extends React.Component<Props, State> {
@@ -74,6 +77,7 @@ export class App extends React.Component<Props, State> {
             darkTheme: null,
             rowCount: null,
             fetching: false,
+            log: [],
         };
         this.viewerOptions = this.getViewerOptions();
     }
@@ -118,7 +122,7 @@ export class App extends React.Component<Props, State> {
         if (wasLoaded) {
             const { historyItems, sideTabId } = explorer.state;
             const loaded = () => {
-                // console.log('reloading history')
+                this.log('reloading history')
                 const last = historyItems[historyItems.length - 1];
                 historyItems.push({
                     historicInsight: { ...last?.historicInsight || {} },
@@ -215,6 +219,14 @@ export class App extends React.Component<Props, State> {
         this.explorer.resize();
     }
 
+    log(message: string, insightSetup?: SandDance.types.InsightSetup) {
+        if (insightSetup) {
+            const { insight, setup } = insightSetup;
+            message = `${message}\n insight: ${JSON.stringify(insight)}\n setup: ${JSON.stringify(setup)}`;
+        }
+        this.setState({ log: [...this.state.log, message] });
+    }
+
     render() {
         const { props, state } = this;
         const className = util.classList(
@@ -239,24 +251,30 @@ export class App extends React.Component<Props, State> {
             },
             onSetupOptionsChanged: this.props.onSetupSave,
             onSignalChanged: () => {
-                props.onViewChange({});
+                props.onViewChange({ reason: 'onSignalChanged' });
             },
             snapshotProps: {
                 hidden: !this.explorer?.state.snapshots || this.explorer?.state.snapshots.length === 0,
             },
             onSnapshotsChanged: props.onSnapshotsChanged,
-            onTooltipExclusionsChanged: tooltipExclusions => props.onViewChange({ tooltipExclusions }),
+            onTooltipExclusionsChanged: tooltipExclusions => props.onViewChange({ tooltipExclusions, reason: 'onTooltipExclusionsChanged' }),
             onView: () => {
                 this.beginCameraListener(true, true);
                 this.explorer.viewer.presenter.getElement(SandDance.VegaMorphCharts.PresenterElement.gl).oncontextmenu = (e) => {
                     props.onContextMenu(e);
                     return false;
                 };
-                props.onViewChange({});
+                props.onViewChange({ reason: 'onView' });
             },
             onError: props.onError,
             systemInfoChildren: [
                 React.createElement('li', null, `${language.powerBiCustomVisual}: ${version}`),
+                React.createElement('li', null,
+                    React.createElement(LogView, {
+                        clearLog: () => this.setState({ log: [] }),
+                        log: state.log,
+                    }),
+                ),
             ],
         };
         return React.createElement('div', { className },

diff --git a/packages/powerbi/src/language.ts b/packages/powerbi/src/language.ts
@@ -5,6 +5,8 @@ export const language = {
     fetching: 'fetching...',
     fetched: 'loaded',
     powerBiCustomVisual: 'Power BI custom visual version',
+    diagnosticsLog: 'Diagnostics Log',
+    buttonClear: 'Clear',
     historyActionDataChange: 'Power BI data change',
     historyActionUpdate: 'Power BI update',
     webglDisabled: 'SandDance requires a WebGL enabled browser.',

diff --git a/packages/powerbi/src/logView.tsx b/packages/powerbi/src/logView.tsx
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+import * as React from 'react';
+import { controls } from '@msrvida/sanddance-explorer';
+import { language } from './language';
+import { DefaultButton } from '@fluentui/react';
+
+export interface Props {
+    log: string[];
+    clearLog: () => void;
+}
+
+export interface State {
+    showDialog: boolean;
+}
+
+export class LogView extends React.Component<Props, State> {
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            showDialog: false,
+        };
+    }
+
+    render() {
+        const { props, state } = this;
+        return (
+            <span>
+                <a
+                    href='#'
+                    onClick={e => {
+                        e.preventDefault();
+                        this.setState({ showDialog: true });
+                    }}
+                >{language.diagnosticsLog}</a>
+                <controls.Dialog
+                    title={language.diagnosticsLog}
+                    buttons={[
+                        <DefaultButton
+                            key='clear'
+                            iconProps={{ iconName: 'Clear' }}
+                            text={language.buttonClear}
+                            onClick={props.clearLog}
+                        />
+                    ]}
+                    hidden={!state.showDialog}
+                    onDismiss={() => this.setState({ showDialog: false })}
+                    minWidth={'40em'}
+                >
+                    <textarea cols={80} rows={10} value={props.log.map((s, i) => `${i}: ${s}`).join('\n\n')} />
+                </controls.Dialog>
+            </span>
+        );
+    }
+}
diff --git a/packages/powerbi/src/version.ts b/packages/powerbi/src/version.ts
@@ -1,4 +1,4 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 
-export const version: string = '4.0.0';
+export const version: string = '4.1.0';