From db97843dccf820231bec0f9a2f8d9de0b64bb71f Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Thu, 11 Jun 2020 20:56:48 -0400
Subject: ability to parse back and forth through internal seaarch results

---
 src/client/views/pdf/PDFViewer.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 5bad248be..882e48de7 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -333,6 +333,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     nextAnnotation = () => {
         this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1);
         this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]);
+        this.Document.searchIndex = this.Index;
+        this.Document.length=this.allAnnotations.length;
+        console.log(this.Index);
+
     }
 
     @action
@@ -399,6 +403,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
                 phraseSearch: true,
                 query: searchString
             });
+            console.log(this.Index);
+            this.Document.searchIndex = this.Index;
+            this.Document.length=this.allAnnotations.length;
         }
         else if (this._mainCont.current) {
             const executeFind = () => {
@@ -412,7 +419,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
             };
             this._mainCont.current.addEventListener("pagesloaded", executeFind);
             this._mainCont.current.addEventListener("pagerendered", executeFind);
+            console.log(this.Index);
+            this.Document.searchIndex = this.Index;
+            this.Document.length=this.allAnnotations.length;
         }
+
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From fb5291760d908fe54ec0134cbe3868d666b02b19 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Mon, 15 Jun 2020 20:49:10 -0400
Subject: bugfixing with expading search terms within a bucket

---
 .../views/nodes/formattedText/FormattedTextBox.tsx | 10 ++--
 src/client/views/pdf/PDFViewer.tsx                 | 18 +++++--
 src/client/views/search/SearchBox.tsx              | 32 +++++-------
 src/client/views/search/SearchItem.tsx             | 60 +++++++++++++++++-----
 4 files changed, 77 insertions(+), 43 deletions(-)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index aad4e82b5..dff42bcb1 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -273,7 +273,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
             this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView());
             let index = this._searchIndex;
-            console.log(index);
 
             Doc.GetProto(this.dataDoc).searchIndex = index;
             Doc.GetProto(this.dataDoc).length=length;
@@ -295,7 +294,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
             this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView());
             let index = this._searchIndex;
-            console.log(index);
 
             Doc.GetProto(this.dataDoc).searchIndex = index;
             Doc.GetProto(this.dataDoc).length=length;
@@ -702,12 +700,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
         this.setupEditor(this.config, this.props.fieldKey);
 
-        this._disposers.search = reaction(() => this.rootDoc.searchMatch,
-            search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(),
-            { fireImmediately: true });
-        this._disposers.search2 = reaction(() => this.rootDoc.searchMatch2,
+        this._disposers.search = reaction(() => this.rootDoc.searchMatch2,
             search => search ? this.highlightSearchTerms2([Doc.SearchQuery()]) : this.unhighlightSearchTerms(),
             { fireImmediately: true });
+        this._disposers.search2 = reaction(() => this.rootDoc.searchMatch,
+            search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(),
+            { fireImmediately: true });
 
         this._disposers.record = reaction(() => this._recording,
             () => {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 882e48de7..f23923279 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -107,6 +107,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     private _scrollTopReactionDisposer?: IReactionDisposer;
     private _filterReactionDisposer?: IReactionDisposer;
     private _searchReactionDisposer?: IReactionDisposer;
+    private _searchReactionDisposer2?: IReactionDisposer;
     private _viewer: React.RefObject<HTMLDivElement> = React.createRef();
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _selectionText: string = "";
@@ -144,6 +145,17 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         runInAction(() => this._showWaiting = this._showCover = true);
         this.props.startupLive && this.setupPdfJsViewer();
         this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => {
+            if (search) {
+                this.search(Doc.SearchQuery(), false);
+                this._lastSearch = Doc.SearchQuery();
+            }
+            else {
+                setTimeout(() => this._lastSearch === "mxytzlaf" && this.search("mxytzlaf", true), 200); // bcz: how do we clear search highlights?
+                this._lastSearch && (this._lastSearch = "mxytzlaf");
+            }
+        }, { fireImmediately: true });
+
+        this._searchReactionDisposer2 = reaction(() => this.Document.searchMatch2, search => {
             if (search) {
                 this.search(Doc.SearchQuery(), true);
                 this._lastSearch = Doc.SearchQuery();
@@ -325,7 +337,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     }
     @action
     prevAnnotation = () => {
+        console.log(this.Index);
         this.Index = Math.max(this.Index - 1, 0);
+        console.log(this.Index);
+        console.log(this.allAnnotations);
         this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]);
     }
 
@@ -335,7 +350,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]);
         this.Document.searchIndex = this.Index;
         this.Document.length=this.allAnnotations.length;
