Skip to content

Sort: Replace sort selector with popup card containing sort options #667

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
mchen11077 wants to merge 1 commit into
base: master
Choose a base branch
from
+44 −12
Open

Sort: Replace sort selector with popup card containing sort options #667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 3 additions & 4 deletions src/features/transforms/sorting/SortBySelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ArrowDownUpIcon } from 'lucide-react';
import React from 'react';

import Selector from '@features/params/ui/Selector';
Expand All @@ -8,14 +7,14 @@ import { getApplicableFields } from '@features/transforms/fields/FieldApplicabil

import TransformEnum from '../TransformEnum';

const SortBySelector: React.FC<{ showLabel?: boolean }> = ({ showLabel = true }) => {
const SortBySelector: React.FC = () => {
const { sortBy, updatePageParams, objectType } = usePageParams();
const applicableSortBys = getApplicableFields(TransformEnum.Sort, objectType);

return (
<Selector
selectorLabel={showLabel ? 'Sort By' : <ArrowDownUpIcon size="1.2em" />}
selectorDescription={showLabel ? 'Choose the order of items in the view.' : undefined}
selectorLabel="Sort By"
selectorDescription="Choose the order of items in the view."
options={applicableSortBys}
onChange={(sortBy) => updatePageParams({ sortBy })}
selected={sortBy}
Expand Down
39 changes: 39 additions & 0 deletions src/features/transforms/sorting/SortPopupCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { ArrowDownUpIcon } from 'lucide-react';
import React from 'react';

import PopupCard from '@features/layers/popupcard/PopupCard';
import { SelectorDisplay } from '@features/params/ui/SelectorDisplayContext';
import { getOptionStyle } from '@features/params/ui/SelectorOption';
import usePageParams from '@features/params/usePageParams';

import { PositionInGroup } from '@shared/lib/PositionInGroup';

import SecondarySortBySelector from './SecondarySortBySelector';
import SortBySelector from './SortBySelector';
import SortDirectionSelector from './SortDirectionSelector';

const SortPopupCard: React.FC = () => {
const { sortBy } = usePageParams();

return (
<div className="selector" style={{ gap: '0.25em' }}>

@conradarcturus conradarcturus Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Add flexWrap: 'nowrap'

<ArrowDownUpIcon size="1.2em" />
<PopupCard
buttonLabel={<>{sortBy} ▶</>}
buttonClassName="selected"

@conradarcturus conradarcturus Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The semantic category you want here is "primary". Selected should be only used when there are multiple options.

Suggested change
buttonClassName="selected"
buttonClassName="primary"

buttonStyle={getOptionStyle(SelectorDisplay.Dropdown, true, PositionInGroup.Standalone)}

@conradarcturus conradarcturus Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting use! makes sense. Thanks for re-using styles.

description="Change how items are sorted."
title="Sort"
body={() => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>

@conradarcturus conradarcturus Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Let's keep the selectors in line, add

              width: 'max-content',
              alignItems: 'flex-end',

<SortBySelector />
<SecondarySortBySelector />

@conradarcturus conradarcturus Jun 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The label right now is "Secondary Sort By" do you think the label "Tie breaker" would be easier to understand? Otherwise we can keep it as-is.

<SortDirectionSelector />
</div>
)}
/>
</div>
);
};

export default SortPopupCard;
4 changes: 2 additions & 2 deletions src/pages/DataPageBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { PathContainer } from '@widgets/pathnav/PathNav';

import ResultCount from '@features/pagination/ResultCount';
import FilterPath from '@features/transforms/filtering/FilterPath';
import SortBySelector from '@features/transforms/sorting/SortBySelector';
import SortPopupCard from '@features/transforms/sorting/SortPopupCard';

import ContainErrorsAndSuspense from '@shared/containers/ContainErrorsAndSuspense';

Expand Down Expand Up @@ -42,7 +42,7 @@ const DataPageBody: React.FC = () => {
gap: '0.5rem',
}}
>
<SortBySelector showLabel={false} />
<SortPopupCard />
<ViewSelector />
</div>
</div>
Expand Down
6 changes: 0 additions & 6 deletions src/widgets/controls/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ import ColorGradientSelector from '@features/transforms/coloring/ColorGradientSe
import FieldFocusSelector from '@features/transforms/fields/FieldFocusSelector';
import ScaleBySelector from '@features/transforms/scales/ScaleBySelector';
import SearchBySelector from '@features/transforms/search/SearchBySelector';
import SecondarySortBySelector from '@features/transforms/sorting/SecondarySortBySelector';
import SortBySelector from '@features/transforms/sorting/SortBySelector';
import SortDirectionSelector from '@features/transforms/sorting/SortDirectionSelector';

import LocaleSeparatorSelector from './selectors/LocaleSeparatorSelector';
import PageBrightnessSelector from './selectors/PageBrightnessSelector';
Expand All @@ -26,9 +23,6 @@ const Settings = (): React.ReactNode => {
{isDataPage && (
<>
<LimitInput />
<SortBySelector />
<SecondarySortBySelector />
<SortDirectionSelector />
<ColorBySelector />
<ColorGradientSelector />
<ScaleBySelector />
Expand Down
Loading