jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(graph): filter bar — path glob, tag include/exclude, depth (T-323)

Browse Source 
Switches the controller from pql.outlinks to pql.meta (outlinks + tags in
one call per file) and strips #heading fragments from link targets, so a
heading link now connects the two notes. Adds a filter bar above the graph:
a path glob that re-queries pql on submit, a depth-from-active selector for
the local graph around the open note, and tri-state tag pills
(neutral / include / exclude). The pane draws the filtered visibleGraph.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-07-02 21:42:50 +02:00
co-authored by Claude Opus 4.8
parent f859173b98
commit aabec87d9a
7 changed files with 376 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/builtin/graph/src/graph_panel.dart
+140 -12
View File
@@ -1,8 +1,12 @@
/// The vault link-graph context panel (T-323): loads the whole vault's link
/// graph from pql via [GraphController] and renders it with [GraphView],
/// wiring a node click to open that note in the editor. Shows loading / error
/// / empty states until there's a graph to draw; a debounced refresh keeps the
/// existing graph on screen rather than flashing back to the spinner.
/// graph from pql via [GraphController] and renders the filtered [GraphView],
/// wiring a node click to open that note in the editor.
///
/// Above the graph sits a filter bar — a path glob (re-queries pql on submit),
/// a depth-from-active selector (the local graph around the open note), and
/// tri-state tag pills (neutral → include → exclude). Loading / error / empty
/// states show until there's a graph; a debounced refresh keeps the existing
/// graph on screen rather than flashing back to the spinner.
library;
import 'dart:async';
@@ -10,6 +14,7 @@ import 'dart:async';
import 'package:clide/builtin/graph/src/graph_controller.dart';
import 'package:clide/builtin/graph/src/graph_view.dart';
import 'package:clide/kernel/kernel.dart';
import 'package:clide/src/graph/graph_filter.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
@@ -42,6 +47,8 @@ class _GraphPanelState extends State<GraphPanel> {
void _open(String nodeId) => unawaited(_ipc?.request('editor.open', args: {'path': nodeId}));
String _t(String key, String fallback) => ClideSettings.i18n.string(context, key, namespace: 'builtin.graph', placeholder: fallback);
@override
Widget build(BuildContext context) {
final c = _controller;
@@ -49,15 +56,29 @@ class _GraphPanelState extends State<GraphPanel> {
return ListenableBuilder(
listenable: c,
builder: (context, _) {
// Once we have a graph, keep drawing it through a debounced refresh —
// only the very first load (or a load that cleared it) falls back to
// the spinner / empty / error states.
if (!c.graph.isEmpty) return GraphView(graph: c.graph, onOpen: _open);
if (c.loading) return const Center(child: ClideSpinner(size: 20, semanticLabel: 'Loading graph'));
if (c.error != null) {
return _message(ClideSettings.theme.of(context).surface.statusError, c.error!);
// Before we have any graph, the pre-load states own the whole panel.
if (c.graph.isEmpty) {
if (c.loading) return const Center(child: ClideSpinner(size: 20, semanticLabel: 'Loading graph'));
if (c.error != null) return _message(ClideSettings.theme.of(context).surface.statusError, c.error!);
return _message(null, _t('graph.empty', 'No linked notes in this vault.'));
}
return _message(null, ClideSettings.i18n.string(context, 'graph.empty', namespace: 'builtin.graph', placeholder: 'No linked notes in this vault.'));
final visible = c.visibleGraph;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_GraphFilterBar(controller: c, t: _t),
Expanded(
child: visible.isEmpty
? _message(
null,
c.filter.depth != null && c.activePath == null
? _t('graph.empty.nolocal', 'Open a note to see its local graph.')
: _t('graph.empty.filtered', 'No notes match the filter.'),
)
: GraphView(graph: visible, onOpen: _open),
),
],
);
},
);
}
@@ -67,3 +88,110 @@ class _GraphPanelState extends State<GraphPanel> {
child: ClideText(text, color: color, muted: color == null, fontSize: clideFontCaption, textAlign: TextAlign.center),
);
}
/// The glob + depth + tag controls above the graph. Reads/writes the
/// controller's glob and [GraphFilter]; keeps no state of its own.
class _GraphFilterBar extends StatelessWidget {
const _GraphFilterBar({required this.controller, required this.t});
final GraphController controller;
final String Function(String key, String fallback) t;
static const _depths = <(String, int?)>[('All', null), ('1', 1), ('2', 2), ('3', 3)];
void _setDepth(int? depth) => controller.setFilter(controller.filter.copyWith(depth: depth, clearDepth: depth == null));
void _cycleTag(String tag) {
final f = controller.filter;
final inc = {...f.includeTags}, exc = {...f.excludeTags};
if (inc.contains(tag)) {
inc.remove(tag);
exc.add(tag); // include → exclude
} else if (exc.contains(tag)) {
exc.remove(tag); // exclude → neutral
} else {
inc.add(tag); // neutral → include
}
controller.setFilter(f.copyWith(includeTags: inc, excludeTags: exc));
}
@override
Widget build(BuildContext context) {
final tokens = ClideSettings.theme.of(context).surface;
final f = controller.filter;
final tags = controller.availableTags;
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: tokens.dividerColor)),
),
padding: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
ClideFilterBox(
hint: t('graph.filter.glob', 'Path glob, e.g. notes/**'),
showIcon: true,
icon: PhosphorIcons.byName('funnel'),
onChanged: (_) {}, // reload is heavy (1+N pql calls) — apply on submit only
onSubmitted: controller.setGlob,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
ClideText(t('graph.filter.depth', 'Local'), fontSize: clideFontCaption, color: tokens.globalTextMuted),
const SizedBox(width: 8),
for (final (label, depth) in _depths)
Padding(
padding: const EdgeInsets.only(right: 4),
child: _pill(
tokens,
label: label == 'All' ? t('graph.filter.all', 'All') : label,
selected: f.depth == depth,
onTap: () => _setDepth(depth),
),
),
],
),
),
if (tags.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 10, right: 10, top: 6),
child: Wrap(
spacing: 4,
runSpacing: 4,
children: [
for (final tag in tags)
_pill(
tokens,
label: f.excludeTags.contains(tag) ? '−$tag' : (f.includeTags.contains(tag) ? '+$tag' : tag),
selected: f.includeTags.contains(tag),
danger: f.excludeTags.contains(tag),
onTap: () => _cycleTag(tag),
),
],
),
),
],
),
);
}
Widget _pill(SurfaceTokens tokens, {required String label, required bool selected, bool danger = false, required VoidCallback onTap}) {
final accent = danger ? tokens.statusError : tokens.globalFocus;
final active = selected || danger;
return ClideTappable(
onTap: onTap,
builder: (context, hovered, _) => Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: active ? accent.withValues(alpha: 0.16) : (hovered ? tokens.sidebarItemHover : null),
border: Border.all(color: active ? accent : tokens.globalBorder),
borderRadius: BorderRadius.circular(10),
),
child: ClideText(label, fontSize: clideFontCaption, color: active ? accent : tokens.globalForeground),
),
);
}
}