-        console.log(this.Index);
 
     }
 
@@ -403,7 +417,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
                 phraseSearch: true,
                 query: searchString
             });
-            console.log(this.Index);
             this.Document.searchIndex = this.Index;
             this.Document.length=this.allAnnotations.length;
         }
@@ -419,7 +432,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
             };
             this._mainCont.current.addEventListener("pagesloaded", executeFind);
             this._mainCont.current.addEventListener("pagerendered", executeFind);
-            console.log(this.Index);
             this.Document.searchIndex = this.Index;
             this.Document.length=this.allAnnotations.length;
         }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 5ec911221..596a0cac7 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -376,7 +376,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if (reset){
             this.layoutDoc._searchString="";
         }
-        console.log(this.layoutDoc._searchString);  
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
         this.buckets=[];
         this.new_buckets={};
@@ -430,7 +429,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
 
         let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `default bucket`});
-        bucket.targetDoc = bucket;      
         bucket._viewType === CollectionViewType.Stacking;
         bucket._height=185;
         bucket.bucketfield = "results";
@@ -443,7 +441,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.firststring });
         firstbucket._height=185;
 
-        firstbucket.targetDoc = firstbucket;      
         firstbucket._viewType === CollectionViewType.Stacking;
         firstbucket.bucketfield = this.firststring;
         firstbucket.isBucket=true;
@@ -456,7 +453,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if (this.secondstring!==""){
         let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring });
         secondbucket._height=185;
-        secondbucket.targetDoc = secondbucket;      
         secondbucket._viewType === CollectionViewType.Stacking;
         secondbucket.bucketfield = this.secondstring;
         secondbucket.isBucket=true;
@@ -622,7 +618,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._visibleElements = [<div className="no-result">No Search Results</div>];
             //this._visibleDocuments= Docs.Create.
             let noResult= Docs.Create.TextDocument("",{title:"noResult"})
-            noResult.targetDoc=noResult;
             noResult.isBucket =false;
             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult);
             return;
@@ -673,10 +668,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             }
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
                             let lines = new List<string>(result[2]);
-                            result[0].lines=lines
+                            result[0].lines=lines;
                             result[0].highlighting=highlights.join(", ");
                             this._visibleDocuments[i] = result[0];
-                            result[0].targetDoc=result[0];
 
                             this._isSearch[i] = "search";
                         }
@@ -694,11 +688,13 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1;
                             }
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            result[0].lines=new List<string>(result[2]);
+
+                            let lines = new List<string>(result[2]);
+
+                            result[0].lines= lines;
                             result[0].highlighting=highlights.join(", ");
                             if(i<this._visibleDocuments.length){
                             this._visibleDocuments[i]=result[0];
-                            result[0].targetDoc=result[0];
                             this._isSearch[i] = "search";
                             }
                             }
@@ -713,33 +709,30 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             let result = this._results[i];
             if (!this.blockedTypes.includes(StrCast(result[0].type))){
             if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
-                console.log(StrCast(result[0].type));
                 if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){
+                    result[0].parent= this.buckets![1];
                     Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]);
                     this.bucketcount[1]+=1;
-                    console.log("1 count")
                 }
                 else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[2]<3){
+                    result[0].parent= this.buckets![2];
                     Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]);
                     this.bucketcount[2]+=1;
-                    console.log("2 count")
                 }
                 else if (this.bucketcount[0]<3){
                     //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
                     //this.bucketcount[0]+=1;
                     const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                    result[0].lines=new List<string>(result[2]);
+                    let lines = new List<string>(result[2]);
+                    result[0].lines= lines;
                     result[0].highlighting=highlights.join(", ");
-                    result[0].targetDoc=result[0];
                     Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
                 }
                 this._isSorted[i]="sorted"; 
             }
         }
         }
-        console.log(this.bucketcount[0]);
-        console.log(this.bucketcount[1]);
-        console.log(this.bucketcount[2]);
+
         if (this.buckets![0]){
         this.buckets![0]._height = this.bucketcount[0]*55 + 25;
         }
