Merge branch 'master' of https://github.com/brown-dash/Dash-Web

7 files changed, 211 insertions, 228 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d38e2292c..8eeceaa15 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -58,7 +58,6 @@ import { SliderBox } from '../views/nodes/SliderBox';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import { PresBox } from '../views/nodes/trails/PresBox';
 import { PresElementBox } from '../views/nodes/trails/PresElementBox';
-import { ImportElementBox } from '../views/nodes/importBox/ImportElementBox';
 import { VideoBox } from '../views/nodes/VideoBox';
 import { WebBox } from '../views/nodes/WebBox';
 import { SearchBox } from '../views/search/SearchBox';
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5802d5ee0..e406d89e7 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -15,7 +15,7 @@ import { SharingManager, User } from './SharingManager';
 import { listSpec } from '../../fields/Schema';
 import { DateField } from '../../fields/DateField';
 import { Id } from '../../fields/FieldSymbols';
-import { Button, IconButton, Size } from 'browndash-components';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 /**
  * Interface for options for the react-select component
@@ -281,7 +281,7 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <div className="group-create" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
@@ -297,10 +297,10 @@ export class GroupManager extends React.Component<{}> {
                         />
                     </div>
                 </div>
-                <div className="group-input" style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
                 </div>
-                <div style={{border: StrCast(Doc.UserDoc().userColor)}}>
+                <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <Select
                         className="select-users"
                         isMulti
@@ -331,8 +331,8 @@ export class GroupManager extends React.Component<{}> {
                         }}
                     />
                 </div>
-                <div className={"create-button"}>
-                    <Button text={"Create"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                <div className={'create-button'}>
+                    <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
                 </div>
             </div>
         );
@@ -366,29 +366,25 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <div className="group-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
                     <p>
                         <b>Manage Groups</b>
                     </p>
-                    <Button icon={<FontAwesomeIcon icon={'plus'}/>} iconPlacement={'left'} text={"Create Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
-                    <div className={'close-button'} >
-                        <Button
-                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                            onClick={this.close}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                    <Button icon={<FontAwesomeIcon icon={'plus'} />} iconPlacement={'left'} text={'Create Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
+                    <div className={'close-button'}>
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
                 </div>
                 <div className="main-container">
                     <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
                         Name
-                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
+                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
-                    <div className="group-body" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                    <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                    <div className="group-body" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                         {groups.map(group => (
                             <div className="group-row" key={StrCast(group.title || group.groupName)}>
                                 <div className="group-name">{StrCast(group.title || group.groupName)}</div>
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index f2050dc61..057f94f64 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -1,14 +1,14 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import Select from "react-select";
-import { Doc } from "../../fields/Doc";
-import { StrCast } from "../../fields/Types";
-import { MainViewModal } from "../views/MainViewModal";
-import { GroupManager, UserOptions } from "./GroupManager";
-import "./GroupMemberView.scss";
-import { Button, IconButton, Size } from "browndash-components";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import Select from 'react-select';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+import { MainViewModal } from '../views/MainViewModal';
+import { GroupManager, UserOptions } from './GroupManager';
+import './GroupMemberView.scss';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -17,44 +17,37 @@ interface GroupMemberViewProps {
 
 @observer
 export class GroupMemberView extends React.Component<GroupMemberViewProps> {
-
-    @observable private memberSort: "ascending" | "descending" | "none" = "none";
+    @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none';
 
     private get editingInterface() {
         let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
-        members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
+        members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members;
 
         const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
 
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
-        return (!this.props.group ? null :
-            <div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+        return !this.props.group ? null : (
+            <div className="editing-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 <div className="editing-header">
                     <input
                         className="group-title"
-                        style={{ marginLeft: !hasEditAccess ? "-14%" : 0 }}
+                        style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }}
                         value={StrCast(this.props.group.title || this.props.group.groupName)}
-                        onChange={e => this.props.group.title = e.currentTarget.value}
-                        disabled={!hasEditAccess}
-                    >
-                    </input>
-                    <div className={"memberView-closeButton"} >
-                        <Button
-                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                            onClick={action(this.props.onCloseButtonClick)}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        onChange={e => (this.props.group.title = e.currentTarget.value)}
+                        disabled={!hasEditAccess}></input>
+                    <div className={'memberView-closeButton'}>
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    {GroupManager.Instance.hasEditAccess(this.props.group) ?
+                    {GroupManager.Instance.hasEditAccess(this.props.group) ? (
                         <div className="group-buttons">
-                            <div style={{border: StrCast(Doc.UserDoc().userColor)}} >
-                                <Select 
+                            <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
+                                <Select
                                     className="add-member-dropdown"
                                     isSearchable={true}
                                     options={options}
                                     onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
-                                    placeholder={"Add members"}
+                                    placeholder={'Add members'}
                                     value={null}
                                     styles={{
                                         control: () => ({
@@ -78,52 +71,33 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                                     }}
                                 />
                             </div>
-                            <div className={"delete-button"}>
-                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            <div className={'delete-button'}>
+                                <Button text={'Delete Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
                             </div>
-                        </div> :
-                        null}
-                    <div
-                        className="sort-emails"
-                        style={{ paddingTop: hasEditAccess ? 0 : 35 }}
-                        onClick={action(() => this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}>
-                        Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
+                        </div>
+                    ) : null}
+                    <div className="sort-emails" style={{ paddingTop: hasEditAccess ? 0 : 35 }} onClick={action(() => (this.memberSort = this.memberSort === 'ascending' ? 'descending' : this.memberSort === 'descending' ? 'none' : 'ascending'))}>
+                        Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */}
                     </div>
                 </div>
