Merge branch 'master' into dataviz-ai-sarah

1 files changed, 30 insertions, 28 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 58f6b1593..73dd7fea3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
-// import assets from './assets/link.png';
+import { Doc } from '../../../../fields/Doc';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
@@ -15,18 +15,18 @@ import './CollectionFreeFormView.scss';
 export type infoArc = [() => any, (res?: any) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
-export const StateEntryFunc = Symbol('StateEntryFunc');
 export const StateMessageGIF = Symbol('StateMessageGIF');
+export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [StateEntryFunc]?: () => any;
     [StateMessageGIF]?: string = '';
+    [StateEntryFunc]?: () => any;
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
+    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
-        this[StateEntryFunc] = entryFunc;
         this[StateMessageGIF] = messageGif;
+        this[StateEntryFunc] = entryFunc;
     }
 }
 
@@ -36,16 +36,17 @@ export class infoState {
  * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
  * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
  * and an arc transition action function (that sets the next state)
+ * @param gif the gif displayed when in this state
  * @param entryFunc a function to call when entering the state
  * @returns an FSA state
  */
 export function InfoState(
     msg: string, //
     arcs: { [key: string]: infoArc },
-    entryFunc?: () => any,
-    gif?: string
+    gif?: string,
+    entryFunc?: () => any
 ) {
-    return new infoState(msg, arcs, entryFunc, gif);
+    return new infoState(msg, arcs, gif, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
@@ -57,7 +58,7 @@ export interface CollectionFreeFormInfoStateProps {
 @observer
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
-    @observable _hide = false;
+    @observable _expanded = false;
 
     constructor(props: any) {
         super(props);
@@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
 
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () =>
-        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
-            return reaction(
-                //
+    initState = () => (this._disposers = 
+        this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
+            arc => reaction(
                 arc.test,
-                res => {
-                    if (res) {
-                        const next = arc.act(res);
-                        this._props.next(next);
-                    }
-                },
+                res => res && this._props.next(arc.act(res)),
                 { fireImmediately: true }
-            );
-        }));
+            )
+        )); // prettier-ignore
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.initState();
     }
     componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
@@ -95,17 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
         this.clearState();
         this.initState();
     }
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         this.clearState();
     }
+
     render() {
+        const gif = this.State?.[StateMessageGIF];
         return (
-            <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
-                <div className="msg">{this.State?.[StateMessage]}</div>
-                <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
+            <div className={'collectionFreeform-infoUI'}>
+                <p className="collectionFreeform-infoUI-msg">
+                    {this.State?.[StateMessage]}
+                    <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+                        {this._expanded ? 'Less...' : 'More...'}
+                    </button>
+                </p>
+                <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
+                    <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
-                <div style={{ position: 'absolute', top: -10, left: -10 }}>
+                <div className="collectionFreeform-infoUI-close">
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                 </div>
             </div>