Format transaction notes as clickable tags

[joel-jeremy]

For https://github.com/actualbudget/actual/issues/531

[netlify[bot]]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	8fc7b56e83ba2bb46fd727d44e05458166e2a93a
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6669b4cdf892a2000895f6d9
😎 Deploy Preview	https://deploy-preview-2670.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.75 MB → 4.75 MB (+4.77 kB)	+0.10%

Changeset

File	Δ	Size
node_modules/lodash/escapeRegExp.js	🆕 +941 B	0 B → 941 B
src/components/filters/ConditionsOpMenu.tsx	🆕 +703 B	0 B → 703 B
src/hooks/useFilters.ts	📈 +158 B (+10.74%)	1.44 kB → 1.59 kB
src/components/reports/graphs/tableGraph/ReportTableRow.tsx	📈 +554 B (+8.10%)	6.68 kB → 7.22 kB
src/components/transactions/TransactionList.jsx	📈 +275 B (+6.54%)	4.11 kB → 4.37 kB
src/components/filters/AppliedFilters.tsx	📈 +37 B (+4.82%)	767 B → 804 B
src/components/filters/updateFilterReducer.ts	📈 +27 B (+3.76%)	719 B → 746 B
src/components/transactions/TransactionsTable.jsx	📈 +1.96 kB (+3.68%)	53.25 kB → 55.21 kB
src/components/filters/FiltersStack.tsx	📈 +23 B (+2.37%)	971 B → 994 B
src/style/themes/development.ts	📈 +116 B (+1.62%)	6.97 kB → 7.09 kB
src/style/themes/dark.ts	📈 +116 B (+1.61%)	7.03 kB → 7.15 kB
src/style/themes/light.ts	📈 +116 B (+1.59%)	7.11 kB → 7.22 kB
src/style/themes/midnight.ts	📈 +110 B (+1.58%)	6.79 kB → 6.9 kB
home/runner/work/actual/actual/packages/loot-core/src/shared/rules.ts	📈 +78 B (+1.32%)	5.77 kB → 5.85 kB
src/components/reports/reports/NetWorth.jsx	📈 +33 B (+0.73%)	4.42 kB → 4.45 kB
src/components/reports/Header.jsx	📈 +24 B (+0.58%)	4.06 kB → 4.08 kB
src/components/accounts/Header.jsx	📈 +78 B (+0.51%)	15 kB → 15.07 kB
src/components/reports/reports/CashFlow.tsx	📈 +33 B (+0.47%)	6.79 kB → 6.82 kB
src/components/accounts/Account.jsx	📈 +134 B (+0.29%)	45.4 kB → 45.53 kB
src/components/table.tsx	📈 +50 B (+0.20%)	24.26 kB → 24.31 kB
src/components/reports/reports/Spending.tsx	📈 +21 B (+0.20%)	10.4 kB → 10.42 kB
src/components/reports/reports/CustomReport.tsx	📈 +33 B (+0.17%)	19.52 kB → 19.55 kB
src/components/filters/FiltersMenu.jsx	📈 +20 B (+0.16%)	12.41 kB → 12.43 kB
src/components/budget/index.tsx	📈 +12 B (+0.13%)	9.17 kB → 9.18 kB
src/components/modals/EditRule.jsx	📈 +20 B (+0.06%)	34.44 kB → 34.46 kB
src/components/filters/SavedFilterMenuButton.tsx	📉 -8 B (-0.16%)	4.83 kB → 4.82 kB
src/components/accounts/Balance.jsx	📉 -17 B (-0.32%)	5.27 kB → 5.25 kB
node_modules/lodash/_getRawTag.js	📉 -4 B (-0.34%)	1.13 kB → 1.13 kB
node_modules/lodash/_objectToString.js	📉 -4 B (-0.69%)	578 B → 574 B
node_modules/lodash/toString.js	📉 -4 B (-0.70%)	570 B → 566 B
node_modules/lodash/isSymbol.js	📉 -12 B (-1.78%)	673 B → 661 B
node_modules/lodash/_baseToString.js	📉 -22 B (-1.93%)	1.12 kB → 1.09 kB
src/components/filters/FilterExpression.tsx	📉 -61 B (-2.04%)	2.92 kB → 2.86 kB
node_modules/lodash/_Symbol.js	📉 -4 B (-3.67%)	109 B → 105 B
src/components/filters/CondOpMenu.tsx	🔥 -700 B (-100%)	700 B → 0 B

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/AppliedFilters.js	21.23 kB → 28.2 kB (+6.97 kB)	+32.84%
static/js/wide.js	263.46 kB → 266.83 kB (+3.36 kB)	+1.28%
static/js/index.js	3.01 MB → 3.01 MB (+606 B)	+0.02%

Smaller

Asset	File Size	% Changed
static/js/ReportRouter.js	1.23 MB → 1.22 MB (-6.16 kB)	-0.49%

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/narrow.js	75.66 kB	0%

[github-actions[bot]]

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.13 MB → 1.13 MB (+203 B)	+0.02%

Changeset

File	Δ	Size
packages/loot-core/src/platform/server/sqlite/index.web.ts	📈 +91 B (+1.74%)	5.1 kB → 5.18 kB
packages/loot-core/src/shared/rules.ts	📈 +100 B (+1.23%)	7.92 kB → 8.02 kB
packages/loot-core/src/server/accounts/transaction-rules.ts	📈 +266 B (+0.95%)	27.29 kB → 27.55 kB
packages/loot-core/src/server/aql/compiler.ts	📈 +309 B (+0.86%)	34.91 kB → 35.21 kB
packages/loot-core/src/server/accounts/rules.ts	📈 +82 B (+0.28%)	28.76 kB → 28.84 kB
packages/loot-core/src/server/db/index.ts	📉 -117 B (-0.65%)	17.71 kB → 17.59 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
kcab.worker.js	1.13 MB → 1.13 MB (+203 B)	+0.02%

