From 56568bbb0db34c0129b6a3c8770ce3f889dcbd31 Mon Sep 17 00:00:00 2001
From: IEatChili <nanunguyen99@gmail.com>
Date: Mon, 10 Jun 2024 11:06:02 -0400
Subject: feat: ui changes

---
 .../collectionFreeForm/ImageLabelBox.scss          | 23 +++++++++
 .../collectionFreeForm/ImageLabelBox.tsx           | 60 ++++++++++++++++++----
 .../collectionFreeForm/MarqueeOptionsMenu.tsx      |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |  9 ++--
 4 files changed, 79 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss b/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss
index d0c12814c..5f2ce4e14 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss
@@ -1,3 +1,18 @@
+.image-box-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 10px;
+    line-height: 1;
+    background: none;
+    z-index: 1000;
+    padding: 0px;
+    overflow: auto;
+    cursor: default;
+}
+
 .image-label-list {
     display: flex;
     flex-direction: column;
@@ -16,6 +31,7 @@
             text-align: center; // Centers the text of the paragraph
             font-size: large;
             vertical-align: middle;
+            margin-left: 10px;
         }
 
         .IconButton {
@@ -24,3 +40,10 @@
         }
     }
 }
+
+.image-information {
+    display: flex;
+    flex-direction: column;
+    //align-items: center;
+    width: 100%;
+}
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 1c0035f0d..83ae69cfb 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -12,6 +12,11 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './ImageLabelBox.scss';
 import { MainView } from '../../MainView';
 import { MarqueeView } from './MarqueeView';
+import 'ldrs/ring';
+import { ring } from 'ldrs';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { ImageCast } from '../../../../fields/Types';
+import { DocData } from '../../../../fields/DocSymbols';
 
 @observer
 export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -24,12 +29,14 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _loading: boolean = true;
     @observable _currentLabel: string = '';
     @observable _labelGroups: string[] = [];
+    @observable _selectedImages: Doc[] = [];
+    @observable _displayImageInformation: boolean = false;
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
         ImageLabelBox.Instance = this;
-
+        ring.register();
         console.log('Image Box Has Been Initialized');
     }
 
@@ -77,14 +84,32 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this._loading = false;
     };
 
+    @action
+    setSelectedImages = (selected: Doc[]) => {
+        this._selectedImages = selected;
+    };
+
     render() {
         if (this._loading) {
-            return <div className="searchBox-container">Loading...</div>;
+            return (
+                <div className="image-box-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                    <l-ring size="60" color="white" />
+                </div>
+            );
         }
 
         return (
-            <div className="searchBox-container">
-                <div className="searchBox-bar">
+            <div className="searchBox-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                <div className="searchBox-bar" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                    <IconButton
+                        tooltip={'See image information'}
+                        onPointerDown={() => {
+                            this._displayImageInformation = !this._displayImageInformation;
+                        }}
+                        icon={this._displayImageInformation ? <FontAwesomeIcon icon="caret-up" /> : <FontAwesomeIcon icon="caret-down" />}
+                        color={MarqueeOptionsMenu.Instance.userColor}
+                        style={{ width: '19px' }}
+                    />
                     <input
                         defaultValue=""
                         autoComplete="off"
@@ -93,7 +118,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         //     e.stopPropagation();
                         // }}
                         type="text"
-                        placeholder="Input a group to put images into..."
+                        placeholder="Input labels for image groupings..."
                         aria-label="label-input"
                         id="new-label"
                         className="searchBox-input"
@@ -101,7 +126,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         ref={this._inputRef}
                     />
                     <IconButton
-                        tooltip={'Add group'}
+                        tooltip={'Add a label'}
                         onPointerDown={() => {
                             const input = document.getElementById('new-label') as HTMLInputElement;
                             const newLabel = input.value;
@@ -113,11 +138,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         color={MarqueeOptionsMenu.Instance.userColor}
                         style={{ width: '19px' }}
                     />
-                    {this._labelGroups.length > 0 ? (
-                        <IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
-                    ) : (
-                        <div></div>
-                    )}
+                    {this._labelGroups.length > 0 ? <IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={Colors.MEDIUM_BLUE} style={{ width: '19px' }} /> : <div></div>}
                 </div>
                 <div>
                     <div className="image-label-list">
@@ -139,6 +160,23 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })}
                     </div>
                 </div>
+                {this._displayImageInformation ? (
+                    <div className="image-information">
+                        {this._selectedImages.map(doc => {
+                            const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.');
+                            return (
+                                <div>
+                                    <img src={`${name}_o.${type}`}></img>
+                                    {(doc[DocData].data_labels as string).split('\n').map(label => {
+                                        return <div className="image-label">{label}</div>;
+                                    })}
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div></div>
+                )}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index f02cd9d45..b94a22d04 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -39,7 +39,7 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
                 <IconButton tooltip="Summarize Documents" onPointerDown={this.summarize} icon={<FontAwesomeIcon icon="compress-arrows-alt" />} color={this.userColor} />
                 <IconButton tooltip="Delete Documents" onPointerDown={this.delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={this.userColor} />
                 <IconButton tooltip="Pin selected region" onPointerDown={this.pinWithView} icon={<FontAwesomeIcon icon="map-pin" />} color={this.userColor} />
-                <IconButton tooltip="Classify Images" onPointerDown={this.classifyImages} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
+                <IconButton tooltip="Classify and Sort Images" onPointerDown={this.classifyImages} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
             </>
         );
         return this.getElement(buttons);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index bb5a2a66e..f98883bff 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -456,6 +456,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         }
 
         this._selectedDocs = this.marqueeSelect(false, DocumentType.IMG); // Get the selected documents from the marquee select.
+        ImageLabelBox.Instance!.setSelectedImages(this._selectedDocs);
 
         const imageInfos = this._selectedDocs.map(async doc => {
             if (!doc[DocData].data_labels) {
@@ -478,7 +479,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         }); // Add the labels as fields to each image.
 
         ImageLabelBox.Instance!.endLoading();
-        console.log('Complete!');
+        console.log(this._selectedDocs);
     });
 
     /**
@@ -502,8 +503,10 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                                    { label: '', similarityScore: 0, }); // prettier-ignore
             doc[DocData].data_label = mostSimilarLabelCollect; // The label most similar to the image's contents.
         });
-        this._props.Document._type_collection = CollectionViewType.Time; // Change the collection view to a Time view.
-        this._props.Document.pivotField = 'data_label'; // Sets the pivot to be the 'data_label'.
+        if (this._selectedDocs) {
+            this._props.Document._type_collection = CollectionViewType.Time; // Change the collection view to a Time view.
+            this._props.Document.pivotField = 'data_label'; // Sets the pivot to be the 'data_label'.
+        }
     });
 
     @undoBatch
-- 
cgit v1.2.3-70-g09d2