-                <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
-                <div className="editing-contents"
-                    style={{ height: hasEditAccess ? "62%" : "85%" }}
-                >
+                <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                <div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}>
                     {members.map(member => (
-                        <div
-                            className="editing-row"
-                            key={member}
-                        >
-                            <div className="user-email">
-                                {member}
-                            </div>
-                            {hasEditAccess ?
-                                <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
+                        <div className="editing-row" key={member}>
+                            <div className="user-email">{member}</div>
+                            {hasEditAccess ? (
+                                <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
                                     <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
                                 </div>
-                                : null}
+                            ) : null}
                         </div>
                     ))}
                 </div>
             </div>
         );
-
     }
 
     render() {
-        return <MainViewModal
-            isDisplayed={true}
-            interactive={true}
-            contents={this.editingInterface}
-            dialogueBoxStyle={{ width: 400, height: 250 }}
-            closeOnExternalClick={this.props.onCloseButtonClick}
-        />;
+        return <MainViewModal isDisplayed={true} interactive={true} contents={this.editingInterface} dialogueBoxStyle={{ width: 400, height: 250 }} closeOnExternalClick={this.props.onCloseButtonClick} />;
     }
-
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 16f5ad168..6f5e9f5c0 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -589,7 +589,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                     <div style={{ position: 'absolute', zIndex: 1000 }}>
                         <LinkPopup
                             key="popup"
-                            showPopup={this._showLinkPopup}
                             linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this.props.views().lastElement()?.rootDoc.onClick))}
                             linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
                             linkFrom={() => this.props.views().lastElement()?.rootDoc}
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
index 0ede75407..ff17e5c12 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
@@ -1,6 +1,6 @@
 import './ButtonMenu.scss';
 import * as React from 'react';
-import { IButtonMenu } from "./utils";
+import { IButtonMenu } from './utils';
 import { NewLightboxView } from '../NewLightboxView';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
