restoring viewspec algorithm and fixing kvp menu

3 files changed, 52 insertions, 34 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index a05b12292..523fb74bb 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -11,6 +11,7 @@ import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHe
 import { undoBatch } from "../../util/UndoManager";
 import { Doc } from "../../../fields/Doc";
 import { StrCast } from "../../../fields/Types";
+import { optionFocusAriaMessage } from "react-select/src/accessibility";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -286,6 +287,7 @@ export interface KeysDropdownProps {
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
     docs?: Doc[];
+
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -365,10 +367,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     onPointerOut = (e: React.PointerEvent): void => {
         this._canClose = true;
     }
-
+    @action
     renderOptions = (): JSX.Element[] | JSX.Element => {
-        if (!this._isOpen) return <></>;
-
+        // if (!this._isOpen) {
+        //     this.defaultMenuHeight = 0;
+        //     return <></>;
+        // }
         const searchTerm = this._searchTerm.trim() === "New field" ? "" : this._searchTerm;
 
         const keyOptions = searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
@@ -378,7 +382,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         const options = keyOptions.map(key => {
             return <div key={key} className="key-option" style={{
                 border: "1px solid lightgray",
-                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white",
             }}
                 onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
         });
@@ -387,21 +391,35 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (this._key !== this._searchTerm.slice(0, this._key.length)) {
             if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
                 options.push(<div key={""} className="key-option" style={{
-                    border: "1px solid lightgray",
-                    width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+                    border: "1px solid lightgray", width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white",
                 }}
                     onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
                     Create "{this._searchTerm}" key</div>);
             }
         }
 
+        if (options.length === 0) {
+            this.defaultMenuHeight = 0;
+        }
+        else {
+            if (this.props.docs) {
+                let panesize = this.props.docs.length * 30;
+                options.length * 20 + 8 - 10 > panesize ? this.defaultMenuHeight = panesize : this.defaultMenuHeight = options.length * 20 + 8;
+            }
+            else {
+                options.length > 5 ? this.defaultMenuHeight = 108 : this.defaultMenuHeight = options.length * 20 + 8;
+            }
+        }
         return options;
     }
-
+    @action
     renderFilterOptions = (): JSX.Element[] | JSX.Element => {
-        if (!this._isOpen) return <></>;
+        // if (!this._isOpen) {
+        //     this.defaultMenuHeight = 0;
+        //     return <></>;
+        // }
         const keyOptions: string[] = [];
-        const colpos = this._searchTerm.indexOf(":")
+        const colpos = this._searchTerm.indexOf(":");
         const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
         this.props.docs?.forEach((doc) => {
             const key = StrCast(doc[this._key]);
@@ -413,15 +431,28 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
         const options = keyOptions.map(key => {
             return <div key={key} className="key-option" style={{
-                border: "1px solid lightgray",
-                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+                border: "1px solid lightgray", width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white", backgroundColor: "white",
             }}
                 onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelectValue(key); }}>{key}</div>;
         });
+        if (options.length === 0) {
+            this.defaultMenuHeight = 0;
+        }
+        else {
+            if (this.props.docs) {
+                let panesize = this.props.docs.length * 30;
+                options.length * 20 + 8 - 10 > panesize ? this.defaultMenuHeight = panesize : this.defaultMenuHeight = options.length * 20 + 8;
+            }
+            else {
+                options.length > 5 ? this.defaultMenuHeight = 108 : this.defaultMenuHeight = options.length * 20 + 8;
+            }
+
+        }
 
         return options;
     }
 
+    @observable defaultMenuHeight = 0;
 
     render() {
         return (
@@ -434,8 +465,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                         e.stopPropagation();
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
                 <div className="keys-options-wrapper" style={{
-                    backgroundColor: "white",
-                    width: this.props.width, maxWidth: this.props.width,
+                    width: this.props.width, maxWidth: this.props.width, overflow: "scroll", height: this.defaultMenuHeight,
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this._searchTerm.includes(":") ?
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index ba0a259c5..0d09f2031 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -280,7 +280,6 @@ button.add-column {
             background-color: white;
 
             .key-option {
-                //background-color: $light-color;
                 background-color: white;
                 border: 1px solid lightgray;
                 padding: 2px 3px;
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 4025e25f9..9a64298fb 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -112,10 +112,9 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                 [...this.props.docFilters(), ...Cast(this.props.Document._docFilters, listSpec("string"), [])];
         }
         @computed get childDocs() {
-            let rawdocs: (Doc | Promise<Doc>)[] = DocListCast(this.props.Document._searchDocs);
-
-            if (rawdocs.length !== 0) {
-            } else if (this.dataField instanceof Doc) { // if collection data is just a document, then promote it to a singleton list;
+            //DO NOT CHANGE the new algorithm in this class without emailing andy r. first!!
+            let rawdocs: (Doc | Promise<Doc>)[] = [];
+            if (this.dataField instanceof Doc) { // if collection data is just a document, then promote it to a singleton list;
                 rawdocs = [this.dataField];
             } else if (Cast(this.dataField, listSpec(Doc), null)) { // otherwise, if the collection data is a list, then use it.  
                 rawdocs = Cast(this.dataField, listSpec(Doc), null);
@@ -131,24 +130,15 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
 
             const searchDocs = DocListCast(this.props.Document._searchDocs);
-            // if (searchDocs !== undefined && searchDocs.length > 0) {
-            //     let newdocs: Doc[] = [];
-            //     childDocs.forEach((el) => {
-            //         searchDocs.includes(el) ? newdocs.push(el) : undefined;
-            //     });
-            //     childDocs = newdocs;
-            // }
+
+            //DO NOT CHANGE the new algorithm in this class without emailing andy r. first!!
 
             let docsforFilter: Doc[] = childDocs;
             if (searchDocs !== undefined && searchDocs.length > 0) {
                 docsforFilter = [];
-                // let newdocs: Doc[] = [];
-                // let newarray: Doc[] = [];
-                //while (childDocs.length > 0) {
-                //newarray = [];
+
                 childDocs.forEach((d) => {
                     if (d.data !== undefined) {
-                        console.log(d);
                         let newdocs = DocListCast(d.data);
                         if (newdocs.length > 0) {
                             let vibecheck: boolean | undefined = undefined;
@@ -177,8 +167,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                         docsforFilter.push(d);
                     }
                 });
-                //childDocs = newarray;
-                //}
+
             }
             childDocs = docsforFilter;
 
@@ -186,7 +175,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             const docFilters = this.docFilters();
             const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
 
-            return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, this.docFilters(), docRangeFilters, viewSpecScript);
+            return this.props.Document.dontRegisterView ? childDocs : DocUtils.FilterDocs(childDocs, this.docFilters(), docRangeFilters, viewSpecScript);
         }
 
         @action
@@ -491,4 +480,4 @@ import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTex
 import { CollectionView, CollectionViewType } from "./CollectionView";
 import { SelectionManager } from "../../util/SelectionManager";
 import { OverlayView } from "../OverlayView";
-import { setTimeout } from "timers";
+import { setTimeout } from "timers";
\ No newline at end of file