From c8476ce9d290cc2e49bc63b0578a6096bc2a1b28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Mon, 17 Jun 2019 18:33:07 +0200 Subject: [PATCH 01/11] made antd tables scrollable and added wordbreak for them; making the dataset name clickable to view is in progress --- .../dashboard/advanced_dataset/dataset_table.js | 9 ++++++++- frontend/stylesheets/antd_overwrites.less | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index 907d2baedf8..53ff8ebad23 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -3,6 +3,7 @@ import { Table, Icon, Tag } from "antd"; import * as React from "react"; import _ from "lodash"; +import { Link } from "react-router-dom"; import dice from "dice-coefficient"; import type { APITeam, APIMaybeUnimportedDataset } from "admin/api_flow_types"; @@ -154,7 +155,13 @@ class DatasetTable extends React.PureComponent { sortOrder={sortedInfo.columnKey === "name" && sortedInfo.order} render={(name: string, dataset: APIMaybeUnimportedDataset) => (
- {dataset.name} + + {dataset.name} +
{dataset.dataStore.name}
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less index 51fabc5920e..731946e3dde 100644 --- a/frontend/stylesheets/antd_overwrites.less +++ b/frontend/stylesheets/antd_overwrites.less @@ -89,6 +89,10 @@ .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td { padding: 1px 8px; } +.ant-table { + overflow: auto; + word-break: break-word; +} label.ant-checkbox-wrapper { line-height: 1.5; From 2b556304c31fdf5af7dc7c1d9c452684bec5cb81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Thu, 20 Jun 2019 11:45:06 +0200 Subject: [PATCH 02/11] change color of the dataset name in the table back to black/grey --- .../javascripts/dashboard/advanced_dataset/dataset_table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index 53ff8ebad23..c5fdb7f36ca 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -158,7 +158,7 @@ class DatasetTable extends React.PureComponent { {dataset.name} From 62450f1cd42964c8be7e9ff1a62ad4b0c28c9264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Thu, 20 Jun 2019 12:00:58 +0200 Subject: [PATCH 03/11] Updated the changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b0f54c8819..5406d8ca2fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). - Added the possbility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101) - Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119) - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105) +- The dataset table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens of the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) ### Changed - From 24a31691539cf55dfae476e342c7a6cd996b7ac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Thu, 27 Jun 2019 13:15:20 +0200 Subject: [PATCH 04/11] apllying fix only to dataset table & set min width --- CHANGELOG.md | 2 +- .../javascripts/dashboard/advanced_dataset/dataset_table.js | 2 ++ frontend/stylesheets/antd_overwrites.less | 6 +++++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d24ea30d38..091040d6c48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). - Added the possbility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101) - Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119) - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105) -- The dataset table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens of the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) +- The dataset table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) ### Changed - Reactivated and renamed the "Quality" setting to "Hardware Utilization". Using a higher value will render data in higher quality, but puts more stress on the user's hardware and bandwidth. [#4142](https://github.com/scalableminds/webknossos/pull/4142) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index c5fdb7f36ca..24c0a83cf56 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -146,6 +146,8 @@ class DatasetTable extends React.PureComponent { } onChange={this.handleChange} locale={{ emptyText: this.renderEmptyText() }} + className="test1" + id="dataset-table" > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td { padding: 1px 8px; } -.ant-table { +#dataset-table { overflow: auto; word-break: break-word; } +#dataset-table > div > div > table > thead > tr > th:not(.ant-table-expand-icon-th) { + min-width: 200px; +} + label.ant-checkbox-wrapper { line-height: 1.5; } From 78c759fb2ccacce7f663a9dc0cc1cdfcf61707d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Fri, 28 Jun 2019 16:10:54 +0200 Subject: [PATCH 05/11] also apply table scroll fix to explorative annotations table --- .../javascripts/dashboard/advanced_dataset/dataset_table.js | 3 +-- .../javascripts/dashboard/explorative_annotations_view.js | 1 + frontend/stylesheets/antd_overwrites.less | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index 24c0a83cf56..0e4ae0bfc0a 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -146,8 +146,7 @@ class DatasetTable extends React.PureComponent { } onChange={this.handleChange} locale={{ emptyText: this.renderEmptyText() }} - className="test1" - id="dataset-table" + className="large-table" > { pagination={{ defaultPageSize: 50, }} + className="large-table" > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td { padding: 1px 8px; } -#dataset-table { +.large-table .ant-table-body { overflow: auto; word-break: break-word; } -#dataset-table > div > div > table > thead > tr > th:not(.ant-table-expand-icon-th) { +.large-table table > thead > tr > th:not(.ant-table-expand-icon-th) { min-width: 200px; } From 2c1652daf5103534ecdcd7226e21fe42a5789370 Mon Sep 17 00:00:00 2001 From: MichaelBuessemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com> Date: Tue, 2 Jul 2019 10:04:34 +0200 Subject: [PATCH 06/11] Update CHANGELOG.md --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 091040d6c48..cbdb1cb53a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,10 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). [Commits](https://github.com/scalableminds/webknossos/compare/19.04.0...HEAD) ### Added -- Added the possbility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101) +- Added the possibility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101) - Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119) - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105) -- The dataset table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) +- The dataset and the explorative annotations table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) ### Changed - Reactivated and renamed the "Quality" setting to "Hardware Utilization". Using a higher value will render data in higher quality, but puts more stress on the user's hardware and bandwidth. [#4142](https://github.com/scalableminds/webknossos/pull/4142) From e275b75e27eedaf646593fd867ea61fd58e7b5bd Mon Sep 17 00:00:00 2001 From: MichaelBuessemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com> Date: Tue, 2 Jul 2019 10:05:49 +0200 Subject: [PATCH 07/11] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbdb1cb53a6..d011566d0b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). - Added the possibility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101) - Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119) - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105) -- The dataset and the explorative annotations table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) +- The dataset and the explorative annotations table in the dashboard are now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the dataset table opens the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136) ### Changed - Reactivated and renamed the "Quality" setting to "Hardware Utilization". Using a higher value will render data in higher quality, but puts more stress on the user's hardware and bandwidth. [#4142](https://github.com/scalableminds/webknossos/pull/4142) From e4b2f0d280c9325d730b900ff92e7da691daac75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Fri, 26 Jul 2019 16:01:19 +0200 Subject: [PATCH 08/11] setting width of columns manually --- .../javascripts/dashboard/advanced_dataset/dataset_table.js | 2 ++ .../javascripts/dashboard/explorative_annotations_view.js | 5 +++++ frontend/stylesheets/antd_overwrites.less | 4 ---- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index 0e4ae0bfc0a..7e71cc54d33 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -152,6 +152,7 @@ class DatasetTable extends React.PureComponent { title="Name" dataIndex="name" key="name" + width={200} sorter={Utils.localeCompareBy(typeHint, dataset => dataset.name)} sortOrder={sortedInfo.columnKey === "name" && sortedInfo.order} render={(name: string, dataset: APIMaybeUnimportedDataset) => ( @@ -229,6 +230,7 @@ class DatasetTable extends React.PureComponent { /> (dataset.dataSource.dataLayers || []).map(layer => ( diff --git a/frontend/javascripts/dashboard/explorative_annotations_view.js b/frontend/javascripts/dashboard/explorative_annotations_view.js index 4a4dc9a827a..a230b6448a9 100644 --- a/frontend/javascripts/dashboard/explorative_annotations_view.js +++ b/frontend/javascripts/dashboard/explorative_annotations_view.js @@ -406,12 +406,14 @@ class ExplorativeAnnotationsView extends React.PureComponent { formatHash(tracing.id)} sorter={Utils.localeCompareBy(typeHint, annotation => annotation.id)} className="monospace-id" /> annotation.name)} render={(name: string, tracing: APIAnnotationCompact) => @@ -420,6 +422,7 @@ class ExplorativeAnnotationsView extends React.PureComponent { /> // Flow doesn't recognize that stats must contain the nodeCount if the treeCount is != null annotation.stats.treeCount != null && @@ -477,10 +480,12 @@ class ExplorativeAnnotationsView extends React.PureComponent { annotation.modified)} render={modified => } /> thead > tr > th:not(.ant-table-expand-icon-th) { - min-width: 200px; -} - label.ant-checkbox-wrapper { line-height: 1.5; } From 5b9469718e542fcbfb86f7d9e33c94b2258682c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Mon, 29 Jul 2019 16:24:30 +0200 Subject: [PATCH 09/11] added changelog entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b30438ce55..54bcac137f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). - ### Changed -- +- Each of the columns of the dataset table and explorative annotations table in the dashboard now have an individual fixed width, so the tables become scrollable on smaller screens. [#4207](https://github.com/scalableminds/webknossos/pull/4207) ### Fixed - Data for disabled or invisible layers will no longer be downloaded, saving bandwidth and speeding up webKnossos in general. [#4202](https://github.com/scalableminds/webknossos/pull/4202) From 3523e43aafb8b94473510ec87c669f26bf2daee4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Wed, 31 Jul 2019 13:55:22 +0200 Subject: [PATCH 10/11] added css rule to not word break column titles --- frontend/stylesheets/antd_overwrites.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less index faf5ae3fe04..30a78148ceb 100644 --- a/frontend/stylesheets/antd_overwrites.less +++ b/frontend/stylesheets/antd_overwrites.less @@ -94,6 +94,10 @@ word-break: break-word; } +.ant-table-column-title { + word-break: normal; +} + label.ant-checkbox-wrapper { line-height: 1.5; } From b1cf760a2cb1288911c80a8f6c5310a17df6c679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?= Date: Mon, 12 Aug 2019 12:05:50 +0200 Subject: [PATCH 11/11] increased name and scale column min-width --- .../javascripts/dashboard/advanced_dataset/dataset_table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js index 7e71cc54d33..aafca52e325 100644 --- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js +++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js @@ -152,7 +152,7 @@ class DatasetTable extends React.PureComponent { title="Name" dataIndex="name" key="name" - width={200} + width={280} sorter={Utils.localeCompareBy(typeHint, dataset => dataset.name)} sortOrder={sortedInfo.columnKey === "name" && sortedInfo.order} render={(name: string, dataset: APIMaybeUnimportedDataset) => ( @@ -182,7 +182,7 @@ class DatasetTable extends React.PureComponent { title="Scale & Extent" dataIndex="scale" key="scale" - width={220} + width={280} render={(__, dataset: APIMaybeUnimportedDataset) => `${formatScale(dataset.dataSource.scale)} ${getDatasetExtentAsString(dataset)}` }