feat(client): secondary sort tags by usage

- add locally computed field `noteCount` on `Tag`
neopostmodern · Dec 3, 2022 · 09f0e7c · 09f0e7c
1 parent 7f1ed24
commit 09f0e7c
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 35 deletions.
diff --git a/client/codegen.yml b/client/codegen.yml
@@ -1,5 +1,7 @@
 overwrite: true
-schema: "../schema.graphql"
+schema:
+  - "../schema.graphql"
+  - "./local-schema.graphql"
 documents: "src/**/*.{ts,tsx}"
 config:
   nonOptionalTypename: true

diff --git a/client/local-schema.graphql b/client/local-schema.graphql
@@ -0,0 +1,3 @@
+extend type Tag {
+  noteCount: Int!
+}
diff --git a/client/src/renderer/apollo.ts b/client/src/renderer/apollo.ts
@@ -19,6 +19,20 @@ const cache = new InMemoryCache({
     INote: ['Link', 'Text'],
   },
   typePolicies: {
+    Tag: {
+      fields: {
+        noteCount: {
+          read(_, args) {
+            const notesWithTag: readonly unknown[] | undefined =
+              args.readField('notes');
+            if (notesWithTag && 'length' in notesWithTag) {
+              return notesWithTag.length;
+            }
+            return 0;
+          },
+        },
+      },
+    },
     Query: {
       fields: {
         link(_, { args: { linkId }, toReference }) {

diff --git a/client/src/renderer/components/AddTagForm.tsx b/client/src/renderer/components/AddTagForm.tsx
@@ -11,25 +11,24 @@ import {
   AddTagByNameToNoteMutation,
   AddTagByNameToNoteMutationVariables,
   TagsQuery,
+  TagsWithCountsQuery,
 } from '../generated/graphql';
 import useIsOnline from '../hooks/useIsOnline';
 import makeMousetrapGlobal from '../utils/mousetrapGlobal';
-import { BASE_TAG_FRAGMENT } from '../utils/sharedQueriesAndFragments';
+import {
+  ADD_TAG_BY_NAME_TO_NOTE_MUTATION,
+  BASE_TAG_FRAGMENT,
+} from '../utils/sharedQueriesAndFragments';
 import { DisplayOnlyTag } from '../utils/types';
 import useDataState, { DataState } from '../utils/useDataState';
 import ErrorSnackbar from './ErrorSnackbar';
 import InlineTagForm from './InlineTagForm';
 
-export const ADD_TAG_MUTATION = gql`
-  mutation AddTagByNameToNote($noteId: ID!, $tagName: String!) {
-    addTagByNameToNote(noteId: $noteId, name: $tagName) {
-      ... on INote {
-        _id
-        updatedAt
-        tags {
-          ...BaseTag
-        }
-      }
+export const TAGS_WITH_COUNTS_QUERY = gql`
+  query TagsWithCounts {
+    tags {
+      ...BaseTag
+      noteCount @client
     }
   }
   ${BASE_TAG_FRAGMENT}
@@ -52,7 +51,7 @@ const AddTagForm = ({
   const [submittedTag, setSubmittedTag] = useState<string | null>(null);
 
   const tagsQuery = useDataState(
-    useQuery<TagsQuery>(TAGS_QUERY, {
+    useQuery<TagsWithCountsQuery>(TAGS_WITH_COUNTS_QUERY, {
       fetchPolicy: 'cache-only',
     })
   );

diff --git a/client/src/renderer/components/InlineTagForm.tsx b/client/src/renderer/components/InlineTagForm.tsx
@@ -1,18 +1,21 @@
-import { Autocomplete, TextField } from '@mui/material';
+import { Autocomplete, TextField, Typography } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 import React from 'react';
-import { TagsQuery } from '../generated/graphql';
+import { TagsWithCountsQuery } from '../generated/graphql';
 import Tag from './Tag';
 
-type TagType = TagsQuery['tags'][number];
+type TagType = TagsWithCountsQuery['tags'][number];
 type TagOrNewTagType = TagType | { newTagName: string; title: string };
 
 type InlineTagFormProps = {
-  tags: 'loading' | TagsQuery['tags'];
+  tags: 'loading' | Array<TagType>;
   onAddTag: (tagName: string) => void;
   onAbort: () => void;
 };
 
+const MAX_TAG_SUGGESTIONS = 20;
+const TAG_OVERFLOW = 'TAG_OVERFLOW';
+
 const InlineTagForm: React.FC<InlineTagFormProps> = ({
   onAddTag,
   onAbort,
@@ -53,9 +56,21 @@ const InlineTagForm: React.FC<InlineTagFormProps> = ({
           filterOptions={(options, params) => {
             const { inputValue } = params;
 
-            const filtered = matchSorter(options, inputValue, {
-              keys: ['name'],
-            });
+            let filtered: Array<TagOrNewTagType> = matchSorter(
+              options as Array<TagType>,
+              inputValue,
+              {
+                keys: [(tag) => tag.name.replace(/[:›>]/g, ' ')],
+                baseSort: ({ item: tagA }, { item: tagB }) =>
+                  Math.sign(tagB.noteCount - tagA.noteCount),
+              }
+            );
+
+            let hiddenCount = 0;
+            if (filtered.length > MAX_TAG_SUGGESTIONS) {
+              hiddenCount = filtered.length - MAX_TAG_SUGGESTIONS;
+              filtered = filtered.slice(0, MAX_TAG_SUGGESTIONS);
+            }
 
             // Suggest the creation of a new value
             const isExisting = options.some(
@@ -68,6 +83,13 @@ const InlineTagForm: React.FC<InlineTagFormProps> = ({
               });
             }
 
+            if (hiddenCount) {
+              filtered.push({
+                newTagName: TAG_OVERFLOW,
+                title: `${hiddenCount} more matches, refine your search`,
+              });
+            }
+
             return filtered;
           }}
           getOptionLabel={(option) => {
@@ -92,19 +114,29 @@ const InlineTagForm: React.FC<InlineTagFormProps> = ({
           renderOption={(props, tag) => {
             let tagElement;
             if ('newTagName' in tag) {
-              tagElement = (
-                <>
-                  <div style={{ marginRight: '0.5em' }}>Create&nbsp;tag</div>
-                  <Tag
-                    onClick={() => {}}
-                    tag={{
-                      _id: 'NEW_TAG',
-                      name: tag.newTagName,
-                      color: 'gray',
-                    }}
-                  />
-                </>
-              );
+              if (tag.newTagName === TAG_OVERFLOW) {
+                return (
+                  <li className={props.className} style={{ cursor: 'initial' }}>
+                    <Typography variant="caption" key={TAG_OVERFLOW}>
+                      {tag.title}
+                    </Typography>
+                  </li>
+                );
+              } else {
+                tagElement = (
+                  <>
+                    <div style={{ marginRight: '0.5em' }}>Create&nbsp;tag</div>
+                    <Tag
+                      onClick={() => {}}
+                      tag={{
+                        _id: 'NEW_TAG',
+                        name: tag.newTagName,
+                        color: 'gray',
+                      }}
+                    />
+                  </>
+                );
+              }
             } else {
               tagElement = <Tag onClick={() => {}} tag={tag} />;
             }

diff --git a/client/src/renderer/containers/NotesPage/NotesPage.tsx b/client/src/renderer/containers/NotesPage/NotesPage.tsx
@@ -40,6 +40,14 @@ export const NOTES_QUERY = gql`
   query NotesForList {
     notes {
       ...BaseNote
+
+      ... on INote {
+        tags {
+          _id
+          name
+          color
+        }
+      }
     }
   }
   ${BASE_NOTE_FRAGMENT}

diff --git a/client/src/renderer/utils/sharedQueriesAndFragments.ts b/client/src/renderer/utils/sharedQueriesAndFragments.ts
@@ -37,13 +37,12 @@ export const BASE_NOTE_FRAGMENT = gql`
 
       description
       tags {
-        ...BaseTag
+        _id
       }
     }
     ... on Link {
       url
       domain
     }
   }
-  ${BASE_TAG_FRAGMENT}
 `;