Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RawDataModal is now aware of updates to its Scroller viewport #25

Merged
merged 7 commits into from
Feb 12, 2018
+37 −36
Merged

RawDataModal is now aware of updates to its Scroller viewport #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ce4e706
Scroller notification after viewport changes
piter75 Feb 9, 2018
01ae879
RawDataModal binds to Scroller viewport update events
piter75 Feb 9, 2018
8b9eb10
Renamed Segment Raw Data modal to Raw Data
piter75 Feb 9, 2018
48f5824
Minor code style fixes
piter75 Feb 9, 2018
c7633de
Minor code style fixes (2)
piter75 Feb 9, 2018
38d69dd
Style fixes after review
piter75 Feb 12, 2018
8dae268
Merge branch 'master' into rawdata_rendering_fixes
mkuthan Feb 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/client/components/scroller/scroller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { clamp, classNames, getXFromEvent, getYFromEvent } from '../../utils/dom/dom';
import { firstUp } from '../../../common/utils/string/string';
import { Stage } from "../../../common/models";

export type XSide = 'left' | 'right';
export type YSide = 'top' | 'bottom';
Expand All @@ -42,6 +43,7 @@ export interface ScrollerProps extends React.Props<any> {
onMouseMove?: (x: number, y: number, part: ScrollerPart) => void;
onMouseLeave?: () => void;
onScroll?: (scrollTop: number, scrollLeft: number) => void;
onViewportUpdate?: (stage: Stage) => void;

// "Transcluded" elements
topGutter?: JSX.Element | JSX.Element[];
Expand Down Expand Up @@ -211,10 +213,10 @@ export class Scroller extends React.Component<ScrollerProps, ScrollerState> {
const { bodyWidth, bodyHeight } = this.props.layout;
const { viewportWidth, viewportHeight } = this.state;
var target = e.target as Element;
​

var scrollLeft = clamp(target.scrollLeft, 0, Math.max(bodyWidth - viewportWidth, 0));
var scrollTop = clamp(target.scrollTop, 0, Math.max(bodyHeight - viewportHeight, 0));
​

if (this.props.onScroll !== undefined) {
this.setState({
scrollTop,
Expand Down Expand Up @@ -336,6 +338,11 @@ export class Scroller extends React.Component<ScrollerProps, ScrollerState> {

if (this.state.viewportHeight !== newHeight || this.state.viewportWidth !== newWidth) {
this.setState({viewportHeight: newHeight, viewportWidth: newWidth});

const { x, y } = rect;
const { onViewportUpdate } = this.props;

onViewportUpdate && onViewportUpdate(new Stage({ x, y, width: newWidth, height: newHeight }));
}
}

Expand Down
1 change: 0 additions & 1 deletion src/client/config/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ export const STRINGS: any = {
regex: 'Regex',
relative: 'Relative',
save: 'Save',
segment: 'segment',
select: 'Select',
settings: 'Settings',
sortBy: 'Sort by',
Expand Down
61 changes: 28 additions & 33 deletions src/client/modals/raw-data-modal/raw-data-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,18 @@
import './raw-data-modal.scss';

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { List } from 'immutable';
import { isDate } from 'chronoshift';
import { $, Dataset, PlywoodValue, Datum, AttributeInfo, Expression } from 'plywood';
import { Essence, Stage, DataCube, Timekeeper } from '../../../common/models/index';
import { $, AttributeInfo, Dataset, Datum, Expression } from 'plywood';
import { DataCube, Essence, Stage, Timekeeper } from '../../../common/models';

import { Fn, makeTitle, arraySum } from '../../../common/utils/general/general';
import { arraySum, Fn, formatFilterClause, makeTitle } from '../../../common/utils';
import { download, makeFileName } from '../../utils/download/download';
import { formatFilterClause } from '../../../common/utils/formatter/formatter';
import { classNames } from '../../utils/dom/dom';
import { getVisibleSegments } from '../../utils/sizing/sizing';
import { STRINGS } from '../../config/constants';

import { Modal, Button, Scroller, ScrollerLayout, Loader, QueryError } from '../../components/index';
import { Button, Loader, Modal, QueryError, Scroller, ScrollerLayout } from '../../components';

const HEADER_HEIGHT = 30;
const ROW_HEIGHT = 30;
Expand Down Expand Up @@ -89,14 +87,12 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa
stage: null
};

this.globalResizeListener = this.globalResizeListener.bind(this);
}

componentDidMount() {
this.mounted = true;
const { essence, timekeeper } = this.props;
this.fetchData(essence, timekeeper);
this.globalResizeListener();
}

componentWillUnmount() {
Expand Down Expand Up @@ -127,35 +123,34 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa
);
}

globalResizeListener() {
var { table } = this.refs;
var tableDOM = ReactDOM.findDOMNode(table);
if (!tableDOM) return;
this.setState({
stage: Stage.fromClientRect(tableDOM.getBoundingClientRect())
});
onScrollerViewportUpdate(viewPortStage: Stage) {
if (!viewPortStage.equals(this.state.stage)) {
this.setState({
stage: viewPortStage
});
}
}

onScroll(scrollTop: number, scrollLeft: number) {
this.setState({scrollLeft, scrollTop});
this.setState({ scrollLeft, scrollTop });
}

getStringifiedFilters(): List<string> {
const { essence, timekeeper } = this.props;
const { dataCube } = essence;

return essence.getEffectiveFilter(timekeeper).clauses.map((clause, i) => {
return essence.getEffectiveFilter(timekeeper).clauses.map(clause => {
const dimension = dataCube.getDimensionByExpression(clause.expression);
if (!dimension) return null;
var evaluatedClause = dimension.kind === 'time' ? essence.evaluateClause(clause, timekeeper) : clause;
const evaluatedClause = dimension.kind === 'time' ? essence.evaluateClause(clause, timekeeper) : clause;
return formatFilterClause(dimension, evaluatedClause, essence.timezone);
}).toList();
}

getSortedAttributes(dataCube: DataCube): AttributeInfo[] {
const timeAttributeName = dataCube.timeAttribute ? dataCube.timeAttribute.name : null;

var attributeRank = (attribute: AttributeInfo) => {
const attributeRank = (attribute: AttributeInfo) => {
const name = attribute.name;
if (name === timeAttributeName) {
return 1;
Expand Down Expand Up @@ -197,10 +192,9 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa
const name = attribute.name;
const width = getColumnWidth(attribute);
const style = { width };
const key = name;
return (<div className={classNames("header-cell", classFromAttribute(attribute))} style={style} key={i}>
<div className="title-wrap">
{makeTitle(key)}
{makeTitle(name)}
</div>
</div>);
});
Expand All @@ -223,23 +217,23 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa

const rawData = dataset.data;

const [ firstRowToShow, lastRowToShow ] = this.getVisibleIndices(rawData.length, stage.height);
const [firstRowToShow, lastRowToShow] = this.getVisibleIndices(rawData.length, stage.height);

const rows = rawData.slice(firstRowToShow, lastRowToShow);
var attributes = this.getSortedAttributes(dataCube);
var attributeWidths = attributes.map(getColumnWidth);
let attributes = this.getSortedAttributes(dataCube);
const attributeWidths = attributes.map(getColumnWidth);

const { startIndex, shownColumns } = getVisibleSegments(attributeWidths, scrollLeft, stage.width);
var leftOffset = arraySum(attributeWidths.slice(0, startIndex));
const leftOffset = arraySum(attributeWidths.slice(0, startIndex));

attributes = attributes.slice(startIndex, startIndex + shownColumns);

var rowY = firstRowToShow * ROW_HEIGHT;
let rowY = firstRowToShow * ROW_HEIGHT;
return rows.map((datum: Datum, i: number) => {
var cols: JSX.Element[] = [];
const cols: JSX.Element[] = [];
attributes.forEach((attribute: AttributeInfo) => {
const name = attribute.name;
const datumAttribute = datum[name]
const datumAttribute = datum[name];
const value = (datumAttribute instanceof Expression) ? datumAttribute.resolve(datum).simplify() : datum[name];
const colStyle = {
width: getColumnWidth(attribute)
Expand All @@ -264,10 +258,10 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa

render() {
const { essence, timekeeper, onClose } = this.props;
const { dataset, loading, error } = this.state;
const { dataset, loading, error, stage } = this.state;
const { dataCube } = essence;

const title = `${makeTitle(STRINGS.segment)} ${STRINGS.rawData}`;
const title = `${makeTitle(STRINGS.rawData)}`;

const filtersString = essence.getEffectiveFilter(timekeeper).getFileString(dataCube.timeAttribute);

Expand All @@ -294,11 +288,12 @@ export class RawDataModal extends React.Component<RawDataModalProps, RawDataModa
ref="table"
layout={scrollerLayout}
topGutter={this.renderHeader()}
body={this.renderRows()}
body={stage && this.renderRows()}
onScroll={this.onScroll.bind(this)}
onViewportUpdate={this.onScrollerViewportUpdate.bind(this)}
/>
{error ? <QueryError error={error}/> : null}
{loading ? <Loader/> : null}
{error ? <QueryError error={error} /> : null}
{loading ? <Loader /> : null}
<div className="button-bar">
<Button type="primary" className="close" onClick={onClose} title={STRINGS.close} />
<Button
Expand Down