From 6fc9e5b8eb766ca509f09a5ac7d752be57a864dd Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 10 Apr 2024 15:54:26 -0400
Subject: remove collection color styling from this branch

---
 src/client/views/PropertiesView.tsx                | 107 +--------------------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  68 +------------
 src/client/views/nodes/trails/SlideEffect.tsx      |   1 +
 3 files changed, 5 insertions(+), 171 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 6da46c229..15974b9a7 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -43,7 +43,6 @@ import { KeyValueBox } from './nodes/KeyValueBox';
 import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
 import { ExtractColors } from './ExtractColors';
 import TextareaAutosize from 'react-textarea-autosize';
-import { GeneratedResponse, StyleInput, generatePalette } from '../apis/gpt/customization';
 import { FaFillDrip } from 'react-icons/fa';
 
 import { LinkBox } from './nodes/LinkBox';
@@ -109,55 +108,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @observable openStyling: boolean = true;
 
     // GPT styling
-    public styleInput: StyleInput | undefined;
-    @observable loadingStyles: boolean = false;
-    @observable generatedStyles: GeneratedResponse[] = [];
-    @observable inputDocs: Doc[] = [];
-    @observable selectedStyle: number = -1;
-    @observable useImageData = false;
-
-    @observable chatInput: string = '';
-
-    @action
-    setChatInput = (input: string) => {
-        this.chatInput = input;
-    };
-
-    @action
-    setLoading = (loading: boolean) => {
-        this.loadingStyles = loading;
-    };
-
-    @action
-    gptStyling = async () => {
-        // this.generatedStyles = [];
-        this.selectedStyle = -1;
-        this.setLoading(true);
-        console.log('Style input: ', this.styleInput);
-
-        if (!this.styleInput) return;
-
-        try {
-            let res: any;
-            if (this.generatedStyles.length === 0) {
-                res = await generatePalette(this.styleInput, this.useImageData, this.chatInput);
-            } else {
-                res = await generatePalette(this.styleInput, this.useImageData, this.chatInput, this.generatedStyles);
-            }
-            if (typeof res === 'string') {
-                console.log('Generated palettes: ', res);
-                const resObj = JSON.parse(res) as GeneratedResponse[];
-                this.setGeneratedStyles(resObj);
-            }
-        } catch (err) {
-            console.error(err);
-        }
-        this.setLoading(false);
-    };
-
-    @action
-    setGeneratedStyles = (responses: GeneratedResponse[]) => (this.generatedStyles = responses);
-    setInputDocs = (docs: Doc[]) => (this.inputDocs = docs);
+    // removed for now
 
     //Pres Trails booleans:
     @observable openPresTransitions: boolean = true;
@@ -1197,60 +1148,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         }
     };
 