@@ -11,43 +11,40 @@ import { MainView } from '../../MainView';
 import { action } from 'mobx';
 
 export const ButtonMenu = (props: IButtonMenu) => {
-    
-    return <div className={`newLightboxButtonMenu-container`}>
-        <div
-                    className="newLightboxView-navBtn"
-                    title="toggle fit width"
-                    onClick={e => {
-                        e.stopPropagation();
-                        NewLightboxView.NewLightboxDoc!._fitWidth = !NewLightboxView.NewLightboxDoc!._fitWidth;
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-tabBtn"
-                    title="open in tab"
-                    onClick={e => {
-                        e.stopPropagation();
-                        CollectionDockingView.AddSplit(NewLightboxView.NewLightboxDoc || NewLightboxView.NewLightboxDoc!, OpenWhereMod.none);
-                        SelectionManager.DeselectAll();
-                        NewLightboxView.SetNewLightboxDoc(undefined);
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-penBtn"
-                    title="toggle pen annotation"
-                    style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
-                    onClick={e => {
-                        e.stopPropagation();
-                        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
-                    }}>
-                </div>
-                <div
-                    className="newLightboxView-exploreBtn"
-                    title="toggle explore mode to navigate among documents only"
-                    style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
-                    onClick={action(e => {
-                        e.stopPropagation();
-                        MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
-                    })}>
-                </div>
-    </div>
-}
\ No newline at end of file
+    return (
+        <div className={`newLightboxButtonMenu-container`}>
+            <div
+                className="newLightboxView-navBtn"
+                title="toggle fit width"
+                onClick={e => {
+                    e.stopPropagation();
+                    NewLightboxView.LightboxDoc!._fitWidth = !NewLightboxView.LightboxDoc!._fitWidth;
+                }}></div>
+            <div
+                className="newLightboxView-tabBtn"
+                title="open in tab"
+                onClick={e => {
+                    e.stopPropagation();
+                    CollectionDockingView.AddSplit(NewLightboxView.LightboxDoc || NewLightboxView.LightboxDoc!, OpenWhereMod.none);
+                    SelectionManager.DeselectAll();
+                    NewLightboxView.SetNewLightboxDoc(undefined);
+                }}></div>
+            <div
+                className="newLightboxView-penBtn"
+                title="toggle pen annotation"
+                style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
+                onClick={e => {
+                    e.stopPropagation();
+                    Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+                }}></div>
+            <div
+                className="newLightboxView-exploreBtn"
+                title="toggle explore mode to navigate among documents only"
+                style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                onClick={action(e => {
+                    e.stopPropagation();
+                    MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                })}></div>
+        </div>
+    );
+};
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.tsx b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
index 855bfd9e2..44a0bcd5f 100644
--- a/src/client/views/newlightbox/ExploreView/ExploreView.tsx
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
@@ -1,30 +1,35 @@
 import './ExploreView.scss';
-import { IBounds, IExploreView, emptyBounds } from "./utils";
-import { IRecommendation } from "../components";
+import { IBounds, IExploreView, emptyBounds } from './utils';
+import { IRecommendation } from '../components';
 import * as React from 'react';
 import { NewLightboxView } from '../NewLightboxView';
 import { StrCast } from '../../../../fields/Types';
 
-
-
 export const ExploreView = (props: IExploreView) => {
-    const { recs, bounds=emptyBounds } = props
-    
-    return <div className={`exploreView-container`}>
-        {recs && recs.map((rec) => {
-            console.log(rec.embedding, bounds)
-            const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x))
-            const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y))
-            console.log(x_bound, y_bound)
-            if (rec.embedding) {
-                const x = (rec.embedding.x / x_bound) * 50;
-                const y = (rec.embedding.y / y_bound) * 50;
-                console.log(x, y)
-                return <div className={`exploreView-doc`} onClick={() => {}} style={{top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)`}}>
-                    {rec.title}
-                </div>
-            } else return (null)
-        })}
-        <div className={`exploreView-doc`} style={{top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white'}}>{StrCast(NewLightboxView.NewLightboxDoc?.title)}</div>
-    </div>
-}
\ No newline at end of file
+    const { recs, bounds = emptyBounds } = props;
+
+    return (
+        <div className={`exploreView-container`}>
+            {recs &&
+                recs.map(rec => {
+                    console.log(rec.embedding, bounds);
+                    const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x));
+                    const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y));
+                    console.log(x_bound, y_bound);
+                    if (rec.embedding) {
+                        const x = (rec.embedding.x / x_bound) * 50;
+                        const y = (rec.embedding.y / y_bound) * 50;
+                        console.log(x, y);
+                        return (
+                            <div className={`exploreView-doc`} onClick={() => {}} style={{ top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)` }}>
+                                {rec.title}
+                            </div>
+                        );
+                    } else return null;
+                })}
+            <div className={`exploreView-doc`} style={{ top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white' }}>
+                {StrCast(NewLightboxView.LightboxDoc?.title)}
+            </div>
+        </div>
+    );
+};
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
index c0d357ad5..b9d05c531 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IRecommendation } from "./utils";
+import { IRecommendation } from './utils';
 import './Recommendation.scss';
 import { getType } from '../../utils';
 import { FaEyeSlash } from 'react-icons/fa';
