fixed notetaking view to have an 'unset' category for unassigned notes. fixed pivot view to not fail when docs have no width.

7 files changed, 66 insertions, 64 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 989719c80..f24b98621 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -55,10 +55,18 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
     @computed get columnHeaders() {
-        return Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
+        const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
+        let docs = this.childDocs;
+        const needsUnsetCategory = docs.some(d => {
+            return !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset');
+        });
+        if (needsUnsetCategory) {
+            columnHeaders.push(new SchemaHeaderField('unset'));
+        }
+        return columnHeaders;
     }
     @computed get notetakingCategoryField() {
-        return 'noteTakingCategory';
+        return 'NotetakingCategory';
     }
     @computed get filteredChildren() {
         return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
@@ -120,8 +128,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // (2) documentView gets unmounted as you remove it from the list
     get Sections() {
         const columnHeaders = this.columnHeaders;
-        const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         let docs = this.childDocs;
+        const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         const rowCol = this.docsDraggedRowCol;
 
         // filter out the currently dragged docs from the child docs, since we will insert them later
@@ -133,10 +141,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
         // this will sort the docs into the correct columns (minus the ones you're currently dragging)
         docs.map(d => {
-            if (!d[this.notetakingCategoryField]) {
-                d[this.notetakingCategoryField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`;
-            }
-            const sectionValue = d[this.notetakingCategoryField] as object;
+            const sectionValue = (d[this.notetakingCategoryField] as object) ?? `unset`;
 
             // look for if header exists already
             const existingHeader = columnHeaders.find(sh => sh.heading === sectionValue.toString());
@@ -310,7 +315,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // how to get the width of a document. Currently returns the width of the column (minus margins)
     // if a note doc. Otherwise, returns the normal width (for graphs, images, etc...)
     getDocWidth(d: Doc) {
-        const heading = d[this.notetakingCategoryField] as object;
+        const heading = (d[this.notetakingCategoryField] as object) ?? 'unset';
         const castedSectionValue = heading.toString();
         const existingHeader = this.columnHeaders.find(sh => sh.heading === castedSectionValue);
         const colStartXCoords = this.columnStartXCoords;
@@ -364,7 +369,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // This function is used to preview where a document will drop in a column once a drag is complete.
     @action
     onPointerOver = (ex: number, ey: number) => {
-        console.log('Pover9ing = ');
         if (this.childDocList) {
             // get the current docs for the column based on the mouse's x coordinate
             // will use again later, which is why we're saving as local
@@ -386,7 +390,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 }
                 pos0 = pos1;
             });
-            console.log('Pover = ' + dropInd + ' ' + this.getColumnFromXCoord(xCoord));
             // we alter the pivot fields of the docs in case they are moved to a new column.
             const colIndex = this.getColumnFromXCoord(xCoord);
             const colHeader = StrCast(this.columnHeaders[colIndex].heading);
@@ -422,7 +425,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         if (docs) {
             docs.map(d => {
                 if (d instanceof Promise) return;
-                const sectionValue = d[this.notetakingCategoryField] as object;
+                const sectionValue = (d[this.notetakingCategoryField] as object) ?? 'unset';
                 if (sectionValue.toString() == colHeader) {
                     docsMatchingHeader.push(d);
                 }
@@ -619,7 +622,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             const col = this.sectionNoteTaking(sections[i][0], sections[i][1]);
             eles.push(col);
             if (i < sections.length - 1) {
-                eles.push(<CollectionNoteTakingViewDivider index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords.bind(this)} xMargin={this.xMargin} />);
+                eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords.bind(this)} xMargin={this.xMargin} />);
             }
         }
         return eles;
@@ -686,7 +689,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return (
             <>
                 {buttonMenu || noviceExplainer ? (
-                    <div className="documentButtonMenu">
+                    <div className="documentButtonMenu" key="buttons">
                         {buttonMenu ? this.buttonMenu : null}
                         {Doc.UserDoc().noviceMode && noviceExplainer ? <div className="documentExplanation">{noviceExplainer}</div> : null}
                     </div>
@@ -694,6 +697,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 <div
                     className="collectionNoteTakingView"
                     ref={this.createRef}
+                    key="notes"
                     style={{
                         overflowY: this.props.isContentActive() ? 'auto' : 'hidden',
                         background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 5ba262418..8452d895f 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -112,6 +112,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
 
     @action
     headingChanged = (value: string, shiftDown?: boolean) => {
+        console.log('HEADING CH');
         const castedValue = this.getValue(value);
         if (castedValue) {
             if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) {
@@ -255,6 +256,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
 
     @computed get innards() {
         TraceMobx();
+        console.log('INNARD START');
         const key = this.props.pivotField;
         const heading = this._heading;
         const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index a0ebe4cdc..3d85d32a0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -393,8 +393,10 @@ function normalizeResults(
         0
     );
     aggBounds.r = aggBounds.x + Math.max(minWidth, aggBounds.r - aggBounds.x);
-    const wscale = panelDim[0] / (aggBounds.r - aggBounds.x);
-    let scale = wscale * (aggBounds.b - aggBounds.y) > panelDim[1] ? panelDim[1] / (aggBounds.b - aggBounds.y) : wscale;
+    const width = aggBounds.r - aggBounds.x === 0 ? 1 : aggBounds.r - aggBounds.x;
+    const height = aggBounds.b - aggBounds.y === 0 ? 1 : aggBounds.b - aggBounds.y;
+    const wscale = panelDim[0] / width;
+    let scale = wscale * height > panelDim[1] ? panelDim[1] / height : wscale;
     if (Number.isNaN(scale)) scale = 1;
 
     Array.from(docMap.entries())
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3e938ec1c..82b377dfa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -496,7 +496,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const currentCol = DocListCast(this.rootDoc.currentInkDoc);
             const rootDocList = DocListCast(this.rootDoc.data);
             currentCol.push(rootDocList[rootDocList.length - 1]);
-            console.log(currentCol);
 
             this._batch?.end();
         }
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index ff04a293c..dc3fc0396 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -116,7 +116,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _loaded = false;
     componentDidMount() {
         reaction(
-            () => DocListCastAsync(this.layoutDoc.data),
+            () => DocListCastAsync(this.layoutDoc[this.fieldKey]),
             async activeTabsAsync => {
                 const activeTabs = await activeTabsAsync;
                 activeTabs && (await SearchBox.foreachRecursiveDocAsync(activeTabs, emptyFunction));
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index 3ab0a3ff2..15d0f88f6 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -1,4 +1,4 @@
-import functionPlot from "function-plot";
+import functionPlot from 'function-plot';
 import { action, computed, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -12,7 +12,6 @@ import { Docs } from '../../documents/Documents';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 
-
 const EquationSchema = createSchema({});
 
 type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
@@ -20,74 +19,83 @@ const EquationDocument = makeInterface(EquationSchema, documentSchema);
 
 @observer
 export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FunctionPlotBox, fieldKey); }
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(FunctionPlotBox, fieldKey);
+    }
     public static GraphCount = 0;
     _plot: any;
-    _plotId = "";
+    _plotId = '';
     _plotEle: any;
     constructor(props: any) {
         super(props);
-        this._plotId = "graph" + FunctionPlotBox.GraphCount++;
+        this._plotId = 'graph' + FunctionPlotBox.GraphCount++;
     }
     componentDidMount() {
         this.props.setContentView?.(this);
-        reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.layoutDoc.width, this.layoutDoc.height, this.dataDoc.xRange, this.dataDoc.yRange],
-            () => this.createGraph());
+        reaction(
+            () => [DocListCast(this.dataDoc[this.fieldKey]).lastElement()?.text, this.layoutDoc.width, this.layoutDoc.height, this.dataDoc.xRange, this.dataDoc.yRange],
+            () => this.createGraph()
+        );
     }
     getAnchor = () => {
         const anchor = Docs.Create.TextanchorDocument({ annotationOn: this.rootDoc });
         anchor.xRange = new List<number>(Array.from(this._plot.options.xAxis.domain));
         anchor.yRange = new List<number>(Array.from(this._plot.options.yAxis.domain));
         return anchor;
-    }
+    };
     @action
     scrollFocus = (doc: Doc, smooth: boolean) => {
-        this.dataDoc.xRange = new List<number>(Array.from(Cast(doc.xRange, listSpec("number"), Cast(this.dataDoc.xRange, listSpec("number"), [-10, 10]))));
-        this.dataDoc.yRange = new List<number>(Array.from(Cast(doc.yRange, listSpec("number"), Cast(this.dataDoc.xRange, listSpec("number"), [-1, 9]))));
+        this.dataDoc.xRange = new List<number>(Array.from(Cast(doc.xRange, listSpec('number'), Cast(this.dataDoc.xRange, listSpec('number'), [-10, 10]))));
+        this.dataDoc.yRange = new List<number>(Array.from(Cast(doc.yRange, listSpec('number'), Cast(this.dataDoc.xRange, listSpec('number'), [-1, 9]))));
         return 0;
-    }
+    };
     createGraph = (ele?: HTMLDivElement) => {
         this._plotEle = ele || this._plotEle;
         const width = this.props.PanelWidth();
         const height = this.props.PanelHeight();
-        const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2").replace(/\\frac\{(.*)\}\{(.*)\}/, "($1/$2)");
+        const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)');
         try {
             this._plot = functionPlot({
-                target: "#" + this._plotEle.id,
+                target: '#' + this._plotEle.id,
                 width,
                 height,
-                xAxis: { domain: Cast(this.dataDoc.xRange, listSpec("number"), [-10, 10]) },
-                yAxis: { domain: Cast(this.dataDoc.xRange, listSpec("number"), [-1, 9]) },
+                xAxis: { domain: Cast(this.dataDoc.xRange, listSpec('number'), [-10, 10]) },
+                yAxis: { domain: Cast(this.dataDoc.xRange, listSpec('number'), [-1, 9]) },
                 grid: true,
                 data: [
                     {
                         fn,
                         // derivative: { fn: "2 * x", updateOnMouseMove: true }
-                    }
-                ]
+                    },
+                ],
             });
         } catch (e) {
             console.log(e);
         }
-    }
+    };
     @computed get theGraph() {
-        return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: "absolute", width: "100%", height: "100%" }}
-            onPointerDown={e => e.stopPropagation()} />;
+        return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: 'absolute', width: '100%', height: '100%' }} onPointerDown={e => e.stopPropagation()} />;
     }
     render() {
         TraceMobx();
-        return (<div
-            style={{
-                pointerEvents: !this.isContentActive() ? "all" : undefined,
-                width: this.props.PanelWidth(),
-                height: this.props.PanelHeight()
-            }}
-        >
-            {this.theGraph}
-            <div style={{
-                display: this.props.isSelected() ? "none" : undefined, position: "absolute", width: "100%", height: "100%",
-                pointerEvents: "all"
-            }} />
-        </div>);
+        return (
+            <div
+                style={{
+                    pointerEvents: !this.isContentActive() ? 'all' : undefined,
+                    width: this.props.PanelWidth(),
+                    height: this.props.PanelHeight(),
+                }}>
+                {this.theGraph}
+                <div
+                    style={{
+                        display: this.props.isSelected() ? 'none' : undefined,
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        pointerEvents: 'all',
+                    }}
+                />
+            </div>
+        );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 21326efaa..2a77210ae 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -60,7 +60,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     @observable private showLinkDropdown: boolean = false;
 
     _reaction: IReactionDisposer | undefined;
-    _delayHide = false;
     constructor(props: Readonly<{}>) {
         super(props);
         runInAction(() => {
@@ -70,16 +69,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         });
     }
 
-    componentDidMount() {
-        this._reaction = reaction(
-            () => SelectionManager.Views(),
-            () => this._delayHide && !(this._delayHide = false) && this.fadeOut(true)
-        );
-    }
-    componentWillUnmount() {
-        this._reaction?.();
-    }
-
     @computed get noAutoLink() {
         return this._noLinkActive;
     }
@@ -108,8 +97,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         return this._activeAlignment;
     }
 
-    public delayHide = () => (this._delayHide = true);
-
     @action
     public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: any) {
         if (this._linkToRef.current?.getBoundingClientRect().width) {