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.

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

feat/query: Filter/color by queries #138

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
feat(queries): basic queries interface (slow)
  • Loading branch information
tefkah committed Oct 22, 2021
commit e5970d3a00f2783fc98cb5a8da5fe046dec34ba1
27 changes: 26 additions & 1 deletion components/Tweaks/index.tsx
Original file line number Diff line number Diff line change
@@ -10,9 +10,10 @@ import {
IconButton,
Tooltip,
Heading,
Input,
} from '@chakra-ui/react'

import React, { useContext } from 'react'
import React, { useContext, useState } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
import {
initialPhysics,
@@ -31,6 +32,7 @@ import { usePersistantState } from '../../util/persistant-state'
import { PhysicsPanel } from './PhysicsPanel'
import { VisualsPanel } from './VisualsPanel'
import { BehaviorPanel } from './BehaviorPanel'
import { parseQuery, Queries } from '../../util/parseQuery'

export interface TweakProps {
physics: typeof initialPhysics
@@ -48,6 +50,8 @@ export interface TweakProps {
tags: string[]
tagColors: TagColors
setTagColors: any
queries: Queries
setQueries: any
}

export const Tweaks = (props: TweakProps) => {
@@ -67,9 +71,12 @@ export const Tweaks = (props: TweakProps) => {
tags,
tagColors,
setTagColors,
queries,
setQueries,
} = props

const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
const [q, setQ] = useState('')
const { highlightColor, setHighlightColor } = useContext(ThemeContext)

return !showTweaks ? (
@@ -211,6 +218,24 @@ export const Tweaks = (props: TweakProps) => {
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton>
<AccordionIcon marginRight={2} />
<Heading size="sm">Queries</Heading>
</AccordionButton>
<AccordionPanel>
<Input
value={q}
onChange={(event) => {
const text = event.target.value
setQ(text)
console.log(parseQuery(text, {}))
console.log(queries)
setQueries({ first: { query: parseQuery(text, {}), mode: 'black' } })
}}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Scrollbars>
</Box>
12 changes: 10 additions & 2 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -48,6 +48,7 @@ import {
import { ContextMenu } from '../components/contextmenu'
import Sidebar from '../components/Sidebar'
import { Tweaks } from '../components/Tweaks'
import { filterNodes, Queries } from '../util/parseQuery'
import { usePersistantState } from '../util/persistant-state'
import { ThemeContext, ThemeContextProps } from '../util/themecontext'
import { openNodeInEmacs } from '../util/webSocketFunctions'
@@ -105,6 +106,7 @@ export function GraphPage() {
const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
const [queries, setQueries] = usePersistantState<Queries>('queries', {})
const [
previewNodeState,
{
@@ -542,6 +544,8 @@ export function GraphPage() {
setBehavior,
tagColors,
setTagColors,
queries,
setQueries,
}}
tags={tagsRef.current}
/>
@@ -575,6 +579,7 @@ export function GraphPage() {
setMainWindowWidth,
setContextMenuTarget,
graphRef,
queries,
}}
/>
</Box>
@@ -697,6 +702,7 @@ export interface GraphProps {
setMainWindowWidth: any
variables: { [variable: string]: string }
graphRef: any
queries: Queries
}

export const Graph = function (props: GraphProps) {
@@ -725,6 +731,7 @@ export const Graph = function (props: GraphProps) {
contextMenu,
handleLocal,
variables,
queries,
} = props

const { dailyDir, roamDir } = variables
@@ -798,7 +805,8 @@ export const Graph = function (props: GraphProps) {
const hiddenNodeIdsRef = useRef<NodeById>({})
const filteredGraphData = useMemo(() => {
hiddenNodeIdsRef.current = {}
const filteredNodes = graphData?.nodes
const queriesNodes = filterNodes(graphData?.nodes, queries)
const filteredNodes = queriesNodes
?.filter((nodeArg) => {
const node = nodeArg as OrgRoamNode
if (
@@ -882,7 +890,7 @@ export const Graph = function (props: GraphProps) {
}, {})

return { nodes: filteredNodes, links: filteredLinks }
}, [filter, graphData])
}, [filter, graphData, queries])

const [scopedGraphData, setScopedGraphData] = useState<GraphData>({ nodes: [], links: [] })