@@ -760,11 +753,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     if ((this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
                         let result = this._results[i];
                         if (!this.blockedTypes.includes(StrCast(result[0].type))){
-
                         const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                        result[0].lines=new List<string>(result[2]);
+                        let lines = new List<string>(result[2]);
+                        result[0].lines= lines;
                         result[0].highlighting=highlights.join(", ");
-                        result[0].targetDoc=result[0];
                         Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
                     }
                 }
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 63baf625e..c1fd2d0b8 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -174,16 +174,40 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
     @computed get query() { return StrCast(this.lookupField("query")); }
 
+    private _oldHeight: number = 46;
+
     componentDidMount() {
+        let parent: Doc |undefined = undefined;
+        let height = 0;
+        if (this.rootDoc.parent){
+            parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
+            height=(NumCast(parent._height));
+        }
 
         this._reactionDisposer = reaction(
             () => this.rootDoc.searchIndex,
             search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true }
         );
-
         this._reactionDisposer2 = reaction(
             () => this._useIcons,
-            el=> {console.log("YUH"); 
+            el=> { 
+                if (this.rootDoc.parent){
+                    parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
+                    height=(NumCast(parent._height));
+                };
+                console.log(height);
+                console.log(this._oldHeight);
+            setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null;
+                parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null;
+                this._mainRef.current?.getBoundingClientRect()?  this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null;
+                // this._oldHeight 55? this._oldHeight =55:null;
+            }, 1);
+        }
+        );
+
+        this._reactionDisposer3 = reaction(
+            () => this._displayLines,
+            el=> { 
             setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1);
         }
         );
@@ -195,6 +219,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         this.rootDoc.searchMatch = undefined;
         this._reactionDisposer && this._reactionDisposer();
         this._reactionDisposer2 && this._reactionDisposer2();
+        this._reactionDisposer3 && this._reactionDisposer3();
 
     }
 
@@ -203,6 +228,8 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
     private _reactionDisposer?: IReactionDisposer;
     private _reactionDisposer2?: IReactionDisposer;
+    private _reactionDisposer3?: IReactionDisposer;
+
 
     
     @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)}
@@ -371,7 +398,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
     }
 
     @computed get searchElementDoc() { return this.rootDoc; }
-    @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; }
+    // @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; }
 
     @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
     childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined;
@@ -398,23 +425,20 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
     
     @action
     returnLines(){
+        if ((Cast(this.rootDoc.lines, listSpec("string")))!.length>1){
         if (!this._displayLines) {
-            return <div style={{height:50, width: 10}}
+            console.log(Cast(this.rootDoc.lines, listSpec("string")));
+            return <div style={{width: 10}}
             onPointerDown={action(() => {
                 this._displayLines = !this._displayLines;
                 //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
             })}
             //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
              >
-            {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">`${l}`</div>)}
+            {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div style={{overflow:"visible"}}id={i.toString()} className="searchItem-highlighting">{l}</div>)}
             </div>;;
         }
-        else {
-        return <button style={{padding:2}} onClick={action(() => { this._displayLines = false; 
-        })} >
-            <FontAwesomeIcon icon="arrow-up" size="sm" />
-        </button>;
-        }
+    }
     }
     
     //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); 
