Skip to content

Commit c744c50

Browse files
PollepsPolleps
committed
Add tagging feature + tag search #459 
1 parent 17428a6 commit c744c50

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+4338
-971
lines changed

‎browser/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
1717
- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Add 'open' option to classes and properties in the ontology edit view.
1818
- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Updated the look of the resource selector and made it more responsive.
1919
- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Add info dropdowns to different sections of the ontology editor for more information about the section.
20+
- [#459](https://github.com/atomicdata-dev/atomic-server/issues/459) New feature: Add tags to your resources to better organize your data. Search for resources with specific tags in the search bar with `tag:[name]`.
2021

2122
### @tomic/lib
2223

@@ -25,6 +26,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
2526
- Fix generated ontologies not working in a Next.js server context.
2627
- SEMI BREAKING CHANGE: When using generated types by cli, @tomic/lib now requires them to be generated by @tomic/cli v0.41.0 or above.
2728
- Fix types masquerading as esm module in cjs build.
29+
- `store.search()` now handles multiple values for the same property correctly.
2830

2931
### @tomic/react
3032

‎browser/data-browser/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"@types/react-pdf": "^7.0.0",
6161
"@types/react-window": "^1.8.8",
6262
"@vitejs/plugin-react": "^4.3.4",
63-
"babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
63+
"babel-plugin-react-compiler": "19.0.0-beta-21e868a-20250216",
6464
"babel-plugin-styled-components": "^2.1.4",
6565
"csstype": "^3.1.3",
6666
"gh-pages": "^5.0.0",

‎browser/data-browser/src/components/EditableTitle.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
} from '../helpers/transitionName';
1010
import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
1111
import { UnsavedIndicator } from './UnsavedIndicator';
12+
import { Flex } from './Row';
1213

