aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss4
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx95
3 files changed, 54 insertions, 46 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index dd5884cf2..d4467e536 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
library.add(
...[
+ fa.faArrowsRotate,
fa.faFloppyDisk,
fa.faRepeat,
fa.faArrowsUpDown,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 82a659ff7..3b6aeb0dd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -297,6 +297,7 @@
border: 1px solid rgb(163, 163, 163);
border-radius: 5px;
box-shadow: 5px 5px rgb(29, 29, 31);
+ flex: 0 0 auto;
&:hover{
background-color: rgb(72, 72, 73);
@@ -310,7 +311,6 @@
&.empty {
font-size: 35px;
- flex: 0 0 auto;
&.GPT {
margin-top: 0px;
@@ -402,10 +402,12 @@
.docCreatorMenu-GPT-prompt-input {
width: 140px;
+ height: 25px;
overflow-y: scroll;
border: 1px solid rgb(180, 180, 180);
background-color: rgb(35, 35, 35);
border-radius: 3px;
+ padding-left: 4px;
}
//------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 2efd73136..b45ac7f46 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -44,7 +44,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _layoutPreviewScale: number = 1;
@observable _savedLayouts: DataVizTemplateLayout[] = [];
- @observable _GPTTemplates: Doc[] | undefined = undefined;
+ @observable _GPTTemplates: Doc[] = [];
@observable _GPTOpt: boolean = false;
@observable _userPrompt: string = '';
@@ -71,7 +71,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _offset: {x: number, y: number} = {x: 0, y: 0};
@observable _resizeUndo: UndoManager.Batch | undefined = undefined;
@observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
- @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400};
+ @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365};
constructor(props: any) {
super(props);
@@ -81,6 +81,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
@action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
+ @action setGPTTemplates = (docs: Doc[]) => {this._GPTTemplates = docs};
@computed get docsToRender() {
return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
@@ -169,14 +170,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
};
_disposer: IReactionDisposer | undefined;
+ _GPTDisposer: IReactionDisposer | undefined;
componentDidMount() {
document.addEventListener('pointerdown', this.onPointerDown, true);
document.addEventListener('pointerup', this.onPointerUp);
this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
+ this._GPTDisposer = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
}
componentWillUnmount() {
this._disposer?.();
+ this._GPTDisposer?.();
document.removeEventListener('pointerdown', this.onPointerDown, true);
document.removeEventListener('pointerup', this.onPointerUp);
}
@@ -275,7 +279,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
const docView = DocumentView.getDocumentView(doc);
if (docView) {
docView.ComponentView?.updateIcon?.();
- return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+ const f = new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+ console.log(f)
+ return f;
}
return undefined;
}
@@ -304,10 +310,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
&& this._layout.columns === layout.columns;
}
+ @action
generateTemplates = async (inputText: string) => {
let prompt: string = 'Please generate for the fields:';
this.selectedFields?.forEach(field => prompt += ` ${field},`)
prompt += ` Additional prompt: ${inputText}`;
+ console.log(prompt)
try {
const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
@@ -322,8 +330,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
+ @action
createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => {
const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+ const GPTTemplates: Doc[] = [];
layouts.forEach(layout => {
const fields: Doc[] = layout.fieldVals.map(field => {
@@ -335,9 +345,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
return doc;
});
- const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+ const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
mainCollection.addDocument(template);
+
+ GPTTemplates.push(template);
});
+
+ setTimeout(() => this.setGPTTemplates(GPTTemplates), 500);
+
+ this.forceUpdate();
}
get templatesPreviewContents(){
@@ -346,10 +362,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
const GPTOptions =
<div></div>
-
return (
<div className='docCreatorMenu-templates-view'>
- <div className='docCreatorMenu-section'>
+ <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}>
<div className='docCreatorMenu-section-topbar'>
<div className='docCreatorMenu-section-title'>Suggested Templates</div>
<button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
@@ -357,17 +372,27 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
</button>
</div>
<div className='docCreatorMenu-GPT-templates-preview'>
- <div className='docCreatorMenu-preview-window empty GPT'></div>
- <div className='docCreatorMenu-preview-window empty GPT'></div>
- <div className='docCreatorMenu-preview-window empty GPT'></div>
- <div className='docCreatorMenu-preview-window empty GPT'></div>
+ {this._GPTTemplates?.map(doc =>
+
+ //<div className='docCreatorMenu-preview-window empty'/>
+ ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
+ <div
+ className='docCreatorMenu-preview-window'
+ style={{
+ border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+ boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+ }}
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+ <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+ </div>
+ )}
</div>
{this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
<div className='docCreatorMenu-GPT-options-container'>
<button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
- <FontAwesomeIcon icon='plus'/>
+ <FontAwesomeIcon icon='arrows-rotate'/>
</button>
- <input className='docCreatorMenu-GPT-prompt-input'/>
+ <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
</div>
{this._GPTOpt ? GPTOptions : null}
</div>) : null}
@@ -387,41 +412,20 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
<FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
</div>
{this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
- if (renderedTemplates.includes(info.doc)) return undefined;
- renderedTemplates.push(info.doc);
- return (<div
- className='docCreatorMenu-preview-window'
- style={{
- border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
- boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
- }}
- onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
- <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
- </div>
+ if (renderedTemplates.includes(info.doc)) return undefined;
+ renderedTemplates.push(info.doc);
+ return (<div
+ className='docCreatorMenu-preview-window'
+ style={{
+ border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+ boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+ }}
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+ <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+ </div>
)})}
</div>
</div>
- {/* <div className='docCreatorMenu-preview-container'
- style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
- {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
- if (renderedTemplates.includes(info.doc)) return undefined;
- renderedTemplates.push(info.doc);
- return (<div
- className='docCreatorMenu-preview-window'
- style={{
- border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
- boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
- }}
- onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
- <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
- </div>
- )})}
- <div className='docCreatorMenu-preview-window empty'
- onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
- >
- <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
- </div>
- </div> */}
</div>
);
}
@@ -652,7 +656,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
basicTemplateTest = () => {
- this.generateTemplates(this._userPrompt);
+ console.log(this._GPTTemplates)
+ this.forceUpdate();
//this._dataViz?.createBasicTemplates(temps);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 15:37:47 +0000