Smaller

No assets were smaller

Unchanged

No assets were unchanged

[youngcw]

The colors probably could use some work, but other than that this looks great

[joel-jeremy]

Any suggestions on the colors? Would it be better to apply primary colors to them? But that would make the tags stand out on the table.

[youngcw]

I don't think I have good recommendations for specific colors. What I was seeing is that the pill colors can be hard to see when the transaction is hovered and highlighted (the same color in midnight mode), and the pill hover color was usually really close to the normal color so it was like nothing happened when hovering.

[youngcw]

Those colors look good to me

[Teprifer]

If you're already on the All Accounts screen, clicking the tag doesn't apply the filtering.

[joel-jeremy]

If you're already on the All Accounts screen, clicking the tag doesn't apply the filtering. Should be fixed now :)

[Teprifer]

Thanks! :)

I also like the new behaviour where it only filters the current account screen when clicked on, I think it's more intuitive.

[MatissJanis]

Maybe it's just me, but I dislike that the tags are in bold. Nothing else in the table is in bold.

Other than that: this is an amazing addition! Thanks for working on this!

[youngcw]

If tags have overlap in their names then you get multiple tags in the filter. Example: make tags for #tag and #tag2 and then click on #tag and both show up in the filtered list

[joel-jeremy]

If tags have overlap in their names then you get multiple tags in the filter. Example: make tags for #tag and #tag2 and then click on #tag and both show up in the filtered list

This would be the limitation of using the existing notes as basis for tags. Until we decide to save tags in the database in their own fields, this would probably be the best we can do for now

[youngcw]

It works for me to put a space at the end of the "contains" search in the filter. That works as long as there is a space after the tag in the note. The case that doesn't work is a single tag in a note that works as a tag, but doesn't have a space at the end

[joel-jeremy]

It works for me to put a space at the end of the "contains" search in the filter. That works as long as there is a space after the tag in the note. The case that doesn't work is a single tag in a note that works as a tag, but doesn't have a space at the end

Yeah, I was getting this too. It also won't work if the tag is in the end of the notes.

[youngcw]

It could be nice to add a special filter that looks for tags that has some extra regex in it than just a "contains" search. Could check for either a space or a line end to match tags. That would also be more clear for when making filters and users want to search for tags.

[youngcw]

Are we thinking this will get set as experimental or do we want try to get a solid MVP before merging? I think we are nearly there with an MVP

[youngcw]

This will need a call out in the docs somewhere

[psybers]

It could be nice to add a special filter that looks for tags that has some extra regex in it than just a "contains" search. Could check for either a space or a line end to match tags. That would also be more clear for when making filters and users want to search for tags.

Couldn't you set the filter value to something like %[^a-z0-9-]TAGHERE[^a-z0-9-]%? I am making the assumption that a "tag" is just letters, digits, and hyphens.

https://github.com/actualbudget/actual/pull/2670/files#diff-b6fb705e038031b12b7b1d3065b3889cd7b36a0e7668a73d306ddc1a35a1a6a4R172

[youngcw]

Looks like regex's #[\S]*\b for finding the tag and #tag\b for filtering by the tag could work. That would allow anything in the tag, even more # chars.

[psybers]

Looks like regex's #[\S]*\b for finding the tag and #tag\b for filtering by the tag could work. That would allow anything in the tag, even more # chars.

Yes, I was aiming for the word boundary regex. But isn't this just going to a SQL statement WHERE foo LIKE %tag%? I don't believe we could use regex there?

[psybers]

To be honest, I am not sure you can even put multiple ranges into a LIKE pattern. I know you can do a character range (or the negation) but have never tried multiple ranges.

[joel-jeremy]

Yes, I was aiming for the word boundary regex. But isn't this just going to a SQL statement WHERE foo LIKE %tag%? I don't believe we could use regex there?

Yes, this will all be compiled down to a LIKE %TAG% query

[psybers]

Ok it appears LIKE does not even support character classes/ranges. I think I have confused using MySQL's RLIKE operator in the past.

The LIKE operator only supports % and _ wildcards.

You could get a bit hacky and work around it though. Something like this might work:

SELECT * FROM table WHERE CONCAT(' ', notes, ' ') LIKE '% #tag %';

Then if the tag is at the start or end, it would still match. This does assume that tags are surrounded by spaces (not newlines or tabs).

Another option is to install a regexp module for sqlite (https://www.npmjs.com/package/sqlite-regex) and then use that to match.

[youngcw]

Could something like this work? https://github.com/WiseLibs/better-sqlite3/issues/763

We would add a regex function that can be run inside a query.

[youngcw]

Nice! The only off thing I'm noticing is that the \b is showing in the filter pill with the tag name.

[joel-jeremy]

I have implemented a $regexp operator in aql and introduced a matches op in rules to use the new operator.

Hopefully this also paves the way to implement regex in rules as per: https://github.com/actualbudget/actual/issues/500

Nice! The only off thing I'm noticing is that the \b is showing in the filter pill with the tag name.

The matches filter should display the raw regex that is being matched so I think it's fine having that there. We could consider adding a special Tags filter if we want in the future to display the just tags.

[psybers]

Still not quite working as you would expect:

[youngcw]

The matches filter should display the raw regex that is being matched so I think it's fine having that there. We could consider adding a special Tags filter if we want in the future to display the just tags.

I think a dedicated tag filter would be good, but that could be a later addition. Thanks for all your work on this!

[joel-jeremy]

Still not quite working as you would expect:

This matched the transaction because the regex matched the #test tag in the notes