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

Make layer settings visually consistent #7295

Merged
merged 6 commits into from
Aug 31, 2023
Merged

Make layer settings visually consistent #7295

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd0ce44
add drag handles to every layer setting
MichaelBuessemeyer Aug 24, 2023
f77656f
rename variable
MichaelBuessemeyer Aug 24, 2023
e9227ae
add changelog entry
MichaelBuessemeyer Aug 24, 2023
53e6605
fix typo
MichaelBuessemeyer Aug 24, 2023
84efaf1
Merge branch 'master' of github.com:scalableminds/webknossos into mak…
MichaelBuessemeyer Aug 31, 2023
d5c24f1
add missing { } in jsx
MichaelBuessemeyer Aug 31, 2023
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.unreleased.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
- Added the option to change the ordering of color layers via drag and drop. This is useful when using the cover blend mode. [#7188](https://github.com/scalableminds/webknossos/pull/7188)
- Added configuration to require users' emails to be verified, added flow to verify emails via link. [#7161](https://github.com/scalableminds/webknossos/pull/7161)
- Added a route to explore and add remote datasets via API. [#7176](https://github.com/scalableminds/webknossos/pull/7176)
- Added disabled drag handles to volume and skeleton layers for visual consistency. These layer cannot be dragged or reordered. [#7295](https://github.com/scalableminds/webknossos/pull/7295)
- Added a new button to the layer settings in view only dataset mode to save the current view configuration as the dataset's default. [#7205](https://github.com/scalableminds/webknossos/pull/7205)
- Added option to select multiple segments in the segment list in order to perform batch actions. [#7242](https://github.com/scalableminds/webknossos/pull/7242)
- If a dataset layer is transformed (using an affine matrix or a thin plate spline), it can be dynamically shown without that transform via the layers sidebar. All other layers will be transformed accordingly. [#7246](https://github.com/scalableminds/webknossos/pull/7246)
Expand Down
75 changes: 52 additions & 23 deletions frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,23 +161,47 @@ const SortableLayerSettingsContainer = SortableContainer(({ children }: { childr
return <div>{children}</div>;
});

const DragHandle = SortableHandle(() => (
<div
style={{
display: "inline-flex",
justifyContent: "center",
cursor: "grab",
alignItems: "center",
}}
>
<MenuOutlined
type DragHandleProps = {
hasLessThanTwoColorLayers: boolean;
};

function dragHandleIcon(isDisabled: boolean = false) {
return (
<div
style={{
display: "inline-block",
marginRight: 8,
display: "inline-flex",
justifyContent: "center",
cursor: "grab",
alignItems: "center",
color: isDisabled ? "rgba(0, 0, 0, 0.25)" : "rgba(0, 0, 0, 0.60)",
}}
/>
</div>
));
>
<MenuOutlined
style={{
display: "inline-block",
marginRight: 8,
}}
/>
</div>
);
}
const DragHandle = SortableHandle(({ hasLessThanTwoColorLayers }: DragHandleProps) => {
return hasLessThanTwoColorLayers ? (
<Tooltip title="Order is only changeable with more than one color layer.">
dragHandleIcon(true)
Copy link
Member

Choose a reason for hiding this comment

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

wouldn't this print the string dragHandleIcon because it's not in {} braces? Why not use something like <DragHandleIcon isDisabled=... />?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh right, I forgot the {...} here. The reason why I did not went for the "jsx-version" () is that in this scenario the tooltip does not work. The tooltip somehow needs an immediate child. This problem can be solved by adding a fragment, but this clutters the code imo more than the {...} version. Here is how it would look like with the jsx style:

<Tooltip title={`Layer not movable: ${layerType} layers are always rendered on top.`}>
  <>
    <DragHandleIcon isDisabled />
  </>
</Tooltip>

As I dislike the additional fragments, I used the { ... } style

</Tooltip>
) : (
dragHandleIcon()
);
});

function DummyDragHandle({ layerType }: { layerType: string }) {
return (
<Tooltip title={`Layer not movable: ${layerType} layers are always rendered on top.`}>
{dragHandleIcon(true)}
</Tooltip>
);
}

function TransformationIcon({ layer }: { layer: APIDataLayer }) {
const dispatch = useDispatch();
Expand Down Expand Up @@ -484,7 +508,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
layerName: string,
elementClass: string,
layerSettings: DatasetLayerConfiguration,
draggingDisabled: boolean = true,
hasLessThanTwoColorLayers: boolean = true,
) => {
const { tracing, dataset } = this.props;
const { intensityRange } = layerSettings;
Expand Down Expand Up @@ -572,7 +596,11 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
const items = possibleItems.filter((el) => el);
return (
<div className="flex-container">
{draggingDisabled ? null : <DragHandle />}
{isColorLayer ? (
<DragHandle hasLessThanTwoColorLayers={hasLessThanTwoColorLayers} />
) : (
<DummyDragHandle layerType="Volume" />
)}
{this.getEnableDisableLayerSwitch(isDisabled, onChange)}
<div
className="flex-item"
Expand Down Expand Up @@ -841,12 +869,12 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
layerName,
layerConfiguration,
isColorLayer,
draggingDisabled = true,
hasLessThanTwoColorLayers = true,
}: {
layerName: string;
layerConfiguration: DatasetLayerConfiguration | null | undefined;
isColorLayer: boolean;
draggingDisabled?: boolean;
hasLessThanTwoColorLayers?: boolean;
}) => {
// Ensure that every layer needs a layer configuration and that color layers have a color layer.
if (!layerConfiguration || (isColorLayer && !layerConfiguration.color)) {
Expand All @@ -863,7 +891,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
layerName,
elementClass,
layerConfiguration,
draggingDisabled,
hasLessThanTwoColorLayers,
)}
{isDisabled ? null : (
<div
Expand Down Expand Up @@ -1058,6 +1086,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
paddingRight: 1,
}}
>
<DummyDragHandle layerType="Skeleton" />
<div
className="flex-item"
style={{
Expand Down Expand Up @@ -1288,7 +1317,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
const segmentationLayerNames = Object.keys(layers).filter(
(layerName) => !getIsColorLayer(this.props.dataset, layerName),
);
const isSortingDisabled = colorLayerOrder.length < 2;
const hasLessThanTwoColorLayers = colorLayerOrder.length < 2;
const colorLayerSettings = colorLayerOrder.map((layerName, index) => {
return (
<SortableLayerSettings
Expand All @@ -1297,8 +1326,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
layerConfiguration={layers[layerName]}
isColorLayer
index={index}
disabled={isSortingDisabled}
draggingDisabled={isSortingDisabled}
disabled={hasLessThanTwoColorLayers}
hasLessThanTwoColorLayers={hasLessThanTwoColorLayers}
/>
);
});
Expand Down