@@ -9,82 +9,95 @@ import { Doc } from '../../../../../fields/Doc';
 import { Docs } from '../../../../documents/Documents';
 
 export const Recommendation = (props: IRecommendation) => {
-    const {title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId} = props
-    
-    return <div className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`} onClick={() => {
-        let doc: Doc | null = null;
-        if (source == "Dash" && docId) {
-            const docView = DocumentManager.Instance.getDocumentViewById(docId)
-            if (docView) {
-                doc = docView.rootDoc;
-            }
-        } else if (data) {
-            console.log(data, type)
-            switch(type) {
-                case "YouTube":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
-                    break;
-                case "Video":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
-                    break;
-                case "Webpage":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
-                    break;
-                case "HTML":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
-                    break;
-                case "Text":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.TextDocument(data, { title: title, text: text })
-                    break;
-                case "PDF":
-                    console.log('create ', type, 'document')
-                    doc = Docs.Create.PdfDocument(data, { title: title, text: text })
-                    break;
-            }
-        }
-        if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc)
-    }}>
-        {loading ? 
-        <div className={`image-container`}>
-        </div>
-        :
-        previewUrl ? <div className={`image-container`}>
-            {<img className={`image`} src={previewUrl}></img>}
-        </div>
-        : null
-        }
-        <div className={`title`}>{title}</div>
-        <div className={`info`}>
-            {!loading && <div className={`type-container`}>
-                <div className={`lb-label`}>Type</div><div className={`lb-type`}>{getType(type!)}</div>
-            </div>}
-            {!loading && <div className={`distance-container`}>
-                <div className={`lb-label`}>Distance</div><div className={`lb-distance`}>{distance}</div>
-            </div>}
-        </div>
-        <div className={`source`}>
-            {!loading && <div className={`source-container`}>
-                <div className={`lb-label`}>Source</div><div className={`lb-source`}>{source}</div>
-            </div>}
-        </div>
-        <div className={`explainer`}>
-            {!loading && 
-            <div>
-                You are seeing this recommendation because this document also explores
-                <div className={`concepts-container`}>
-                    {related_concepts?.map((val) => {
-                        return <div className={'concept'}>{val}</div>
-                    })}
-                </div>
-            </div>}
-        </div>
-        <div className={`hide-rec`}>
-            {!loading && <><div>Hide Recommendation</div><div style={{fontSize: 15, paddingRight: 5}}><FaEyeSlash/></div></>}
+    const { title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId } = props;
+
+    return (
+        <div
+            className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`}
+            onClick={() => {
+                let doc: Doc | null = null;
+                if (source == 'Dash' && docId) {
+                    const docView = DocumentManager.Instance.getDocumentViewsById(docId).lastElement();
+                    if (docView) {
+                        doc = docView.rootDoc;
+                    }
+                } else if (data) {
+                    console.log(data, type);
+                    switch (type) {
+                        case 'YouTube':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript });
+                            break;
+                        case 'Video':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript });
+                            break;
+                        case 'Webpage':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
+                            break;
+                        case 'HTML':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.WebDocument(data, { title: title, text: text });
+                            break;
+                        case 'Text':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.TextDocument(data, { title: title, text: text });
+                            break;
+                        case 'PDF':
+                            console.log('create ', type, 'document');
+                            doc = Docs.Create.PdfDocument(data, { title: title, text: text });
+                            break;
+                    }
+                }
+                if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc);
+            }}>
+            {loading ? <div className={`image-container`}></div> : previewUrl ? <div className={`image-container`}>{<img className={`image`} src={previewUrl}></img>}</div> : null}
+            <div className={`title`}>{title}</div>
+            <div className={`info`}>
+                {!loading && (
+                    <div className={`type-container`}>
+                        <div className={`lb-label`}>Type</div>
+                        <div className={`lb-type`}>{getType(type!)}</div>
+                    </div>
+                )}
+                {!loading && (
+                    <div className={`distance-container`}>
+                        <div className={`lb-label`}>Distance</div>
+                        <div className={`lb-distance`}>{distance}</div>
+                    </div>
+                )}
+            </div>
+            <div className={`source`}>
+                {!loading && (
+                    <div className={`source-container`}>
+                        <div className={`lb-label`}>Source</div>
+                        <div className={`lb-source`}>{source}</div>
+                    </div>
+                )}
+            </div>
+            <div className={`explainer`}>
+                {!loading && (
+                    <div>
+                        You are seeing this recommendation because this document also explores
+                        <div className={`concepts-container`}>
+                            {related_concepts?.map(val => {
+                                return <div className={'concept'}>{val}</div>;
+                            })}
+                        </div>
+                    </div>
+                )}
+            </div>
+            <div className={`hide-rec`}>
+                {!loading && (
+                    <>
+                        <div>Hide Recommendation</div>
+                        <div style={{ fontSize: 15, paddingRight: 5 }}>
+                            <FaEyeSlash />
+                        </div>
+                    </>
+                )}
+            </div>
         </div>
-    </div>
-}
\ No newline at end of file
+    );
+};