Skip to content

Remove outdated skeleton name input #9154

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

Open
hotzenklotz wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Remove outdated skeleton name input #9154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e42e9de
feat: update compact button styling, replace custom icons with Ant De…
hotzenklotz Dec 17, 2025
65540c4
use block spacing
hotzenklotz Dec 18, 2025
01e94f3
remove faIcon prop from ButtonComponent
hotzenklotz Dec 18, 2025
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
31 changes: 7 additions & 24 deletions frontend/javascripts/viewer/view/components/button_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import noop from "lodash/noop";
import React from "react";

type ButtonComponentProps = ButtonProps & {
faIcon?: string;
tooltipPlacement?: FastTooltipPlacement | undefined;
};
/*
Expand All @@ -20,15 +19,7 @@ const ButtonComponent = React.forwardRef<
HTMLButtonElement | HTMLAnchorElement,
ButtonComponentProps
>((props, ref) => {
const {
children,
faIcon,
title,
tooltipPlacement,
onClick = noop,
onTouchEnd,
...restProps
} = props;
const { children, title, tooltipPlacement, onClick = noop, onTouchEnd, ...restProps } = props;

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.currentTarget.blur();
Expand All @@ -42,20 +33,12 @@ const ButtonComponent = React.forwardRef<
}
};

const iconEl = faIcon != null && !props.loading ? <i className={faIcon} /> : null;
const button =
// Differentiate via children != null, since antd uses a different styling for buttons
// with a single icon child (.ant-btn-icon-only will be assigned)
children != null ? (
<Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
{iconEl}
{children}
</Button>
) : (
<Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
{iconEl}
</Button>
);
const button = (
<Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
{children}
</Button>
);

return title != null ? (
<FastTooltip title={title} placement={tooltipPlacement}>
{button}
Expand Down
39 changes: 7 additions & 32 deletions frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@ export default class AdvancedSearchPopover<
style={{
width: 450,
}}
className="compact-items compact-icons"
>
<Input
style={{
Expand All @@ -182,50 +181,26 @@ export default class AdvancedSearchPopover<
areAllMatchesSelected: false,
})
}
addonAfter={
<div
style={{
minWidth: 25,
color: areAllMatchesSelected
? "var(--ant-color-text-disabled)"
: undefined,
}}
>
{areAllMatchesSelected
? "all"
: `${currentPosition + 1}/${numberOfAvailableOptions}`}
</div>
}
ref={this.autoFocus}
autoFocus
/>
<ButtonComponent disabled>
{areAllMatchesSelected
? "all"
: `${currentPosition + 1}/${numberOfAvailableOptions}`}
</ButtonComponent>
<Tooltip title="Previous (shift+enter)">
<ButtonComponent
style={{
width: 40,
}}
onClick={this.selectPreviousOption}
disabled={hasNoResults}
>
<ButtonComponent onClick={this.selectPreviousOption} disabled={hasNoResults}>
<UpOutlined />
</ButtonComponent>
</Tooltip>
<Tooltip title="Next (enter)">
<ButtonComponent
style={{
width: 40,
}}
onClick={this.selectNextOption}
disabled={hasNoResults}
>
<ButtonComponent onClick={this.selectNextOption} disabled={hasNoResults}>
<DownOutlined />
</ButtonComponent>
</Tooltip>
<Tooltip title="Select all matches (except groups)">
<ButtonComponent
style={{
width: 40,
}}
type={areAllMatchesSelected ? "primary" : "default"}
onClick={
this.props.onSelectAllMatches != null
Expand Down
21 changes: 10 additions & 11 deletions frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
InfoCircleOutlined,
SearchOutlined,
ShrinkOutlined,
SortAscendingOutlined,
SortDescendingOutlined,
} from "@ant-design/icons";
import {
Tree as AntdTree,
Expand Down Expand Up @@ -332,13 +334,6 @@ function CommentTabView(props: Props) {
);
}

function renderSortIcon() {
const sortAsc = isSortedAscending;
const sortNumeric = sortBy === SortByEnum.ID;
const iconClass = `fas fa-sort-${sortNumeric ? "numeric" : "alpha"}-${sortAsc ? "down" : "up"}`;
return <i className={iconClass} />;
}

function getSortDropdown(): MenuProps {
return {
selectedKeys: [sortBy],
Expand Down Expand Up @@ -458,7 +453,7 @@ function CommentTabView(props: Props) {
return (
<React.Fragment>
{renderMarkdownModal()}
<Space.Compact className="compact-items compact-icons">
<Space.Compact block>
<AdvancedSearchPopover
onSelect={(comment) => {
setActiveNode(comment.nodeId);
Expand Down Expand Up @@ -510,9 +505,13 @@ function CommentTabView(props: Props) {
icon={<ArrowRightOutlined />}
/>
<Dropdown menu={getSortDropdown()} trigger={["click"]}>
<ButtonComponent title="Sort" onClick={toggleSortingDirection}>
{renderSortIcon()}
</ButtonComponent>
<ButtonComponent
title="Sort"
onClick={toggleSortingDirection}
icon={
isSortedAscending ? <SortAscendingOutlined /> : <SortDescendingOutlined />
}
/>
</Dropdown>
<ButtonComponent
onClick={toggleExpandAllTrees}
Expand Down
2 changes: 1 addition & 1 deletion frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,7 +754,7 @@ class ConnectomeView extends React.Component<Props, State> {
return (
<>
<Space.Compact
className="compact-icons"
block
style={{
marginBottom: 10,
}}
Expand Down
62 changes: 27 additions & 35 deletions frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -994,7 +994,7 @@ class SegmentsView extends React.Component<Props, State> {
};

getMeshesHeader = () => (
<Space size="middle">
<Space.Compact>
<FastTooltip title="Select a mesh file from which precomputed meshes will be loaded.">
<ConfigProvider
renderEmpty={renderEmptyMeshFileSelect}
Expand All @@ -1004,7 +1004,6 @@ class SegmentsView extends React.Component<Props, State> {
placeholder="Select a mesh file"
value={this.props.currentMeshFile != null ? this.props.currentMeshFile.name : null}
onChange={this.handleMeshFileSelected}
size="small"
loading={this.props.availableMeshFiles == null}
popupMatchSelectWidth={false}
>
Expand All @@ -1022,38 +1021,32 @@ class SegmentsView extends React.Component<Props, State> {
</Select>
</ConfigProvider>
</FastTooltip>
<FastTooltip title="Refresh list of available Mesh files">
<ReloadOutlined
key="refresh"
onClick={() =>
Store.dispatch(
maybeFetchMeshFilesAction(
this.props.visibleSegmentationLayer,
this.props.dataset,
true,
),
)
}
>
Reload from Server
</ReloadOutlined>
</FastTooltip>
<FastTooltip title="Add a precomputed mesh file">
<Popover content={this.getPreComputeMeshesPopover} trigger="click" placement="bottom">
<PlusOutlined />
</Popover>
</FastTooltip>
<ButtonComponent
title="Refresh list of available Mesh files"
icon={<ReloadOutlined />}
onClick={() =>
Store.dispatch(
maybeFetchMeshFilesAction(
this.props.visibleSegmentationLayer,
this.props.dataset,
true,
),
)
}
/>
<Popover content={this.getPreComputeMeshesPopover} trigger="click" placement="bottom">
<ButtonComponent title="Add a precomputed mesh file" icon={<PlusOutlined />} />
</Popover>
{this.state.activeMeshJobId != null ? (
<FastTooltip title='A mesh file is currently being computed. See "Processing Jobs" for more information.'>
<LoadingOutlined />
</FastTooltip>
<ButtonComponent
title='A mesh file is currently being computed. See "Processing Jobs" for more information.'
icon={<LoadingOutlined />}
/>
) : null}
<FastTooltip title="Configure ad-hoc mesh computation">
<Popover content={this.getAdHocMeshSettings} trigger="click" placement="bottom">
<SettingOutlined />
</Popover>
</FastTooltip>
</Space>
<Popover content={this.getAdHocMeshSettings} trigger="click" placement="bottom">
<ButtonComponent title="Configure ad-hoc mesh computation" icon={<SettingOutlined />} />
</Popover>
</Space.Compact>
);

getToastForMissingPositions = (groupId: number | null) => {
Expand Down Expand Up @@ -1860,7 +1853,7 @@ class SegmentsView extends React.Component<Props, State> {
).map((node) => node.key);
return (
<React.Fragment>
<Space size="middle">
<Space.Compact>
<AdvancedSearchPopover
onSelect={this.handleSearchSelect}
data={this.state.searchableTreeItemList}
Expand All @@ -1870,13 +1863,12 @@ class SegmentsView extends React.Component<Props, State> {
onSelectAllMatches={this.handleSelectAllMatchingSegments}
>
<ButtonComponent
size="small"
title="Open the search via CTRL + Shift + F"
icon={<SearchOutlined />}
/>
</AdvancedSearchPopover>
{this.getMeshesHeader()}
</Space>
</Space.Compact>
<div style={{ flex: 1 }}>
{isSegmentHierarchyEmpty ? (
<Empty
Expand Down
Loading