Skip to content

Commit dad03e3

Browse files
tefkahtefkah
authored
feat(filter): add option to filter by subdirectory (org-roam#190)
1 parent 9ed0c57 commit dad03e3

21 files changed

+494
-220
lines changed

‎components/TagMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import React from 'react'
1515
import { colorList, initialFilter, TagColors } from './config'
1616
import { Collapse } from './Sidebar/Collapse'
17-
import { ColorMenu } from './Tweaks/ColorMenu'
17+
import { ColorMenu } from './Tweaks/Visual/ColorMenu'
1818

1919
export interface TagMenuProps {
2020
setTagColors: any

‎components/Tweaks/BehaviorPanel.tsx ‎components/Tweaks/Behavior/BehaviorPanel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import {
1414
Switch,
1515
} from '@chakra-ui/react'
1616
import React from 'react'
17-
import { initialBehavior, initialMouse } from '../config'
18-
import { InfoTooltip } from './InfoTooltip'
19-
import { SliderWithInfo } from './SliderWithInfo'
17+
import { initialBehavior, initialMouse } from '../../config'
18+
import { InfoTooltip } from '../InfoTooltip'
19+
import { SliderWithInfo } from '../SliderWithInfo'
2020

2121
export interface BehaviorPanelProps {
2222
behavior: typeof initialBehavior

‎components/Tweaks/FilterPanel.tsx ‎components/Tweaks/Filter/FilterPanel.tsx

+38-13
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ import {
1818
AccordionIcon,
1919
AccordionPanel,
2020
} from '@chakra-ui/react'
21-
import React from 'react'
22-
import { TagPanel } from './TagPanel'
23-
import { initialFilter, initialLocal, TagColors } from '../config'
21+
import React, { useContext } from 'react'
22+
import { OptionPanel } from '../OptionPanel'
23+
import { initialFilter, initialLocal, TagColors } from '../../config'
2424
import { TagColorPanel } from './TagColorPanel'
25-
import { SliderWithInfo } from './SliderWithInfo'
25+
import { SliderWithInfo } from '../SliderWithInfo'
26+
import { VariablesContext } from '../../../util/variablesContext'
2627

2728
export interface FilterPanelProps {
2829
filter: typeof initialFilter
@@ -48,6 +49,7 @@ const FilterPanel = (props: FilterPanelProps) => {
4849
colorList,
4950
tags,
5051
} = props
52+
const { roamDir, subDirs } = useContext(VariablesContext)
5153
return (
5254
<Box>
5355
<VStack
@@ -80,7 +82,6 @@ const FilterPanel = (props: FilterPanelProps) => {
8082
})()}
8183
</MenuButton>
8284
<Portal>
83-
{' '}
8485
<MenuList bgColor="gray.200" zIndex="popover">
8586
<MenuItem
8687
onClick={() =>
@@ -175,25 +176,49 @@ const FilterPanel = (props: FilterPanelProps) => {
175176
/>
176177
</VStack>
177178
<Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
179+
<AccordionItem>
180+
<AccordionButton>
181+
Directory filters
182+
<AccordionIcon />
183+
</AccordionButton>
184+
<AccordionPanel pr={0} mr={0}>
185+
<OptionPanel
186+
filter={filter}
187+
setFilter={setFilter}
188+
options={subDirs}
189+
displayName="directory blocklist"
190+
listName="dirsBlocklist"
191+
labelFilter={roamDir}
192+
/>
193+
<OptionPanel
194+
filter={filter}
195+
setFilter={setFilter}
196+
options={subDirs}
197+
displayName="directory allowlist"
198+
listName="dirsAllowlist"
199+
labelFilter={roamDir}
200+
/>
201+
</AccordionPanel>
202+
</AccordionItem>
178203
<AccordionItem>
179204
<AccordionButton>
180205
Tag filters
181206
<AccordionIcon />
182207
</AccordionButton>
183208
<AccordionPanel pr={0} mr={0}>
184-
<TagPanel
185-
highlightColor={highlightColor}
209+
<OptionPanel
186210
filter={filter}
187211
setFilter={setFilter}
188-
tags={tags}
189-
mode="blacklist"
212+
options={tags}
213+
displayName="tag blocklist"
214+
listName="tagsBlacklist"
190215
/>
191-
<TagPanel
192-
highlightColor={highlightColor}
216+
<OptionPanel
193217
filter={filter}
194218
setFilter={setFilter}
195-
tags={tags}
196-
mode="whitelist"
219+
options={tags}
220+
displayName="tag allowlist"
221+
listName="tagsWhitelist"
197222
/>
198223
</AccordionPanel>
199224
</AccordionItem>

‎components/Tweaks/TagColorPanel.tsx ‎components/Tweaks/Filter/TagColorPanel.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from '@chakra-ui/react'
1616
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
1717
import React, { useState } from 'react'
18-
import { TagColors } from '../config'
18+
import { TagColors } from '../../config'
1919

2020
export interface TagColorPanelProps {
2121
tags: string[]
@@ -95,7 +95,6 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
9595
{<Box bgColor={tagColors[tag]} borderRadius="sm" height={6} width={6}></Box>}
9696
</MenuButton>
9797
<Portal>
98-
{' '}
9998
<MenuList minW={10} zIndex="popover" bgColor="gray.200">
10099
{colorList.map((color: string) => (
101100
<MenuItem

‎components/Tweaks/CitationsPanel.tsx ‎components/Tweaks/NodesNLinks/CitationsPanel.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Box, StackDivider, VStack } from '@chakra-ui/react'
22
import React from 'react'
3-
import { ColorMenu } from './ColorMenu'
4-
import { colorList, initialVisuals } from '../config'
5-
import { EnableSection } from './EnableSection'
6-
import { SliderWithInfo } from './SliderWithInfo'
3+
import { ColorMenu } from '../Visual/ColorMenu'
4+
import { colorList, initialVisuals } from '../../config'
5+
import { EnableSection } from '../EnableSection'
6+
import { SliderWithInfo } from '../SliderWithInfo'
77

88
export interface CitationsPanelProps {
99
visuals: typeof initialVisuals

‎components/Tweaks/TagPanel.tsx ‎components/Tweaks/OptionPanel.tsx

+21-17
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,46 @@
11
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
2-
import React, { useState } from 'react'
2+
import React, { useContext, useState } from 'react'
3+
import { ThemeContext } from '../../util/themecontext'
34
import { initialFilter } from '../config'
45

5-
export interface TagPanelProps {
6-
tags: string[]
6+
export interface OptionPanelProps {
7+
options: string[]
78
filter: typeof initialFilter
89
setFilter: any
9-
highlightColor: string
10-
mode: string
10+
listName: 'tagsBlacklist' | 'tagsWhitelist' | 'dirsAllowlist' | 'dirsBlocklist'
11+
displayName: string
12+
labelFilter?: string
1113
}
1214

13-
export const TagPanel = (props: TagPanelProps) => {
14-
const { filter, setFilter, tags, highlightColor, mode } = props
15-
const tagArray = tags.map((tag) => {
16-
return { value: tag, label: tag }
15+
export const OptionPanel = (props: OptionPanelProps) => {
16+
const { filter, listName, labelFilter, displayName, setFilter, options = [] } = props
17+
const { highlightColor } = useContext(ThemeContext)
18+
const optionArray = options.map((option) => {
19+
return { value: option, label: labelFilter ? option.replace(labelFilter, '') : option }
1720
})
1821

19-
const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
20-
const name = mode === 'blacklist' ? 'blocklist' : 'allowlist'
21-
const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
22-
filter[currentTags].map((tag) => {
23-
return { value: tag, label: tag }
22+
const [selectedItems, setSelectedItems] = useState<typeof optionArray>(
23+
filter[listName].map((option) => {
24+
return {
25+
value: option,
26+
label: labelFilter ? (option as string)?.replace(labelFilter, '') : option,
27+
}
2428
}),
2529
)
2630

2731
return (
2832
<CUIAutoComplete
2933
labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
30-
items={tagArray}
31-
label={`Add tag to ${name}`}
34+
items={optionArray}
35+
label={`Add tag to ${displayName}`}
3236
placeholder=" "
3337
onCreateItem={(item) => null}
3438
disableCreateItem={true}
3539
selectedItems={selectedItems}
3640
onSelectedItemsChange={(changes) => {
3741
if (changes.selectedItems) {
3842
setSelectedItems(changes.selectedItems)
39-
setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
43+
setFilter({ ...filter, [listName]: changes.selectedItems.map((item) => item.value) })
4044
}
4145
}}
4246
listItemStyleProps={{ overflow: 'hidden' }}

‎components/Tweaks/PhysicsPanel.tsx ‎components/Tweaks/Physics/PhysicsPanel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {
1212
VStack,
1313
} from '@chakra-ui/react'
1414
import React, { useCallback } from 'react'
15-
import { initialPhysics } from '../config'
16-
import { EnableSection } from './EnableSection'
17-
import { SliderWithInfo } from './SliderWithInfo'
15+
import { initialPhysics } from '../../config'
16+
import { EnableSection } from '../EnableSection'
17+
import { SliderWithInfo } from '../SliderWithInfo'
1818

1919
export interface PhysicsPanelProps {
2020
physics: typeof initialPhysics

‎components/Tweaks/ColorMenu.tsx ‎components/Tweaks/Visual/ColorMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Popover,
1515
} from '@chakra-ui/react'
1616
import React, { useCallback } from 'react'
17-
import { initialVisuals } from '../config'
17+
import { initialVisuals } from '../../config'
1818

1919
export interface ColorMenuProps {
2020
label: string

‎components/Tweaks/ColorsPanel.tsx ‎components/Tweaks/Visual/ColorsPanel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from '@chakra-ui/react'
1919
import React from 'react'
2020
import { ColorMenu } from './ColorMenu'
21-
import { colorList, initialVisuals } from '../config'
21+
import { colorList, initialVisuals } from '../../config'
2222

2323
export interface ColorsPanelProps {
2424
visuals: typeof initialVisuals

‎components/Tweaks/GraphColorSelect.tsx ‎components/Tweaks/Visual/GraphColorSelect.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Text,
1212
} from '@chakra-ui/react'
1313
import { ChevronDownIcon } from '@chakra-ui/icons'
14-
import { initialColoring } from '../config'
14+
import { initialColoring } from '../../config'
1515

1616
export interface GraphColorSelectProps {
1717
coloring: typeof initialColoring

‎components/Tweaks/HighlightingPanel.tsx ‎components/Tweaks/Visual/HighlightingPanel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Box, Select, StackDivider, VStack } from '@chakra-ui/react'
22
import React from 'react'
3-
import { initialVisuals } from '../config'
4-
import { EnableSection } from './EnableSection'
5-
import { SliderWithInfo } from './SliderWithInfo'
3+
import { initialVisuals } from '../../config'
4+
import { EnableSection } from '../EnableSection'
5+
import { SliderWithInfo } from '../SliderWithInfo'
66

77
export interface HighlightingPanelProps {
88
visuals: typeof initialVisuals

‎components/Tweaks/LabelsPanel.tsx ‎components/Tweaks/Visual/LabelsPanel.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
} from '@chakra-ui/react'
1616
import React from 'react'
1717
import { ColorMenu } from './ColorMenu'
18-
import { colorList, initialVisuals } from '../config'
19-
import { SliderWithInfo } from './SliderWithInfo'
18+
import { colorList, initialVisuals } from '../../config'
19+
import { SliderWithInfo } from '../SliderWithInfo'
2020

2121
export interface LabelsPanelProps {
2222
visuals: typeof initialVisuals

‎components/Tweaks/NodesNLinksPanel.tsx ‎components/Tweaks/Visual/NodesNLinksPanel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Box, StackDivider, VStack } from '@chakra-ui/react'
22
import React from 'react'
33
import { ColorMenu } from './ColorMenu'
4-
import { colorList, initialVisuals } from '../config'
5-
import { EnableSection } from './EnableSection'
6-
import { SliderWithInfo } from './SliderWithInfo'
4+
import { colorList, initialVisuals } from '../../config'
5+
import { EnableSection } from '../EnableSection'
6+
import { SliderWithInfo } from '../SliderWithInfo'
77

88
export interface NodesNLinksPanelProps {
99
visuals: typeof initialVisuals

‎components/Tweaks/ThemeSelect.tsx ‎components/Tweaks/Visual/ThemeSelect.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
Text,
1212
} from '@chakra-ui/react'
1313

14-
import { themes } from '../themes'
14+
import { themes } from '../../themes'
1515
import { ChevronDownIcon } from '@chakra-ui/icons'
16-
import { ThemeContext } from '../../util/themecontext'
16+
import { ThemeContext } from '../../../util/themecontext'
1717

1818
export const ThemeSelect = () => {
1919
type Theme = { [key: string]: string }

‎components/Tweaks/VisualsPanel.tsx ‎components/Tweaks/Visual/VisualsPanel.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,11 @@ import {
1818
import React, { useCallback } from 'react'
1919
import { HighlightingPanel } from './HighlightingPanel'
2020
import { ColorsPanel } from './ColorsPanel'
21-
import { initialColoring, initialVisuals } from '../config'
21+
import { initialColoring, initialVisuals } from '../../config'
2222
import { NodesNLinksPanel } from './NodesNLinksPanel'
2323
import { LabelsPanel } from './LabelsPanel'
24-
import { CitationsPanel } from './CitationsPanel'
25-
import { ColorMenu } from './ColorMenu'
2624
import { ThemeSelect } from './ThemeSelect'
25+
import { CitationsPanel } from '../NodesNLinks/CitationsPanel'
2726
import { GraphColorSelect } from './GraphColorSelect'
2827

2928
export interface VisualsPanelProps {

‎components/Tweaks/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ import {
2626
initialColoring,
2727
} from '../config'
2828

29-
import FilterPanel from './FilterPanel'
29+
import FilterPanel from './Filter/FilterPanel'
3030

3131
import { ThemeContext } from '../../util/themecontext'
3232
import { usePersistantState } from '../../util/persistant-state'
33-
import { PhysicsPanel } from './PhysicsPanel'
34-
import { VisualsPanel } from './VisualsPanel'
35-
import { BehaviorPanel } from './BehaviorPanel'
33+
import { PhysicsPanel } from './Physics/PhysicsPanel'
34+
import { BehaviorPanel } from './Behavior/BehaviorPanel'
35+
import { VisualsPanel } from './Visual/VisualsPanel'
3636

3737
export interface TweakProps {
3838
physics: typeof initialPhysics

‎components/config.ts

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ export const initialFilter = {
3939
filelessCites: false,
4040
tagsBlacklist: [],
4141
tagsWhitelist: [],
42+
dirsBlocklist: [],
43+
dirsAllowlist: [],
4244
bad: true,
4345
nodes: [],
4446
links: [],

0 commit comments

Comments
 (0)