From 85c0b1105dbdd4037872ecfc6b921551e1939eb8 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 29 Aug 2024 04:06:15 -0400 Subject: Dataviz crash hopefully fixed; prototype func for generating templates; radius NaN bug handled --- src/client/documents/Documents.ts | 3 +- src/client/views/StyleProvider.tsx | 5 + src/client/views/nodes/DataVizBox/DataVizBox.tsx | 18 ++- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 149 +++++++++++++++------ .../views/nodes/DataVizBox/components/TableBox.tsx | 13 +- src/client/views/nodes/DocumentView.tsx | 1 - 6 files changed, 137 insertions(+), 52 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a4ba2978c..723f851c6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -178,6 +178,7 @@ export class DocumentOptions { map_bearing?: NUMt = new NumInfo('bearing of a map view', false); map_style?: STRt = new StrInfo('mapbox style for a map view', false); identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false); + _rotation?: NUMt = new NumInfo('Amount of rotation on a document in degrees', false); date_range?: STRt = new StrInfo('date range for calendar', false); @@ -237,7 +238,7 @@ export class DocumentOptions { dataViz?: string; dataViz_savedTemplates?: LISTt; - borderWidth?: NUMt = new NumInfo('Width of user-added border', false); + borderWidth?: STRt = new StrInfo('Width of user-added border', false); borderColor?: STRt = new StrInfo('Color of user-added border', false); layout?: string | Doc; // default layout string or template document diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 3ecb101f8..bb0883cc0 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -56,11 +56,14 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu } export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) { + if (!rad) rad = 0; const width = pw * inset; const height = ph * inset; const radius = Math.min(rad, (pw - 2 * width) / 2, (ph - 2 * height) / 2); + console.log(pw, ph, rad, inset) + return ` M ${width + radius} ${height} L ${pw - width - radius} ${height} @@ -206,8 +209,10 @@ export function DefaultStyleProvider(doc: Opt, props: Opt() { + private _urlError: boolean = false; private _mainCont: React.RefObject = React.createRef(); private _marqueeref = React.createRef(); private _annotationLayer: React.RefObject = React.createRef(); @@ -116,8 +117,17 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // all CSV records in the dataset (that aren't an empty row) @computed.struct get records() { - const records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href); - return records?.filter(record => Object.keys(record).some(key => record[key])) ?? []; + try { + const records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href); + this._urlError = false; + return records?.filter(record => Object.keys(record).some(key => record[key])) ?? []; + } catch (e){ + this._urlError = true; + const data: { [key: string]: string; }[] = [ + { error: "Data not found"}, + ]; + return data; + } } // currently chosen visualization type: line, pie, histogram, table @@ -133,8 +143,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { } selectAxes = (axes: string[]) => { this.layoutDoc._dataViz_axes = new List(axes); - //axes.forEach(axis => console.log(axis)) - //DocCreatorMenu.Instance.generateTemplates(''); }; @computed.struct get titleCol() { return StrCast(this.layoutDoc._dataViz_titleCol); @@ -315,7 +323,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { componentDidMount() { this._props.setContentViewBox?.(this); - if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData(); + if (!this._urlError) { if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData() }; this._disposers.datavis = reaction( () => { if (this.layoutDoc.dataViz_schemaLive === undefined) this.layoutDoc.dataViz_schemaLive = true; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 43cf57167..27ffc63ef 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -404,21 +404,21 @@ export class DocCreatorMenu extends ObservableReactComponent { testTemplate = () => { - // const temp = TemplateLayouts.TwoFieldPlusCarousel; - // const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br}); - // const title1 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br}); - // const title2 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br}); - // const title3 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br}); - // const focus = new TemplateDocCarouselField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.width, temp.height, '', [title1, title2, title3].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''))); - // const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br}); - // let fields = [title, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', '')); - // fields = fields.concat(focus.getDoc()); - // console.log(temp.height, temp.width) - // const doc = Docs.Create.StackingDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 }); - - // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - // mainCollection.addDocument(doc); - //this._dataViz?.getRandomSample(); + const temp = TemplateLayouts.FourField001; + const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'}); + const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40}); + const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'}); + const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10}); + + const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 }); + + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(doc); + + // setTimeout(() => image.borderWidth = '10', 1000); + // setTimeout(() => desc.borderWidth = '10', 1000); + + // this._dataViz?.getRandomSample(); // public static FourField001: TemplateDocInfos = { @@ -450,12 +450,12 @@ export class DocCreatorMenu extends ObservableReactComponent { // opts: { - const field1: Col = {title: 'hey', type: TemplateFieldType.TEXT, size: FieldSize.HUGE, desc: ''} - const field2: Col = {title: 'heyo', type: TemplateFieldType.TEXT, size: FieldSize.TINY, desc: ''} - const field3: Col = {title: 'heya', type: TemplateFieldType.VISUAL, size: FieldSize.LARGE, desc: ''} - const field4: Col = {title: 'heyy', type: TemplateFieldType.TEXT, size: FieldSize.MEDIUM, desc: ''} + // const field1: Col = {title: 'hey', type: TemplateFieldType.TEXT, size: FieldSize.HUGE, desc: ''} + // const field2: Col = {title: 'heyo', type: TemplateFieldType.TEXT, size: FieldSize.TINY, desc: ''} + // const field3: Col = {title: 'heya', type: TemplateFieldType.VISUAL, size: FieldSize.LARGE, desc: ''} + // const field4: Col = {title: 'heyy', type: TemplateFieldType.TEXT, size: FieldSize.MEDIUM, desc: ''} - console.log(this.findValidTemplates([field1, field2, field3, field4], [TemplateLayouts.FourField001])); + // console.log(this.findValidTemplates([field1, field2, field3, field4], [TemplateLayouts.FourField001])); } get templatesPreviewContents(){ @@ -609,9 +609,9 @@ export class DocCreatorMenu extends ObservableReactComponent { } } - doc = () => { - return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); - } + // doc = () => { + // return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); + // } screenToLocalTransform = () => this._props @@ -802,7 +802,7 @@ export class DocCreatorMenu extends ObservableReactComponent { } @action addField = () => { - const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.TEXT, desc: '', size: FieldSize.MEDIUM}]) + const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: FieldSize.MEDIUM}]) this._columns = newFields; } @@ -822,9 +822,7 @@ export class DocCreatorMenu extends ObservableReactComponent { if (this._columns.length === 1) { this._columns = [] } else { - console.log(this._columns) this._columns.splice(this._columns.indexOf(toRemove[0]), 1); - console.log(this._columns) } } } @@ -899,7 +897,6 @@ export class DocCreatorMenu extends ObservableReactComponent { templates.forEach(template => { const numFields = template.fields.length; const matches = this.matchesForTemplate(template, cols); - console.log(matches) if (this.maxMatches(numFields, matches) === numFields) { validTemplates.push(template.title); } @@ -908,7 +905,32 @@ export class DocCreatorMenu extends ObservableReactComponent { return validTemplates; } + createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => { + const fields: Doc[] = []; + + Object.entries(assignments).forEach(([f, col]) => { + const field: Field = template.fields[Number(f)]; + const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({ + tl: field.tl, + br: field.br }, + template.height, + template.width, + col.title, + '', + field.opts + ); + + fields.push(doc); + }); + + const renderedTemplate = Docs.Create.FreeformDocument(fields, { _height: template.height, _width: template.width, title: template.title, x: 400, y: 400 }); + + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(renderedTemplate); + } + get dashboardContents(){ + return (
@@ -919,10 +941,10 @@ export class DocCreatorMenu extends ObservableReactComponent { {this.fieldsInfos.map((field, index) =>
- +
- {field.type ? null : Select media type} - {field.type ? field.type === 'text' ? 'Text Field' : 'File Field' : ''} + {field.type === TemplateFieldType.UNSET ? Select media type : null} + {field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}
{this.setFieldType(field, TemplateFieldType.TEXT)}}/>
Text
@@ -930,15 +952,13 @@ export class DocCreatorMenu extends ObservableReactComponent {
File
+