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

Jump to bottom

Add description to explorative annotations view #3035

Merged
merged 6 commits into from
Aug 13, 2018
Merged

Add description to explorative annotations view #3035

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2328289
added a popover-link to the name of explorative annotations in the ex…
MichaelBuessemeyer Aug 12, 2018
a10f81c
updated changelog
MichaelBuessemeyer Aug 12, 2018
1c456e9
changed changelog entry and added a tooltip to hint at the descriptio…
MichaelBuessemeyer Aug 13, 2018
8585de3
Merge branch 'master' into add-discription-to-explorative-view
MichaelBuessemeyer Aug 13, 2018
ae849b5
fixed flow errors
MichaelBuessemeyer Aug 13, 2018
77577f9
Merge branch 'master' into add-discription-to-explorative-view
MichaelBuessemeyer Aug 13, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).

- Added two new properties to mapping json files. The `colors: [<hsvHueValue1>, <hsvHueValue2>, ...]` property can be used to specify up to 256 custom colors for the first 256 equivalence classes of the mapping. The `hideUnmappedIds: <true|false>` property indicates whether segments that were not mapped should be rendered transparently or not. [#2965](https://github.com/scalableminds/webknossos/pull/2965)
- Added a button for refreshing the dataset in the backend cache. [#2975](https://github.com/scalableminds/webknossos/pull/2975)
- Added a popover to the explorative annotations view that displays when hovered over the name of an annotation. [#3035](https://github.com/scalableminds/webknossos/pull/3035)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, this is a bit too detailed. I'd change it to "Added the possibility to see the description of a tracing within the dashboard."

- All dates in webknossos will be shown in the browser's timezone. On hover, a tooltip will show the date in UTC. [#2916](https://github.com/scalableminds/webknossos/pull/2916) ![image](https://user-images.githubusercontent.com/2486553/42888385-74c82bc0-8aa8-11e8-9c3e-7cfc90ce93bc.png)
- When merging datasets within a tracing via the merge-modal, the user can choose whether the merge should be executed directly in the currently opened tracing. Alternatively, a new annotation can be created which is accessible via the dashboard (as it has been before).
- Added shortcuts for moving along the current tracing direction in orthogonal mode. Pressing 'e' (and 'r' for the reverse direction) will move along the "current direction", which is defined by the vector between the last two created nodes.
Expand Down
35 changes: 28 additions & 7 deletions app/assets/javascripts/dashboard/explorative_annotations_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import * as React from "react";
import { Link, withRouter } from "react-router-dom";
import Request from "libs/request";
import { AsyncLink } from "components/async_clickables";
import { Spin, Input, Table, Button, Modal, Tag, Icon } from "antd";
import { Spin, Input, Table, Button, Modal, Tag, Icon, Popover } from "antd";
import FormatUtils from "libs/format_utils";
import Toast from "libs/toast";
import Utils from "libs/utils";
Expand Down Expand Up @@ -336,6 +336,30 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
);
}

renderNameWithDescription(tracing: APIAnnotationType) {
return (
<Popover
title="Description"
trigger="hover"
content={
<div style={{ maxWidth: 400 }}>
{tracing.description && tracing.description !== ""
? tracing.description
: "<no description>"}
</div>
}
placement="topLeft"
>
<div>
<EditableTextLabel
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well! However, I find it a bit weird from a UX perspective, that the popover always shows when you hover over the edit button or the name input. I'd change the structure as follows:

<div>
  <EditableTextLabel ... />
  <Popover>
    <i className="fa fa-align-justify" />
  </Popover>
</div>

That way, the description is a separate thing.

value={tracing.name}
onChange={newName => this.renameTracing(tracing, newName)}
/>
</div>
</Popover>
);
}

renderTable() {
return (
<Table
Expand All @@ -356,12 +380,9 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
title="Name"
dataIndex="name"
sorter={Utils.localeCompareBy(typeHint, "name")}
render={(name: string, tracing: APIAnnotationType) => (
<EditableTextLabel
value={name}
onChange={newName => this.renameTracing(tracing, newName)}
/>
)}
render={(name: string, tracing: APIAnnotationType) =>
this.renderNameWithDescription(tracing)
}
/>
<Column
title="Stats"
Expand Down