1314
export interface EditableTitleProps {
1415
resource: Resource;
@@ -142,6 +143,11 @@ const TitleInput = styled.input`
142143
&:focus {
143144
outline: none;
144145
}
146+
147+
${Flex} & {
148+
// When rendered inside a flex container the margin is already provided by the gap.
149+
margin-bottom: 0;
150+
}
145151
`;
146152

147153
const Icon = styled(FaPencil)`

‎browser/data-browser/src/components/Main.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
99
import { MAIN_CONTAINER } from '../helpers/containers';
1010
import Parent from './Parent';
1111
import { useResource } from '@tomic/react';
12+
import { CalculatedPageHeight } from '../globalCssVars';
1213

1314
/** Main landmark. Every page should have one of these.
1415
* If the pages shows a resource a subject can be passed that enables view transitions to work. */
@@ -36,7 +37,9 @@ export function Main({
3637
const StyledMain = memo(styled.main<ViewTransitionProps>`
3738
container: ${MAIN_CONTAINER} / inline-size;
3839
${p => transitionName(RESOURCE_PAGE_TRANSITION_TAG, p.subject)};
39-
height: calc(100vh - ${p => p.theme.heights.breadCrumbBar});
40+
height: calc(
41+
${CalculatedPageHeight.var()} - ${p => p.theme.heights.breadCrumbBar}
42+
);
4043
overflow-y: auto;
4144
scroll-padding: calc(
4245
${p => p.theme.heights.breadCrumbBar} + ${p => p.theme.size(2)}

‎browser/data-browser/src/components/Navigation.tsx

+65-48
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,53 @@ import { FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa';
44
import { styled } from 'styled-components';
55

66
import { ButtonBar } from './Button';
7-
import { useCurrentSubject } from '../helpers/useCurrentSubject';
87
import { useSettings } from '../helpers/AppSettings';
98
import { SideBar } from './SideBar';
109
import { isRunningInTauri } from '../helpers/tauri';
1110
import { shortcuts } from './HotKeyWrapper';
12-
import { NavBarSpacer } from './NavBarSpacer';
13-
import { Searchbar } from './Searchbar';
11+
import { Searchbar } from './Searchbar/Searchbar';
1412
import { useMediaQuery } from '../hooks/useMediaQuery';
1513
import { useBackForward } from '../hooks/useNavigateWithTransition';
1614
import { NAVBAR_TRANSITION_TAG } from '../helpers/transitionName';
15+
import { SearchbarFakeInput } from './Searchbar/SearchbarInput';
16+
import { CalculatedPageHeight } from '../globalCssVars';
1717

1818
interface NavWrapperProps {
1919
children: React.ReactNode;
2020
}
21+
enum NavBarPosition {
22+
Top,
23+
Floating,
24+
Bottom,
25+
}
26+
27+
const getPosition = (
28+
navbarTop: boolean,
29+
navbarFloating: boolean,
30+
): NavBarPosition => {
31+
if (navbarTop) return NavBarPosition.Top;
32+
if (navbarFloating) return NavBarPosition.Floating;
33+
34+
return NavBarPosition.Bottom;
35+
};
2136

2237
/** Wraps the entire app and adds a navbar at the bottom or the top */
2338
export function NavWrapper({ children }: NavWrapperProps): JSX.Element {
2439
const { navbarTop, navbarFloating } = useSettings();
2540
const contentRef = React.useRef<HTMLDivElement>(null);
2641

42+
const navbarPosition = getPosition(navbarTop, navbarFloating);
43+
2744
return (
2845
<>
2946
{navbarTop && <NavBar />}
30-
<SideBarWrapper>
47+
<SideBarWrapper navbarPosition={navbarPosition}>
3148
<SideBar />
3249
<Content
3350
ref={contentRef}
3451
navbarTop={navbarTop}
3552
navbarFloating={navbarFloating}
3653
>
37-
<NavBarSpacer position='top' />
3854
{children}
3955
</Content>
4056
</SideBarWrapper>
@@ -58,10 +74,8 @@ const Content = styled.div<ContentProps>`
5874
function NavBar(): JSX.Element {
5975
const { back, forward } = useBackForward();
6076

61-
const [subject] = useCurrentSubject();
6277
const { navbarTop, navbarFloating, sideBarLocked, setSideBarLocked } =
6378
useSettings();
64-
const [showButtons, setShowButtons] = React.useState<boolean>(true);
6579

6680
const machesStandalone = useMediaQuery(
6781
'(display-mode: standalone) or (display-mode: fullscreen)',
@@ -77,13 +91,6 @@ function NavBar(): JSX.Element {
7791
[machesStandalone],
7892
);
7993

80-
/** Hide buttons if the input element is quite small */
81-
function maybeHideButtons(event: React.FocusEvent<HTMLInputElement>) {
82-
if (event.target.getBoundingClientRect().width < 280) {
83-
setShowButtons(false);
84-
}
85-
}
86-
8794
const ConditionalNavbar = navbarFloating ? NavBarFloating : NavBarFixed;
8895

8996
return (
@@ -92,35 +99,29 @@ function NavBar(): JSX.Element {
9299
aria-label='search'
93100
floating={navbarFloating}
94101
>
95-
{showButtons && (
96-
<>
97-
<ButtonBar
98-
leftPadding
99-
type='button'
100-
onClick={() => setSideBarLocked(!sideBarLocked)}
101-
title={`Show / hide sidebar (${shortcuts.sidebarToggle})`}
102-
data-test='sidebar-toggle'
103-
>
104-
<FaBars />
105-
</ButtonBar>
106-
{isInStandaloneMode && (
107-
<>
108-
<ButtonBar type='button' title='Go back' onClick={back}>
109-
<FaArrowLeft />
110-
</ButtonBar>{' '}
111-
<ButtonBar type='button' title='Go forward' onClick={forward}>
112-
<FaArrowRight />
113-
</ButtonBar>
114-
</>
115-
)}
116-
</>
117-
)}
102+
<>
103+
<ButtonBar
104+
leftPadding
105+
type='button'
106+
onClick={() => setSideBarLocked(!sideBarLocked)}
107+
title={`Show / hide sidebar (${shortcuts.sidebarToggle})`}
108+
data-test='sidebar-toggle'
109+
>
110+
<FaBars />
111+
</ButtonBar>
112+
{isInStandaloneMode && (
113+
<>
114+
<ButtonBar type='button' title='Go back' onClick={back}>
115+
<FaArrowLeft />
116+
</ButtonBar>{' '}
117+
<ButtonBar type='button' title='Go forward' onClick={forward}>
118+
<FaArrowRight />
119+
</ButtonBar>
120+
</>
121+
)}
122+
</>
118123
<VerticalDivider />
119-
<Searchbar
120-
subject={subject}
121-
onFocus={maybeHideButtons}
122-
onBlur={() => setShowButtons(true)}
123-
/>
124+
<Searchbar />
124125
</ConditionalNavbar>
125126
);
126127
}
@@ -140,11 +141,20 @@ const NavBarBase = styled.div<NavBarStyledProps>`
140141
border: solid 1px ${props => props.theme.colors.bg2};
141142
background-color: ${props => props.theme.colors.bg};
142143
view-transition-name: ${NAVBAR_TRANSITION_TAG};
144+
container-name: search-bar;
145+
container-type: inline-size;
146+
147+
/* Hide buttons when the searchbar is small and has focus. */
148+
&:has(${SearchbarFakeInput}:focus) ${ButtonBar} {
149+
@container search-bar (max-inline-size: 280px) {
150+
display: none;
151+
}
152+
}
143153
`;
144154

145155
/** Width of the floating navbar in rem */
146156
const NavBarFloating = styled(NavBarBase)`
147-
box-shadow: ${props => props.theme.boxShadow};
157+
box-shadow: ${props => props.theme.boxShadowSoft};
148158
border-radius: 999px;
149159
overflow: hidden;
150160
max-width: calc(100% - 2rem);
@@ -157,7 +167,7 @@ const NavBarFloating = styled(NavBarBase)`
157167
top: ${props => (props.top ? '2rem' : 'auto')};
158168
bottom: ${props => (props.top ? 'auto' : '1rem')};
159169
160-
&:has(input:focus) {
170+
&:has(${SearchbarFakeInput}:focus) {
161171
box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.main};
162172
border-color: ${props => props.theme.colors.main};
163173
}
@@ -193,12 +203,19 @@ const VerticalDivider = styled.div`
193203
height: 100%;
194204
margin-left: ${p => p.theme.size(2)};
195205
`;
196-
const SideBarWrapper = styled('div')`
206+
207+
const SideBarWrapper = styled.div<{ navbarPosition: NavBarPosition }>`
208+
${CalculatedPageHeight.define(p =>
209+
p.navbarPosition === NavBarPosition.Floating
210+
? '100dvh'
211+
: `calc(100dvh - 2.5rem)`,
212+
)}
197213
display: flex;
198-
height: 100vh;
214+
height: ${CalculatedPageHeight.var()};
199215
position: fixed;
200-
top: 0;
201-
bottom: 0;
216+
top: ${p => (p.navbarPosition === NavBarPosition.Top ? '2.5rem' : 'auto')};
217+
bottom: ${p =>
218+
p.navbarPosition === NavBarPosition.Bottom ? '2.5rem' : 'auto'};
202219
left: 0;
203220
right: 0;
204221

‎browser/data-browser/src/components/Row.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,13 @@ export const Column = forwardRef<
5252

5353
Column.displayName = 'Column';
5454

55-
const Flex = styled.div<FlexProps>`
55+
/**
56+
* Underlying layout of the Row and Column components.
57+
* Do not use this component directly and don't extend it.
58+
*
59+
* This component is only exported so it can be used in css selectors.
60+
*/
61+
export const Flex = styled.div<FlexProps>`
5662
align-items: ${p => (p.center ? 'center' : 'initial')};
5763
display: flex;
5864
gap: ${p => p.gap ?? `${p.theme.margin}rem`};

‎browser/data-browser/src/components/ScrollArea.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const Thumb = styled(RadixScrollArea.Thumb)`
6262
export const ScrollViewPort = styled(RadixScrollArea.Viewport)`
6363
width: 100%;
6464
height: 100%;
65+
6566
& > div[style] {
6667
/* Radix gives this div a display of table to fix an obscure bug (that we don't have).
6768
This messes with the accessibility tree and stops the TableEditor from working correctly for screen readers. */

0 commit comments

Comments
 (0)