@@ -423,14 +447,21 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
     returnButtons(){
         return <div>
-            {this.returnLines()}
+        <div> 
+        {this.rootDoc!.type === DocumentType.PDF? <button style={{padding:2}} onClick={action(() => { this._displayLines = false; 
+        })} >
+            <FontAwesomeIcon icon="arrow-up" size="sm" />
+        </button>: null}
             {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`}
              <button onClick={this.nextHighlight} style={{padding:2}}>
                         <FontAwesomeIcon icon="arrow-up" size="sm"  /> 
                         </button>
                         <button onClick={this.nextHighlight2} style={{padding:2}}>                    
                         <FontAwesomeIcon icon="arrow-down" size="sm"  />
-                        </button>
+                        </button></div>
+                        <div style={{background: "lightgrey"}}>
+            {this.returnLines()}
+        </div>
         </div>
     }
 
@@ -472,6 +503,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             </div>
         }
         else {
+            console.log(this.rootDoc.highlighting); 
         return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
             <div ref={this._mainRef} className="searchItem"  onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
                 <div className="searchItem-body" onClick={this.onClick}>
@@ -480,7 +512,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
                         <div className="searchItem-highlighting">
                         {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}</div>
                         <div className={`icon-${this._displayLines ? "q" : "a"}`}>
-                        {NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} 
+                        {NumCast(this.rootDoc.length) > 1 ?this.returnButtons(): null} 
                         </div>
                         </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 435995b1fb8ef52d2f76b89ca161e4372fb79cfd Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 28 Jun 2020 19:09:12 -0400
Subject: some weird pdf css was causing .pdfViewer .page styles to get added
 when pdfs were not -interactive.  This made the page jump on deselect.  so
 changed pdfViewer csss labels to pdfViewerDash

---
 src/client/views/nodes/PDFBox.scss  |  4 ++--
 src/client/views/pdf/PDFViewer.scss | 20 ++++++++++----------
 src/client/views/pdf/PDFViewer.tsx  | 22 +++++++++++-----------
 3 files changed, 23 insertions(+), 23 deletions(-)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index f55c4f7d6..c6a83b662 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -199,7 +199,7 @@
 }
 
 .pdfBox {
-    .pdfViewer-text {
+    .pdfViewerDash-text {
         .textLayer {
             span {
                 user-select: none;
@@ -210,7 +210,7 @@
 
 .pdfBox-interactive {
     pointer-events: all;
-    .pdfViewer-text {
+    .pdfViewerDash-text {
         .textLayer {
             span {
                 user-select: text;
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index affffc44e..cfe0b3d4b 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -1,5 +1,5 @@
  
-.pdfViewer, .pdfViewer-interactive {
+.pdfViewerDash, .pdfViewerDash-interactive {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -31,26 +31,26 @@
         position: relative;
         border: unset;
     }
-    .pdfViewer-text-selected {
+    .pdfViewerDash-text-selected {
         .textLayer{
            pointer-events: all;
            user-select: text;
         }
     }
-    .pdfViewer-text {
+    .pdfViewerDash-text {
         transform-origin: top left;
         .textLayer {
             will-change: transform;
         }
     }
 
-    .pdfViewer-dragAnnotationBox {
+    .pdfViewerDash-dragAnnotationBox {
         position:absolute;
         background-color: transparent;
         opacity: 0.1;
     }
 
-    .pdfViewer-overlay, .pdfViewer-overlay-inking {
+    .pdfViewerDash-overlay, .pdfViewerDash-overlay-inking {
         transform-origin: left top;
         position: absolute;
         top: 0px;
@@ -58,11 +58,11 @@
         display: inline-block;
         width:100%;
     }
-    .pdfViewer-overlay {
+    .pdfViewerDash-overlay {
         pointer-events: none;
     }
     
-    .pdfViewer-annotationLayer {
+    .pdfViewerDash-annotationLayer {
         position: absolute;
         transform-origin: left top;
         top: 0;
@@ -70,12 +70,12 @@
         pointer-events: none;
         mix-blend-mode: multiply; // bcz: makes text fuzzy!
 
-        .pdfViewer-annotationBox {
+        .pdfViewerDash-annotationBox {
             position: absolute;
             background-color: rgba(245, 230, 95, 0.616);
         }
     }
-    .pdfViewer-waiting {
+    .pdfViewerDash-waiting {
         width: 70%;
         height: 70%;
         margin : 15%;
@@ -86,7 +86,7 @@
     }
 }
 
-.pdfViewer-interactive {
+.pdfViewerDash-interactive {
     pointer-events: all;
 }
    
\ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 9f40a3ad7..8185dd67f 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -357,7 +357,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1);
         this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]);
         this.Document.searchIndex = this.Index;
-        this.Document.length=this.allAnnotations.length;
+        this.Document.length = this.allAnnotations.length;
 
     }
 
@@ -426,7 +426,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
                 query: searchString
             });
             this.Document.searchIndex = this.Index;
-            this.Document.length=this.allAnnotations.length;
+            this.Document.length = this.allAnnotations.length;
         }
         else if (this._mainCont.current) {
             const executeFind = () => {
@@ -441,7 +441,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
             this._mainCont.current.addEventListener("pagesloaded", executeFind);
             this._mainCont.current.addEventListener("pagerendered", executeFind);
             this.Document.searchIndex = this.Index;
-            this.Document.length=this.allAnnotations.length;
+            this.Document.length = this.allAnnotations.length;
         }
 
     }
@@ -520,7 +520,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
                     if (rect.width !== this._mainCont.current.clientWidth &&
                         (i === 0 || !intersectRect(clientRects[i], clientRects[i - 1]))) {
                         const annoBox = document.createElement("div");
-                        annoBox.className = "pdfViewer-annotationBox";
+                        annoBox.className = "pdfViewerDash-annotationBox";
                         // transforms the positions from screen onto the pdf div
                         annoBox.style.top = ((rect.top - boundingRect.top) * scaleX / this._zoomed + this._mainCont.current.scrollTop).toString();
                         annoBox.style.left = ((rect.left - boundingRect.left) * scaleX / this._zoomed).toString();
@@ -547,7 +547,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         this._savedAnnotations.clear();
         if (this._marqueeing) {
             if (this._marqueeWidth > 10 || this._marqueeHeight > 10) {
-                const marquees = this._mainCont.current!.getElementsByClassName("pdfViewer-dragAnnotationBox");
+                const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox");
                 if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation. 
                     const style = (marquees[0] as HTMLDivElement).style;
                     const copy = document.createElement("div");
@@ -558,7 +558,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
                     copy.style.border = style.border;
                     copy.style.opacity = style.opacity;
                     (copy as any).marqueeing = true;
-                    copy.className = "pdfViewer-annotationBox";
+                    copy.className = "pdfViewerDash-annotationBox";
                     this.createAnnotation(copy, this.getPageFromScroll(this._marqueeY));
                 }
 
@@ -676,7 +676,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
 
     @computed get annotationLayer() {
         TraceMobx();
-        return <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.Document._nativeHeight), transform: `scale(${this._zoomed})` }} ref={this._annotationLayer}>
+        return <div className="pdfViewerDash-annotationLayer" style={{ height: NumCast(this.Document._nativeHeight), transform: `scale(${this._zoomed})` }} ref={this._annotationLayer}>
             {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno =>
                 <Annotation {...this.props} focus={this.props.focus} dataDoc={this.dataDoc} fieldKey={this.props.fieldKey} anno={anno} key={`${anno[Id]}-annotation`} />)
             }
@@ -718,13 +718,13 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         </div>;
     }
     @computed get pdfViewerDiv() {
-        return <div className={"pdfViewer-text" + ((!DocumentDecorations.Instance.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
+        return <div className={"pdfViewerDash-text" + ((!DocumentDecorations.Instance.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
     }
     @computed get contentScaling() { return this.props.ContentScaling(); }
     @computed get standinViews() {
         return <>
             {this._showCover ? this.getCoverImage() : (null)}
-            {this._showWaiting ? <img className="pdfViewer-waiting" key="waiting" src={"/assets/loading.gif"} /> : (null)}
+            {this._showWaiting ? <img className="pdfViewerDash-waiting" key="waiting" src={"/assets/loading.gif"} /> : (null)}
         </>;
     }
     marqueeWidth = () => this._marqueeWidth;
@@ -736,7 +736,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     contentZoom = () => this._zoomed;
     render() {
         TraceMobx();
-        return <div className={"pdfViewer" + (this.active() ? "-interactive" : "")} ref={this._mainCont}
+        return <div className={"pdfViewerDash" + (this.active() ? "-interactive" : "")} ref={this._mainCont}
             onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick}
             style={{
                 overflowX: this._zoomed !== 1 ? "scroll" : undefined,
@@ -764,7 +764,7 @@ interface PdfViewerMarqueeProps {
 @observer
 class PdfViewerMarquee extends React.Component<PdfViewerMarqueeProps> {
     render() {
-        return !this.props.isMarqueeing() ? (null) : <div className="pdfViewer-dragAnnotationBox"
+        return !this.props.isMarqueeing() ? (null) : <div className="pdfViewerDash-dragAnnotationBox"
             style={{
                 left: `${this.props.x()}px`, top: `${this.props.y()}px`,
                 width: `${this.props.width()}px`, height: `${this.props.height()}px`,
-- 
cgit v1.2.3-70-g09d2