aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx20
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss11
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx18
-rw-r--r--src/client/views/nodes/DataVizBox/components/TableBox.tsx6
-rw-r--r--src/client/views/nodes/ImageBox.tsx2
5 files changed, 45 insertions, 12 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e03da8e7b..765642891 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -38,6 +38,7 @@ import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
import { PrefetchProxy } from '../../../../fields/Proxy';
import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
import { template } from 'lodash';
+import { data } from 'jquery';
export enum DataVizView {
TABLE = 'table',
@@ -57,6 +58,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
@observable _marqueeing: number[] | undefined = undefined;
@observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+ @observable _specialHighlightedRow: number | undefined = undefined;
constructor(props: FieldViewProps) {
super(props);
@@ -131,6 +133,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.layoutDoc._dataViz_titleCol = titleCol;
};
+ @action setSpecialHighlightedRow = (row: number | undefined) => {
+ this._specialHighlightedRow = row;
+ }
+
@action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
restoreView = (data: Doc) => {
// const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
@@ -366,7 +372,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
if (!this.records.length) return 'no data/visualization';
switch (this.dataVizView) {
- case DataVizView.TABLE: return <TableBox {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
+ case DataVizView.TABLE: return <TableBox {...sharedProps} specHighlightedRow={this._specialHighlightedRow} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} vizBox={this} />;
case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} />;
case DataVizView.PIECHART: return <PieChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}}
@@ -515,7 +521,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
while (i < columns && docsChanged < docs.length){
docs[docsChanged].x = curX;
docs[docsChanged].y = curY;
- console.log('x: ' + docs[i].x + ' y: ' + docs[i].y);
curX += templWidth + xGap;
++docsChanged;
++i;
@@ -527,6 +532,16 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
}
+ // applyImagesTo = (doc: Doc, cols: string[]) => {
+ // const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+ // const imageFields = childDocs.filter(doc => doc.type === 'image');
+ // const imageToKey: Map<Doc, string> = new Map();
+ // imageFields.forEach(img => cols.forEach(col => {if (img[col]) imageToKey.set(img, col)}));
+
+ // imageFields.forEach(doc => doc['data'] = String(doc[String(imageToKey.get(doc))]).replace(/"/g, ''));
+
+ // }
+
@action
createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
if (!templateInfo.doc) return;
@@ -545,6 +560,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
target.layout_fieldKey = targetKey;
+ //this.applyImagesTo(target, fields);
return applied;
});
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 8b17f1ed4..328cbbaf1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -81,8 +81,9 @@
grid-auto-rows: 141px;
overflow-y: scroll;
margin: 5px;
+ margin-top: 0px;
width: calc(100% - 10px);
- height: calc(100% - 51px);
+ height: calc(100% - 45px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
@@ -240,8 +241,9 @@
align-items: center;
overflow-y: scroll;
margin: 5px;
+ margin-top: 0px;
width: calc(100% - 10px);
- height: calc(100% - 51px);
+ height: calc(100% - 45px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
@@ -329,6 +331,11 @@
align-items: center;
border-radius: 3px;
border: solid 1px lightblue;
+
+ &:hover {
+ border: solid 2px rgb(68, 153, 233);
+ z-index: 2;
+ }
}
}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index b1488679f..48b87fae7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -38,7 +38,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
@observable _selectedTemplate: Doc | undefined = undefined;
- @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1, repeat: 0};
+ @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
@observable _layoutPreview: boolean = true;
@observable _layoutPreviewScale: number = 1;
@@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _indicatorY: number | undefined = undefined;
@observable _display: boolean = false;
+ @observable _hoveredLayoutPreview: number | undefined = undefined;
@observable _mouseX: number = -1;
@observable _mouseY: number = -1;
@observable _startPos?: {x: number, y: number};
@@ -68,7 +69,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
@computed get docsToRender() {
- return NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows);
+ return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
}
@computed get rowsCount(){
@@ -255,6 +256,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
}
+
+
get layoutPreviewContents() {
const docWidth = Number(this._selectedTemplate?._width);
const docHeight = Number(this._selectedTemplate?._height);
@@ -298,6 +301,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
</div> :
this.docsToRender.map(num =>
<div
+ onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
+ onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
className='docCreatorMenu-layout-preview-item'
style={{
width: scaledDown(docWidth),
@@ -348,7 +353,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
<div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
<div className="docCreatorMenu-dropdown-content">
{layoutOption(LayoutType.Stacked)}
- {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
+ {layoutOption(LayoutType.Grid, undefined, () => {if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
{layoutOption(LayoutType.Row)}
{layoutOption(LayoutType.Column)}
{layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -432,7 +437,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
>
<button
className='docCreatorMenu-menu-button'
- onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {
+ this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates';
+ if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+ }))}>
<FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
</button>
<button
@@ -442,7 +450,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
clickEv.stopPropagation();
if (!this._selectedTemplate) return;
const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-
+
this._dataViz?.createDocsFromTemplate(templateInfo);
}, 'make docs')
)
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index a1deb1625..d484bf5e8 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable jsx-a11y/no-static-element-interactions */
-import { Button, Type } from 'browndash-components';
+import { Button, Colors, Type } from 'browndash-components';
import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -37,6 +37,7 @@ interface TableBoxProps {
left: number;
};
docView?: () => DocumentView | undefined;
+ specHighlightedRow: number | undefined;
}
@observer
@@ -440,7 +441,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
className={`tableBox-row ${this.columns[0]}`}
onClick={e => this.tableRowClick(e, rowId)}
style={{
- background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+ background: rowId === this._props.specHighlightedRow ? 'lightblue' : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+ border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : ''
}}>
{this.columns.map(col => {
let colSelected = false;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e4b3a1b9b..b7943f503 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -341,7 +341,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
@computed get paths() {
- const field = Cast(this.dataDoc[this.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+ const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); // retrieve the primary image URL that is being rendered from the data doc
const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png'));
const altpaths =
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:55:11 +0000