diff options
Diffstat (limited to 'src/client/views/newlightbox')
16 files changed, 265 insertions, 272 deletions
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx index bce2b296f..e48e993cf 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx @@ -2,10 +2,9 @@ import { action } from 'mobx'; import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { InkTool } from '../../../../fields/InkField'; -import { SelectionManager } from '../../../util/SelectionManager'; import { SnappingManager } from '../../../util/SnappingManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { OpenWhereMod } from '../../nodes/DocumentView'; +import { OpenWhereMod } from '../../nodes/OpenWhere'; import { NewLightboxView } from '../NewLightboxView'; import './ButtonMenu.scss'; import { IButtonMenu } from './utils'; @@ -26,7 +25,7 @@ export const ButtonMenu = (props: IButtonMenu) => { onClick={e => { e.stopPropagation(); CollectionDockingView.AddSplit(NewLightboxView.LightboxDoc || NewLightboxView.LightboxDoc!, OpenWhereMod.none); - SelectionManager.DeselectAll(); + DocumentView.DeselectAll(); NewLightboxView.SetNewLightboxDoc(undefined); }}></div> <div diff --git a/src/client/views/newlightbox/ExploreView/index.ts b/src/client/views/newlightbox/ExploreView/index.ts index bf94eedcd..f2ebf511f 100644 --- a/src/client/views/newlightbox/ExploreView/index.ts +++ b/src/client/views/newlightbox/ExploreView/index.ts @@ -1 +1 @@ -export * from './ExploreView'
\ No newline at end of file +export * from './ExploreView'; diff --git a/src/client/views/newlightbox/ExploreView/utils.ts b/src/client/views/newlightbox/ExploreView/utils.ts index 7d9cf226d..2d1bd75a9 100644 --- a/src/client/views/newlightbox/ExploreView/utils.ts +++ b/src/client/views/newlightbox/ExploreView/utils.ts @@ -1,20 +1,21 @@ -import { IRecommendation } from "../components"; +import { IRecommendation } from '../components'; export interface IExploreView { - recs?: IRecommendation[], - bounds?: IBounds + recs?: IRecommendation[]; + // eslint-disable-next-line no-use-before-define + bounds?: IBounds; } export const emptyBounds = { max_x: 0, max_y: 0, min_x: 0, - min_y: 0 -} + min_y: 0, +}; export interface IBounds { - max_x: number, - max_y: number, - min_x: number, - min_y: number -}
\ No newline at end of file + max_x: number; + max_y: number; + min_x: number; + min_y: number; +} diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx index 76efe0185..51bfaa4e5 100644 --- a/src/client/views/newlightbox/Header/LightboxHeader.tsx +++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx @@ -12,13 +12,13 @@ import { getType } from '../utils'; import './LightboxHeader.scss'; import { INewLightboxHeader } from './utils'; -export const NewLightboxHeader = (props: INewLightboxHeader) => { +export function NewLightboxHeader(props: INewLightboxHeader) { const { height = 100, width } = props; const [doc, setDoc] = React.useState<Doc | undefined>(LightboxView.LightboxDoc); const [editing, setEditing] = React.useState<boolean>(false); const [title, setTitle] = React.useState<JSX.Element | null>(null); React.useEffect(() => { - let lbDoc = LightboxView.LightboxDoc; + const lbDoc = LightboxView.LightboxDoc; setDoc(lbDoc); if (lbDoc) { setTitle( @@ -37,34 +37,23 @@ export const NewLightboxHeader = (props: INewLightboxHeader) => { const [saved, setSaved] = React.useState<boolean>(false); if (!doc) return null; - else - return ( - <div className={`newLightboxHeader-container`} onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> - <div className={`title-container`}> - <div className={`lb-label`}>Title</div> - {title} - </div> - <div className={`type-container`}> - <div className={`lb-label`}>Type</div> - <div className={`type`}>{getType(StrCast(doc.type))}</div> - </div> - <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - </div> - <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <Button - onClick={() => { - console.log(NewLightboxView.ExploreMode); - NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode); - }} - size={Size.XSMALL} - color={Colors.DARK_GRAY} - type={Type.SEC} - text={'t-SNE 2D Embeddings'} - icon={<MdTravelExplore />} - /> - </div> + return ( + <div className="newLightboxHeader-container" onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> + <div className="title-container"> + <div className="lb-label">Title</div> + {title} </div> - ); -}; + <div className="type-container"> + <div className="lb-label">Type</div> + <div className="type">{getType(StrCast(doc.type))}</div> + </div> + <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + </div> + <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text="t-SNE 2D Embeddings" icon={<MdTravelExplore />} /> + </div> + </div> + ); +} diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts index 090677c16..88a533585 100644 --- a/src/client/views/newlightbox/Header/index.ts +++ b/src/client/views/newlightbox/Header/index.ts @@ -1 +1 @@ -export * from './LightboxHeader'
\ No newline at end of file +export * from './LightboxHeader'; diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index 12b9870ca..558ce7e38 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -1,23 +1,21 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils'; -import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../ClientUtils'; +import { emptyFunction } from '../../../Utils'; +import { CreateLinkToActiveAudio, Doc, DocListCast, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; -import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { DocUtils } from '../../documents/Documents'; -import { DocumentManager } from '../../util/DocumentManager'; -import { LinkManager } from '../../util/LinkManager'; -import { SelectionManager } from '../../util/SelectionManager'; +import { Cast, NumCast, StrCast, toList } from '../../../fields/Types'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { GestureOverlay } from '../GestureOverlay'; import { LightboxView } from '../LightboxView'; import { DefaultStyleProvider } from '../StyleProvider'; -import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; -import { TabDocView } from '../collections/TabDocView'; -import { DocumentView, OpenWhere } from '../nodes/DocumentView'; +import { DocumentView } from '../nodes/DocumentView'; +import { OpenWhere } from '../nodes/OpenWhere'; import { ExploreView } from './ExploreView'; import { IBounds, emptyBounds } from './ExploreView/utils'; import { NewLightboxHeader } from './Header'; @@ -25,11 +23,11 @@ import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; import { IRecommendation } from './components'; -enum LightboxStatus { - RECOMMENDATIONS = 'recommendations', - ANNOTATIONS = 'annotations', - NONE = 'none', -} +// enum LightboxStatus { +// RECOMMENDATIONS = 'recommendations', +// ANNOTATIONS = 'annotations', +// NONE = 'none', +// } interface LightboxViewProps { PanelWidth: number; @@ -46,10 +44,6 @@ type LightboxSavedState = { }; @observer export class NewLightboxView extends React.Component<LightboxViewProps> { - @computed public static get LightboxDoc() { - return this._doc; - } - private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; @observable private static _layoutTemplate: Opt<Doc> = undefined; @observable private static _layoutTemplateString: Opt<string> = undefined; @observable private static _doc: Opt<Doc> = undefined; @@ -62,59 +56,39 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { // keywords @observable private static _keywords: string[] = []; - @action public static SetKeywords(kw: string[]) { - this._keywords = kw; - } - @computed public static get Keywords() { - return this._keywords; - } - - // query @observable private static _query: string = ''; - @action public static SetQuery(query: string) { - this._query = query; - } - @computed public static get Query() { - return this._query; - } - - // keywords @observable private static _recs: IRecommendation[] = []; - @action public static SetRecs(recs: IRecommendation[]) { - this._recs = recs; - } - @computed public static get Recs() { - return this._recs; - } - - // bounds @observable private static _bounds: IBounds = emptyBounds; - @action public static SetBounds(bounds: IBounds) { - this._bounds = bounds; - } - @computed public static get Bounds() { - return this._bounds; - } - - // explore @observable private static _explore: Opt<boolean> = false; - @action public static SetExploreMode(status: Opt<boolean>) { - this._explore = status; - } - @computed public static get ExploreMode() { - return this._explore; - } - - // newLightbox sidebar status @observable private static _sidebarStatus: Opt<string> = ''; - @action public static SetSidebarStatus(sidebarStatus: Opt<string>) { - this._sidebarStatus = sidebarStatus; + static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = []; + private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; + public static GetSavedState(doc: Doc) { + return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; } - @computed public static get SidebarStatus() { - return this._sidebarStatus; + // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie + @action + public static SetCookie(cookie: string) { + if (this.LightboxDoc && cookie) { + this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`); + } } + public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { + DocumentView.DeselectAll(); + const doc = toList(docsIn).lastElement(); + return ( + doc && + NewLightboxView.SetNewLightboxDoc( + doc, + undefined, + [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( + (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) + ), + layoutTemplate + ) + ); + }; - static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = []; @action public static SetNewLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) { if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX; @@ -129,10 +103,10 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { Doc.ActiveTool = InkTool.None; SnappingManager.SetExploreMode(false); } else { - const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); + const l = CreateLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); - CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.()); - //TabDocView.PinDoc(doc, { hidePresBox: true }); + DocumentView.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.()); + // DocumentView.PinDoc(doc, { hidePresBox: true }); this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]); if (doc !== LightboxView.LightboxDoc) { this._savedState = { @@ -151,7 +125,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { ...future .slice() .sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)) - .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length), + .sort((a, b) => Doc.Links(a).length - Doc.Links(b).length), ]; } this._doc = doc; @@ -166,85 +140,33 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { public static IsNewLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(this._docView!); } - @computed get leftBorder() { - return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); - } - @computed get topBorder() { - return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); - } - newLightboxWidth = () => this.props.PanelWidth - 420; - newLightboxHeight = () => this.props.PanelHeight - 140; - newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); - navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => { - return ( - <div - className="newLightboxView-navBtn-frame" - style={{ - display: display(), - left, - width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), - bottom, - }}> - <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}> - <div style={{ height: 10 }}>{color}</div> - <FontAwesomeIcon icon={icon as any} size="3x" /> - </div> - </div> - ); - }; - public static GetSavedState(doc: Doc) { - return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; - } - - // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie - @action - public static SetCookie(cookie: string) { - if (this.LightboxDoc && cookie) { - this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`); - } - } - public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => { - SelectionManager.DeselectAll(); - return NewLightboxView.SetNewLightboxDoc( - doc, - undefined, - [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( - (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) - ), - layoutTemplate - ); - }; - docFilters = () => NewLightboxView._docFilters || []; - addDocTab = NewLightboxView.AddDocTab; @action public static Next() { const doc = NewLightboxView._doc!; const target = (NewLightboxView._docTarget = this._future?.pop()); - const targetDocView = target && DocumentManager.Instance.getLightboxDocumentView(target); + const targetDocView = target && DocumentView.getLightboxDocumentView(target); if (targetDocView && target) { - const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement(); + const l = CreateLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); - DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); + DocumentView.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); if (NewLightboxView._history?.lastElement().target !== target) NewLightboxView._history?.push({ doc, target }); - } else { - if (!target && NewLightboxView.path.length) { - const saved = NewLightboxView._savedState; - if (LightboxView.LightboxDoc && saved) { - LightboxView.LightboxDoc._freeform_panX = saved.panX; - LightboxView.LightboxDoc._freeform_panY = saved.panY; - LightboxView.LightboxDoc._freeform_scale = saved.scale; - LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; - } - const pop = NewLightboxView.path.pop(); - if (pop) { - NewLightboxView._doc = pop.doc; - NewLightboxView._docTarget = pop.target; - NewLightboxView._future = pop.future; - NewLightboxView._history = pop.history; - NewLightboxView._savedState = pop.saved; - } - } else { - NewLightboxView.SetNewLightboxDoc(target); + } else if (!target && NewLightboxView.path.length) { + const saved = NewLightboxView._savedState; + if (LightboxView.LightboxDoc && saved) { + LightboxView.LightboxDoc._freeform_panX = saved.panX; + LightboxView.LightboxDoc._freeform_panY = saved.panY; + LightboxView.LightboxDoc._freeform_scale = saved.scale; + LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; + } + const pop = NewLightboxView.path.pop(); + if (pop) { + NewLightboxView._doc = pop.doc; + NewLightboxView._docTarget = pop.target; + NewLightboxView._future = pop.future; + NewLightboxView._history = pop.history; + NewLightboxView._savedState = pop.saved; } + } else { + NewLightboxView.SetNewLightboxDoc(target); } } @@ -255,15 +177,127 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { return; } const { doc, target } = NewLightboxView._history?.lastElement(); - const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc); + const docView = DocumentView.getLightboxDocumentView(target || doc); if (docView) { NewLightboxView._docTarget = target; - target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); + target && DocumentView.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); } else { NewLightboxView.SetNewLightboxDoc(doc, target); } if (NewLightboxView._future?.lastElement() !== previous.target || previous.doc) NewLightboxView._future?.push(previous.target || previous.doc); } + + @action public static SetKeywords(kw: string[]) { + this._keywords = kw; + } + @computed public static get Keywords() { + return this._keywords; + } + @computed public static get LightboxDoc() { + return this._doc; + } + + // query + @action public static SetQuery(query: string) { + this._query = query; + } + @computed public static get Query() { + return this._query; + } + + // keywords + @action public static SetRecs(recs: IRecommendation[]) { + this._recs = recs; + } + @computed public static get Recs() { + return this._recs; + } + + // bounds + @action public static SetBounds(bounds: IBounds) { + this._bounds = bounds; + } + @computed public static get Bounds() { + return this._bounds; + } + // newLightbox sidebar status + @action public static SetSidebarStatus(sidebarStatus: Opt<string>) { + this._sidebarStatus = sidebarStatus; + } + + // explore + @action public static SetExploreMode(status: Opt<boolean>) { + this._explore = status; + } + + addDocTab = NewLightboxView.AddDocTab; + + @computed public static get ExploreMode() { + return this._explore; + } + + @computed public static get SidebarStatus() { + return this._sidebarStatus; + } + @computed get leftBorder() { + return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); + } + @computed get topBorder() { + return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); + } + + @computed + get documentView() { + if (!LightboxView.LightboxDoc) return null; + return ( + <GestureOverlay isActive> + <DocumentView + ref={action((r: DocumentView | null) => { + NewLightboxView._docView = r !== null ? r : undefined; + })} + Document={LightboxView.LightboxDoc} + PanelWidth={this.newLightboxWidth} + PanelHeight={this.newLightboxHeight} + LayoutTemplate={NewLightboxView.LightboxDocTemplate} + isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. + isContentActive={returnTrue} + styleProvider={DefaultStyleProvider} + ScreenToLocalTransform={this.newLightboxScreenToLocal} + renderDepth={0} + containerViewPath={returnEmptyDoclist} + childFilters={this.docFilters} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + addDocument={undefined} + removeDocument={undefined} + whenChildContentsActiveChanged={emptyFunction} + addDocTab={this.addDocTab} + pinToPres={DocumentView.PinDoc} + focus={emptyFunction} + /> + </GestureOverlay> + ); + } + newLightboxWidth = () => this.props.PanelWidth - 420; + newLightboxHeight = () => this.props.PanelHeight - 140; + newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); + navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => ( + <div + className="newLightboxView-navBtn-frame" + style={{ + display: display(), + left, + width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + bottom, + }}> + <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}> + <div style={{ height: 10 }}>{color}</div> + <FontAwesomeIcon icon={icon as any} size="3x" /> + </div> + </div> + ); + + docFilters = () => NewLightboxView._docFilters || []; @action stepInto = () => { NewLightboxView.path.push({ @@ -277,52 +311,19 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { if (coll) { const fieldKey = Doc.LayoutFieldKey(coll); const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '_annotations'])]; - const links = LinkManager.Links(coll) - .map(link => LinkManager.getOppositeAnchor(link, coll)) + const links = Doc.Links(coll) + .map(link => Doc.getOppositeAnchor(link, coll)) .filter(doc => doc) .map(doc => doc!); NewLightboxView.SetNewLightboxDoc(coll, undefined, contents.length ? contents : links); } }; - @computed - get documentView() { - if (!LightboxView.LightboxDoc) return null; - else - return ( - <GestureOverlay isActive={true}> - <DocumentView - ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))} - Document={LightboxView.LightboxDoc} - PanelWidth={this.newLightboxWidth} - PanelHeight={this.newLightboxHeight} - LayoutTemplate={NewLightboxView.LightboxDocTemplate} - isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. - isContentActive={returnTrue} - styleProvider={DefaultStyleProvider} - ScreenToLocalTransform={this.newLightboxScreenToLocal} - renderDepth={0} - containerViewPath={returnEmptyDoclist} - childFilters={this.docFilters} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - addDocument={undefined} - removeDocument={undefined} - whenChildContentsActiveChanged={emptyFunction} - addDocTab={this.addDocTab} - pinToPres={TabDocView.PinDoc} - onBrowseClickScript={DocumentView.exploreMode} - focus={emptyFunction} - /> - </GestureOverlay> - ); - } - future = () => NewLightboxView._future; render() { - let newLightboxHeaderHeight = 100; - let downx = 0, - downy = 0; + const newLightboxHeaderHeight = 100; + let downx = 0; + let downy = 0; return !LightboxView.LightboxDoc ? null : ( <div className="newLightboxView-frame" @@ -335,7 +336,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { NewLightboxView.SetNewLightboxDoc(undefined); } }}> - <div className={`app-document`} style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}> + <div className="app-document" style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}> <div className="newLightboxView-contents" style={{ @@ -350,7 +351,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { {this.documentView} </div> ) : ( - <div className={`explore`}> + <div className="explore"> <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds} /> </div> )} @@ -363,6 +364,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { } interface NewLightboxTourBtnProps { navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element; + // eslint-disable-next-line react/no-unused-prop-types future: () => Opt<Doc[]>; stepInto: () => void; } @@ -374,7 +376,7 @@ export class NewLightboxTourBtn extends React.Component<NewLightboxTourBtnProps> 0, 0, 'chevron-down', - () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'), + () => (LightboxView.LightboxDoc /* && this.props.future()?.length */ ? '' : 'none'), e => { e.stopPropagation(); this.props.stepInto(); diff --git a/src/client/views/newlightbox/RecommendationList/index.ts b/src/client/views/newlightbox/RecommendationList/index.ts index f4555c1f2..226eafb7e 100644 --- a/src/client/views/newlightbox/RecommendationList/index.ts +++ b/src/client/views/newlightbox/RecommendationList/index.ts @@ -1 +1 @@ -export * from './RecommendationList'
\ No newline at end of file +export * from './RecommendationList'; diff --git a/src/client/views/newlightbox/RecommendationList/utils.ts b/src/client/views/newlightbox/RecommendationList/utils.ts index cdfff3258..fbf8ac19f 100644 --- a/src/client/views/newlightbox/RecommendationList/utils.ts +++ b/src/client/views/newlightbox/RecommendationList/utils.ts @@ -1,9 +1,8 @@ -import { IRecommendation } from "../components"; +import { IRecommendation } from '../components'; export interface IRecommendationList { - loading?: boolean, - keywords?: string[], - recs?: IRecommendation[] - getRecs?: any + loading?: boolean; + keywords?: string[]; + recs?: IRecommendation[]; + getRecs?: any; } - diff --git a/src/client/views/newlightbox/components/EditableText/index.ts b/src/client/views/newlightbox/components/EditableText/index.ts index e3367b175..444881a74 100644 --- a/src/client/views/newlightbox/components/EditableText/index.ts +++ b/src/client/views/newlightbox/components/EditableText/index.ts @@ -1 +1 @@ -export * from './EditableText' +export * from './EditableText'; diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx index 23027808f..375408d01 100644 --- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx +++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import { IRecommendation } from './utils'; -import './Recommendation.scss'; -import { getType } from '../../utils'; import { FaEyeSlash } from 'react-icons/fa'; -import { NewLightboxView } from '../../NewLightboxView'; -import { DocumentManager } from '../../../../util/DocumentManager'; import { Doc } from '../../../../../fields/Doc'; import { Docs } from '../../../../documents/Documents'; +import { DocumentView } from '../../../nodes/DocumentView'; +import { NewLightboxView } from '../../NewLightboxView'; +import { getType } from '../../utils'; +import './Recommendation.scss'; +import { IRecommendation } from './utils'; export const Recommendation = (props: IRecommendation) => { const { title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId } = props; @@ -17,7 +17,7 @@ export const Recommendation = (props: IRecommendation) => { onClick={() => { let doc: Doc | null = null; if (source == 'Dash' && docId) { - const docView = DocumentManager.Instance.getDocumentViewsById(docId).lastElement(); + const docView = DocumentView.getDocumentViewsById(docId).lastElement(); if (docView) { doc = docView.Document; } diff --git a/src/client/views/newlightbox/components/Recommendation/index.ts b/src/client/views/newlightbox/components/Recommendation/index.ts index 12ebf9d6e..4fce185ec 100644 --- a/src/client/views/newlightbox/components/Recommendation/index.ts +++ b/src/client/views/newlightbox/components/Recommendation/index.ts @@ -1,2 +1,2 @@ -export * from './utils' -export * from './Recommendation'
\ No newline at end of file +export * from './utils'; +export * from './Recommendation'; diff --git a/src/client/views/newlightbox/components/Recommendation/utils.ts b/src/client/views/newlightbox/components/Recommendation/utils.ts index 796ce0eb0..4a55d394e 100644 --- a/src/client/views/newlightbox/components/Recommendation/utils.ts +++ b/src/client/views/newlightbox/components/Recommendation/utils.ts @@ -1,23 +1,23 @@ -import { DocumentType } from "../../../../documents/DocumentTypes" +import { DocumentType } from '../../../../documents/DocumentTypes'; export interface IRecommendation { - loading?: boolean - type?: DocumentType | string, - data?: string, - title?: string, - text?: string, - source?: string, - previewUrl?: string, + loading?: boolean; + type?: DocumentType | string; + data?: string; + title?: string; + text?: string; + source?: string; + previewUrl?: string; transcript?: { - text: string, - start: number, - duration: number - }[], + text: string; + start: number; + duration: number; + }[]; embedding?: { - x: number, - y: number - }, - distance?: number, - related_concepts?: string[], - docId?: string -}
\ No newline at end of file + x: number; + y: number; + }; + distance?: number; + related_concepts?: string[]; + docId?: string; +} diff --git a/src/client/views/newlightbox/components/SkeletonDoc/index.ts b/src/client/views/newlightbox/components/SkeletonDoc/index.ts index 396b7272b..98379f404 100644 --- a/src/client/views/newlightbox/components/SkeletonDoc/index.ts +++ b/src/client/views/newlightbox/components/SkeletonDoc/index.ts @@ -1 +1 @@ -export * from './SkeletonDoc'
\ No newline at end of file +export * from './SkeletonDoc'; diff --git a/src/client/views/newlightbox/components/Template/index.ts b/src/client/views/newlightbox/components/Template/index.ts index 36b5f3f46..f5b83ad09 100644 --- a/src/client/views/newlightbox/components/Template/index.ts +++ b/src/client/views/newlightbox/components/Template/index.ts @@ -1 +1 @@ -export * from './Template'
\ No newline at end of file +export * from './Template'; diff --git a/src/client/views/newlightbox/components/index.ts b/src/client/views/newlightbox/components/index.ts index 3f9128690..1c266c5d8 100644 --- a/src/client/views/newlightbox/components/index.ts +++ b/src/client/views/newlightbox/components/index.ts @@ -1,3 +1,3 @@ -export * from './Template' -export * from './Recommendation' -export * from './SkeletonDoc'
\ No newline at end of file +export * from './Template'; +export * from './Recommendation'; +export * from './SkeletonDoc'; diff --git a/src/client/views/newlightbox/utils.ts b/src/client/views/newlightbox/utils.ts index c879718e3..a0d6b9f4a 100644 --- a/src/client/views/newlightbox/utils.ts +++ b/src/client/views/newlightbox/utils.ts @@ -1,5 +1,5 @@ +/* eslint-disable no-use-before-define */ import { DocumentType } from '../../documents/DocumentTypes'; -import { IRecommendation } from './components'; export interface IDocRequest { id: string; @@ -12,7 +12,7 @@ export const fetchRecommendations = async (src: string, query: string, docs?: ID console.log('[rec] making request'); if (dummy) { return { - recommendations: [], //dummyRecs, + recommendations: [], // dummyRecs, keywords: dummyKeywords, num_recommendations: 4, max_x: 100, @@ -79,6 +79,7 @@ export const getType = (type: DocumentType | string) => { } }; +/* const dummyRecs = { a: { title: 'Vannevar Bush - American Engineer', @@ -117,4 +118,6 @@ const dummyRecs = { }, }; +*/ + const dummyKeywords = ['user control', 'vannevar bush', 'hypermedia', 'hypertext']; |