From 71ebece4a97547ac9bec32cd30957d38c96fb755 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 6 Dec 2019 21:19:25 -0500 Subject: performance fixes for sidebar. stop re-rendering docking view when sidebar expands. fixed lightbox. --- src/client/views/MainView.tsx | 77 ++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 38 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 29719a6eb..175af1abc 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -39,6 +39,7 @@ import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsM import InkSelectDecorations from './InkSelectDecorations'; import { Scripting } from '../util/Scripting'; import { AudioBox } from './nodes/AudioBox'; +import { TraceMobx } from '../../new_fields/util'; @observer export class MainView extends React.Component { @@ -260,38 +261,41 @@ export class MainView extends React.Component { getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; + _emptyPath = []; + @computed get mainDocView() { + return + } @computed get dockingContent() { + TraceMobx(); const mainContainer = this.mainContainer; - const flyoutWidth = this.flyoutWidth; // bcz: need to be here because Measure messes with observables. - const flyoutTranslate = this._flyoutTranslate; + const width = this.flyoutWidth; return {({ measureRef }) => -
- {!mainContainer ? (null) : - } +
+ {!mainContainer ? (null) : this.mainDocView}
} ; @@ -416,6 +420,7 @@ export class MainView extends React.Component { {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
+ {this.docButtons} ; } @@ -423,10 +428,9 @@ export class MainView extends React.Component { const sidebar = this.userDoc && this.userDoc.sidebarContainer; return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
-
-
+
+
{this.flyout} @@ -471,7 +473,7 @@ export class MainView extends React.Component { @computed get docButtons() { if (CurrentUserUtils.UserDocument?.expandingButtons instanceof Doc) { return
+ style={{ height: !CurrentUserUtils.UserDocument.expandingButtons.isExpanded ? "42px" : undefined }} > - {this.docButtons} -- cgit v1.2.3-70-g09d2 From 600d06a162b4489fd52d5809eb9f5a69f28618fc Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 6 Dec 2019 23:11:51 -0500 Subject: performance tuning for sidebar --- src/Utils.ts | 2 ++ src/client/views/MainView.tsx | 11 +++++------ .../views/collections/CollectionStackingView.tsx | 20 +++++++++++++------- .../CollectionStackingViewFieldColumn.tsx | 6 +++--- src/client/views/collections/CollectionView.tsx | 2 ++ src/client/views/nodes/DocumentContentsView.tsx | 3 +++ 6 files changed, 28 insertions(+), 16 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index 7401ef981..2b15ad0f2 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -362,6 +362,8 @@ export function returnZero() { return 0; } export function returnEmptyString() { return ""; } +export let emptyPath = []; + export function emptyFunction() { } export function unimplementedFunction() { throw new Error("This function is not implemented, but should be."); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 175af1abc..dacc9226e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -15,7 +15,7 @@ import { List } from '../../new_fields/List'; import { listSpec } from '../../new_fields/Schema'; import { Cast, FieldValue, StrCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; -import { emptyFunction, returnEmptyString, returnFalse, returnOne, returnTrue, Utils } from '../../Utils'; +import { emptyFunction, returnEmptyString, returnFalse, returnOne, returnTrue, Utils, emptyPath } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; @@ -261,11 +261,10 @@ export class MainView extends React.Component { getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; - _emptyPath = []; @computed get mainDocView() { return doc) { @@ -383,17 +384,22 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } } + @computed get renderedSections() { + TraceMobx(); + let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]]; + if (this.sectionFilter) { + const entries = Array.from(this.Sections.entries()); + sections = entries.sort(this.sortFunc); + } + return sections.map(section => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1])); + } render() { + TraceMobx(); const editableViewProps = { GetValue: () => "", SetValue: this.addGroup, contents: "+ ADD A GROUP" }; - let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]]; - if (this.sectionFilter) { - const entries = Array.from(this.Sections.entries()); - sections = entries.sort(this.sortFunc); - } return (
doc) { onScroll={action((e: React.UIEvent) => this._scroll = e.currentTarget.scrollTop)} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu} - onWheel={(e: React.WheelEvent) => e.stopPropagation()} > - {sections.map(section => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1]))} + onWheel={e => e.stopPropagation()} > + {this.renderedSections} {!this.showAddAGroup ? (null) :
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 80dc482af..ca3b93bf8 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -17,6 +17,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations"; import { EditableView } from "../EditableView"; import { CollectionStackingView } from "./CollectionStackingView"; import "./CollectionStackingView.scss"; +import { TraceMobx } from "../../../new_fields/util"; library.add(faPalette); @@ -252,13 +253,12 @@ export class CollectionStackingViewFieldColumn extends React.Component { - this.collapsed = !this.collapsed; - }); + private toggleVisibility = action(() => this.collapsed = !this.collapsed); @observable _headingsHack: number = 1; render() { + TraceMobx(); const cols = this.props.cols(); const key = StrCast(this.props.parent.props.Document.sectionFilter); let templatecols = ""; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index cd546696f..411040332 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -32,6 +32,7 @@ import { SelectionManager } from '../../util/SelectionManager'; import './CollectionView.scss'; import { FieldViewProps, FieldView } from '../nodes/FieldView'; import { Touchable } from '../Touchable'; +import { TraceMobx } from '../../../new_fields/util'; const path = require('path'); library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy); @@ -251,6 +252,7 @@ export class CollectionView extends Touchable { onMoveNextRequest={action(() => this._curLightboxImg = (this._curLightboxImg + 1) % images.length)} />); } render() { + TraceMobx(); const props: CollectionRenderProps = { addDocument: this.addDocument, removeDocument: this.removeDocument, diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 13fd3cde1..1bbc82119 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -32,6 +32,7 @@ import { VideoBox } from "./VideoBox"; import { WebBox } from "./WebBox"; import { InkingStroke } from "../InkingStroke"; import React = require("react"); +import { TraceMobx } from "../../../new_fields/util"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? type BindingProps = Without; @@ -57,6 +58,7 @@ export class DocumentContentsView extends React.Component { @computed get layout(): string { + TraceMobx(); if (!this.layoutDoc) return "

awaiting layout

"; const layout = Cast(this.layoutDoc[this.props.layoutKey], "string"); if (layout === undefined) { @@ -92,6 +94,7 @@ export class DocumentContentsView extends React.Component 7 || !this.layout) ? (null) :