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

Migrate Table visualization to React Part 1: Renderer #3963

Merged
merged 25 commits into from
Jul 31, 2019
Merged

Migrate Table visualization to React Part 1: Renderer #3963

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3f10ab2
Migrate Table visualization (Renderer) to React
kravets-levko Jul 8, 2019
e909f80
Restore all column types except of JSON
kravets-levko Jul 8, 2019
c9f09eb
Restore JSON column + fix proptypes
kravets-levko Jul 8, 2019
eb3323c
Restore JSON column: refine code and fix bugs
kravets-levko Jul 8, 2019
5048e4d
Refine code
kravets-levko Jul 10, 2019
ca8bcc5
Restore search in data
kravets-levko Jul 16, 2019
91fd16f
Restore column sorting
kravets-levko Jul 16, 2019
66f8265
Cleanup: remove angular components (incl. <dynamic-table>)
kravets-levko Jul 17, 2019
d9117a4
Minor fixes
kravets-levko Jul 17, 2019
a0c56dd
Merge branch 'master' into migrate-visualization-table
kravets-levko Jul 17, 2019
31b3a4e
Fix tests
kravets-levko Jul 17, 2019
e662803
Fixes: pagination alignment; re-render visualization on tab change (a…
kravets-levko Jul 18, 2019
cd8fb4a
Add tests
kravets-levko Jul 18, 2019
64afeec
Fix search in table: force cast value to string
kravets-levko Jul 18, 2019
6401afa
When visualization options change, compare them deeply to avoid unnec…
kravets-levko Jul 23, 2019
4547ca5
Merge branch 'master' into migrate-visualization-table
kravets-levko Jul 24, 2019
c045003
Make tests more stable
kravets-levko Jul 24, 2019
c0aad9d
CR1: UI tweaks
kravets-levko Jul 30, 2019
bfe02e7
Better align tooltip on table header cells
kravets-levko Jul 30, 2019
fdfb760
Add link to GH discussion
kravets-levko Jul 30, 2019
11628f6
Tweak table headings
kravets-levko Jul 31, 2019
61730f6
Merge branch 'master' into migrate-visualization-table
kravets-levko Jul 31, 2019
b47ea55
Update to reflect changes in new Ant version
kravets-levko Jul 31, 2019
5b80f43
Fix search input
kravets-levko Jul 31, 2019
675ea83
Increase min width of table headings
kravets-levko Jul 31, 2019
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: 5 additions & 6 deletions client/app/visualizations/table/renderer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,14 @@
opacity: 0;
}

&:hover .anticon.off {
&:hover .anticon.off,
.table-visualization-column-is-sorted .anticon.off {
kravets-levko marked this conversation as resolved.
Show resolved Hide resolved
opacity: 1;
}

th {
white-space: nowrap;

.ant-input-search {
font-weight: normal;

Expand All @@ -57,11 +60,7 @@

// optimize room for th content
&.ant-table-column-has-actions.ant-table-column-has-sorters {
padding-right: 20px !important;

.ant-table-column-sorter {
right: 3px;
}
padding-right: 3px;
}

.table-visualization-heading {
Expand Down
32 changes: 19 additions & 13 deletions client/app/visualizations/table/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { isNil, map, filter, each, sortBy, some, findIndex, toString } from 'lodash';
import React from 'react';
import cx from 'classnames';
import Icon from 'antd/lib/icon';
import Tooltip from 'antd/lib/tooltip';

Expand Down Expand Up @@ -85,22 +86,27 @@ export function prepareColumns(columns, searchInput, orderBy, onOrderByChange) {
<Tooltip placement="top" title={column.title}>
<div className="table-visualization-heading" data-sort-column-index={sortColumnIndex}>{column.title}</div>
</Tooltip>
<div className="ant-table-column-sorter">
<Icon
className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
type="caret-up"
theme="filled"
/>
<Icon
className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
type="caret-down"
theme="filled"
/>
</div>
<span className="ant-table-column-sorter">
<div className="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
<Icon
className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
type="caret-up"
theme="filled"
/>
<Icon
className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
type="caret-down"
theme="filled"
/>
</div>
</span>
</React.Fragment>
),
onHeaderCell: () => ({
className: 'ant-table-column-has-actions ant-table-column-has-sorters',
className: cx(
'ant-table-column-has-actions ant-table-column-has-sorters',
{ 'table-visualization-column-is-sorted': isAscend || isDescend },
),
onClick: event => onOrderByChange(toggleOrderBy(column.name, orderBy, event.shiftKey)),
}),
};
Expand Down