-    @action
-    styleCollection = (i: number) => {
-        this.selectedStyle = i;
-        const resObj = this.generatedStyles[i];
-        if (this.selectedDoc && this.selectedDoc.type === 'collection') {
-            this.selectedDoc.backgroundColor = resObj.collectionBackgroundColor;
-            resObj.documentsWithColors.forEach((elem, i) => (this.inputDocs[i].backgroundColor = elem.color));
-        }
-    };
-
-    // GPT styling
-    @computed get stylingSubMenu() {
-        return (
-            <PropertiesSection title="Styling" isOpen={this.openStyling} setIsOpen={bool => (this.openStyling = bool)} onDoubleClick={() => this.CloseAll()}>
-                <div className="propertiesView-content" style={{ position: 'relative', height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
-                    {this.generatedStyles.length > 0 &&
-                        this.generatedStyles.map((style, i) => (
-                            <div
-                                key={i}
-                                className="propertiesView-palette"
-                                style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }}
-                                onClick={() => this.styleCollection(i)}>
-                                <div style={{ width: '24px', height: '24px', backgroundColor: style.collectionBackgroundColor, borderRadius: '2px' }}></div>
-                                {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map((c, i) => (
-                                    <div key={i} style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div>
-                                ))}
-                            </div>
-                        ))}
-                    {this.loadingStyles && 'Generating styles...'}
-                    <TextareaAutosize
-                        minRows={3}
-                        placeholder="Customize..."
-                        className="styling-chatbox"
-                        autoFocus={true}
-                        value={this.chatInput}
-                        onChange={e => {
-                            this.setChatInput(e.target.value);
-                        }}
-                        onKeyDown={e => {
-                            e.stopPropagation();
-                        }}
-                    />
-                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}>
-                        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-                            <label style={{ margin: '0px' }}>Use Images </label>
-                            <input style={{ margin: '0px' }} type="checkbox" checked={this.useImageData} onChange={action(e => (this.useImageData = e.target.checked))} />
-                        </div>
-                        <Button text={'Regenerate'} type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={this.gptStyling} />
-                    </div>
-                </div>
-            </PropertiesSection>
-        );
-    }
-
     @computed get filtersSubMenu() {
         return (
             <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} onDoubleClick={() => this.CloseAll()}>
@@ -1756,7 +1653,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
                         <div className="propertiesView-name">{this.editableTitle}</div>
                         <div className="propertiesView-type"> {this.currentType} </div>
-                        {this.stylingSubMenu}
+                        {/* {this.stylingSubMenu} */}
                         {this.fieldsSubMenu}
                         {this.optionsSubMenu}
                         {this.linksSubMenu}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c5102070a..958117b91 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -55,7 +55,6 @@ import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import { PropertiesView } from '../../PropertiesView';
 import { ExtractColors } from '../../ExtractColors';
-import { smartLayout, smartLayout2, StyleInputDocument } from '../../../apis/gpt/customization';
 import { extname } from 'path';
 import { RichTextField } from '../../../../fields/RichTextField';
 
@@ -1688,74 +1687,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     // gpt layout
     @action
-    gptLayout = async () => {
-        const docLayouts = this.childDocs.map(doc => ({
-            width: this.roundToRoundNumber(NumCast(doc.width)),
-            height: this.roundToRoundNumber(NumCast(doc.height)),
-            // content: StrCast(doc.title),
-        }));
-        console.log('Doc layouts', docLayouts);
-
-        const res = await smartLayout2(docLayouts);
-        console.log('Smart layout result', res);
-        // make type-safe
-        const resObj = JSON.parse(res) as any[];
-        resObj.forEach((elem, i) => {
-            this.childDocs[i].x = elem.x;
-            this.childDocs[i].y = elem.y;
-        });
-
-        // refit collection
-        setTimeout(() => {
-            this.fitContentOnce();
-        }, 500);
-    };
+    gptLayout = async () => {};
 
     // gpt styling
     @action
-    gptStyling = async () => {
-        // clear it in properties instead
-        if (!PropertiesView.Instance) return;
-        this.openProperties();
-        PropertiesView.Instance.setGeneratedStyles([]);
-        PropertiesView.Instance.selectedStyle = -1;
-        PropertiesView.Instance.useImageData = false;
-
-        console.log('Title', this.Document.title);
-        console.log('bgcolor', this.layoutDoc._backgroundColor);
-        // doc.backgroundColor
-        const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
-        const imgDocs = this.childDocs.filter(doc => doc.type == 'image');
-        const imgUrls = imgDocs.map(doc => this.choosePath((doc.data as ImageField).url));
-
-        const imageElements = await ExtractColors.loadImagesUrl(imgUrls);
-        const colors = await Promise.all(imageElements.map(elem => ExtractColors.getImgColors(elem)));
-        let colorHexes = colors
-            .reduce((acc, curr) => acc.concat(curr), [])
-            .map(color => color.hex)
-            .slice(0, 10);
-        console.log('Hexes', colorHexes);
-
-        PropertiesView.Instance?.setInputDocs(inputDocs);
-
-        // also pass it colors
-        const gptInput: StyleInputDocument[] = inputDocs.map((doc, i) => ({
-            id: i,
-            textContent: (doc.text as RichTextField)?.Text,
-            textSize: 16,
-        }));
-
-        const collectionDescription = StrCast(this.Document.title);
-
-        const styleInput = {
-            collectionDescription,
-            documents: gptInput,
-            imageColors: colorHexes,
-        };
-
-        PropertiesView.Instance.styleInput = styleInput;
-        PropertiesView.Instance.gptStyling();
-    };
+    gptStyling = async () => {};
 
     onContextMenu = (e: React.MouseEvent) => {
         if (this._props.isAnnotationOverlay || !ContextMenu.Instance) return;
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index eee52c3ec..ba997c62a 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,6 +1,7 @@
 import { useSpring, animated, easings, to } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
 import { PresEffect, PresEffectDirection } from './PresEnums';
+import './SlideEffect.scss';
 
 interface Props {
     dir: PresEffectDirection;
-- 
cgit v1.2.3-70-g09d2