Add optional label support for highlights with hover tooltip

package.json

@@ -114,6 +114,9 @@
             "toggleHighlight": {
               "type": "boolean"
             },
+            "toggleHighlightWithLabel": {
+              "type": "boolean"
+            },
             "unhighlight": {
               "type": "boolean"
             },
@@ -142,6 +145,7 @@
           "default": {
             "highlightUsingRegex": false,
             "toggleHighlight": true,
+            "toggleHighlightWithLabel": true,
             "unhighlight": false,
             "toggleCaseSensitivity": false,
             "toggleWholeMatch": false,
@@ -213,6 +217,11 @@
         "title": "Toggle Highlight",
         "category": "TextMarker"
       },
+      {
+        "command": "textmarker.toggleHighlightWithLabel",
+        "title": "Toggle Highlight with Label",
+        "category": "TextMarker"
+      },
       {
         "command": "textmarker.unhighlight",
         "title": "Unhighlight Text",
@@ -272,43 +281,48 @@
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.toggleHighlight"
         },
         {
-          "command": "textmarker.updateHighlight",
+          "command": "textmarker.toggleHighlightWithLabel",
           "group": "2_textmarker@2",
+          "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.toggleHighlightWithLabel"
+        },
+        {
+          "command": "textmarker.updateHighlight",
+          "group": "2_textmarker@3",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.updateHighlight"
         },
         {
           "command": "textmarker.goToNextHighlight",
-          "group": "2_textmarker@3",
+          "group": "2_textmarker@4",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.goToNextHighlight"
         },
         {
           "command": "textmarker.goToPreviousHighlight",
-          "group": "2_textmarker@4",
+          "group": "2_textmarker@5",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.goToPreviousHighlight"
         },
         {
           "command": "textmarker.highlightUsingRegex",
-          "group": "2_textmarker@5",
+          "group": "2_textmarker@6",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.highlightUsingRegex"
         },
         {
           "command": "textmarker.unhighlight",
-          "group": "2_textmarker@6",
+          "group": "2_textmarker@7",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.unhighlight"
         },
         {
           "command": "textmarker.toggleCaseSensitivity",
-          "group": "2_textmarker@7",
+          "group": "2_textmarker@8",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.toggleCaseSensitivity"
         },
         {
           "command": "textmarker.toggleWholeMatch",
-          "group": "2_textmarker@8",
+          "group": "2_textmarker@9",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.toggleWholeMatch"
         },
         {
           "command": "textmarker.clearAllHighlight",
-          "group": "2_textmarker@9",
+          "group": "2_textmarker@10",
           "when": "editorTextFocus && config.textmarker.commandsOnContextMenu.clearAllHighlight"
         },
         {

src/lib/app-integrator.ts

@@ -104,6 +104,10 @@ export default class AppIntegrator {
                 name: `${Const.EXTENSION_ID}.toggleHighlight`,
                 command: factory.createToggleHighlightCommand(),
                 type: 'TEXT_EDITOR'
+            }, {
+                name: `${Const.EXTENSION_ID}.toggleHighlightWithLabel`,
+                command: factory.createToggleHighlightWithLabelCommand(),
+                type: 'TEXT_EDITOR'
             }, {
                 name: `${Const.EXTENSION_ID}.updateHighlight`,
                 command: factory.createUpdateHighlightCommand(),

src/lib/command-factory.ts

@@ -15,6 +15,7 @@ import ToggleCaseSensitivityCommand from './commands/toggle-case-sensitivity';
 import ToggleCaseSensitivityModeButton from './statusbar-buttons/toggle-case-sensitivity-mode';
 import ToggleCaseSensitivityModeCommand from './commands/toggle-case-sensitivity-mode';
 import ToggleHighlightCommand from './commands/toggle-highlight';
+import ToggleHighlightWithLabelCommand from './commands/toggle-highlight-with-label';
 import ToggleWholeMatchCommand from './commands/toggle-whole-match';
 import ToggleWholeMatchModeButton from './statusbar-buttons/toggle-whole-match-mode';
 import ToggleWholeMatchModeCommand from './commands/toggle-whole-match-mode';
@@ -57,6 +58,10 @@ export default class CommandFactory {
         return new ToggleHighlightCommand(this.getMatchingModeRegistry(), this.getTextLocationRegistry(), this.getDecorationRegistry(), this.getDecorationTypeRegistry(), this.getWindowComponent());
     }
 
+    createToggleHighlightWithLabelCommand() {
+        return new ToggleHighlightWithLabelCommand(this.getMatchingModeRegistry(), this.getTextLocationRegistry(), this.getDecorationRegistry(), this.getDecorationTypeRegistry(), this.getWindowComponent());
+    }
+
     createHighlightUsingRegex() {
         return new HighlightUsingRegexCommand(this.getDecorationOperatorFactory(), this.getMatchingModeRegistry(), this.getWindowComponent());
     }

src/lib/commands/toggle-highlight-with-label.ts

@@ -0,0 +1,54 @@
+import DecorationOperatorFactory from '../decoration/decoration-operator-factory';
+import PatternFactory from '../pattern/pattern-factory';
+import TextLocationRegistry from '../text-location-registry';
+import TextEditor from '../vscode/text-editor';
+import {CommandLike} from '../vscode/vscode';
+import MatchingModeRegistry from '../matching-mode-registry';
+import DecorationRegistry from '../decoration/decoration-registry';
+import WindowComponent from '../vscode/window';
+import {DecorationTypeRegistry} from '../decoration/decoration-type-registry';
+import * as O from 'fp-ts/lib/Option';
+
+export default class ToggleHighlightWithLabelCommand implements CommandLike {
+    private readonly decorationOperatorFactory: DecorationOperatorFactory;
+    private readonly patternFactory: PatternFactory;
+    private readonly textLocationRegistry: TextLocationRegistry;
+    private readonly windowComponent: WindowComponent;
+
+    constructor(matchingModeRegistry: MatchingModeRegistry,
+                textLocationRegistry: TextLocationRegistry,
+                decorationRegistry: DecorationRegistry,
+                decorationTypeRegistry: DecorationTypeRegistry,
+                windowComponent: WindowComponent) {
+        this.decorationOperatorFactory = new DecorationOperatorFactory(decorationRegistry, decorationTypeRegistry, textLocationRegistry, windowComponent);
+        this.patternFactory = new PatternFactory(matchingModeRegistry);
+        this.textLocationRegistry = textLocationRegistry;
+        this.windowComponent = windowComponent;
+    }
+
+    async execute(textEditor: TextEditor) {
+        const existingId = this.textLocationRegistry.queryDecorationId(textEditor.id, textEditor.selection);
+        if (O.isSome(existingId)) {
+            const decorationOperator = this.decorationOperatorFactory.createForVisibleEditors();
+            decorationOperator.removeDecoration(existingId.value);
+            return;
+        }
+
+        await this.addDecorationWithLabel(textEditor);
+    }
+
+    private async addDecorationWithLabel(textEditor: TextEditor) {
+        if (!textEditor.selectedText) return;
+
+        const labelOption = await this.windowComponent.showInputBox({
+            prompt: 'Enter a label for this highlight',
+            placeHolder: 'e.g. transaction_id'
+        })();
+
+        if (O.isNone(labelOption)) return;
+
+        const pattern = this.patternFactory.create({phrase: textEditor.selectedText});
+        const decorationOperator = this.decorationOperatorFactory.createForVisibleEditors();
+        decorationOperator.addDecoration(pattern, undefined, labelOption.value);
+    }
+}

src/lib/decoration/decoration-entry-formatter.ts

@@ -6,7 +6,7 @@ export default class DecorationEntryFormatter {
 
     format(decoration: Decoration): Highlight {
         const pattern = decoration.pattern;
-        return {
+        const highlight: Highlight = {
             pattern: {
                 type: getExternalName(pattern.type)!,
                 expression: pattern.phrase,
@@ -15,6 +15,10 @@ export default class DecorationEntryFormatter {
             },
             color: decoration.colour
         };
+        if (decoration.label) {
+            highlight.label = decoration.label;
+        }
+        return highlight;
     }
 
 }

src/lib/decoration/decoration-operator.ts

@@ -19,9 +19,9 @@ export default class DecorationOperator {
         this.textDecorator = textDecorator;
     }
 
-    addDecoration(pattern: Pattern, colour?: string): void {
+    addDecoration(pattern: Pattern, colour?: string, label?: string): void {
         pipe(
-            this.decorationRegistry.issue(pattern, colour),
+            this.decorationRegistry.issue(pattern, colour, label),
             O.map(decoration => {
                 this.textDecorator.decorate(this.editors, [decoration]);
             })

src/lib/decoration/decoration-registry.ts

@@ -28,23 +28,23 @@ export default class DecorationRegistry {
         return this.map.find(isSamePattern);
     }
 
-    issue(pattern: Pattern, colour?: string): O.Option<Decoration> {
+    issue(pattern: Pattern, colour?: string, label?: string): O.Option<Decoration> {
         return pipe(
             this.inquireByPattern(pattern),
             O.fold(
-                () => O.some(this.setDecoration(this.createDecoration(pattern, colour))),
+                () => O.some(this.setDecoration(this.createDecoration(pattern, colour, label))),
                 () => O.none
             )
         );
     }
 
-    private createDecoration(pattern: Pattern, colour?: string): Decoration {
+    private createDecoration(pattern: Pattern, colour?: string, label?: string): Decoration {
         const id = this.generateUuid();
         if (colour) {
             this.colourRegistry.reserve(colour);
-            return new Decoration(id, pattern, colour);
+            return new Decoration(id, pattern, colour, label);
         } else {
-            return new Decoration(id, pattern, this.colourRegistry.issue());
+            return new Decoration(id, pattern, this.colourRegistry.issue(), label);
         }
     }
 

src/lib/decoration/decoration-variation-reader.ts

@@ -10,7 +10,8 @@ enum DecorationAction {
     TOGGLE_CASE_SENSITIVITY = 'toggle-case-sensitivity',
     TOGGLE_WHOLE_MATCH = 'toggle-whole-match',
     UPDATE_PHRASE = 'update-phrase',
-    UPDATE_COLOUR = 'update-colour'
+    UPDATE_COLOUR = 'update-colour',
+    UPDATE_LABEL = 'update-label'
 }
 
 interface DecorationUpdateActionQuickPickItem extends QuickPickItem {
@@ -56,6 +57,15 @@ export default class DecorationVariationReader {
                 const newPhraseOpt = this.windowComponent.showInputBox(options);
                 return getOptionM(task).map(newPhraseOpt, newColour => currentDecoration.withColour(newColour));
             }
+            case DecorationAction.UPDATE_LABEL: {
+                const options = {
+                    value: currentDecoration.label || '',
+                    prompt: 'Enter a label for this highlight.',
+                    placeHolder: 'e.g. transaction_id'
+                };
+                const newLabelOpt = this.windowComponent.showInputBox(options);
+                return getOptionM(task).map(newLabelOpt, newLabel => currentDecoration.withLabel(newLabel));
+            }
         }
     }
 
@@ -64,7 +74,8 @@ export default class DecorationVariationReader {
             this.getToggleCaseSensitivityOption(decoration),
             this.getToggleWholeMatchOption(decoration),
             this.getUpdatePhraseOption(decoration),
-            this.getUpdateColourOption(decoration)
+            this.getUpdateColourOption(decoration),
+            this.getUpdateLabelOption(decoration)
         ];
     }
 
@@ -98,4 +109,12 @@ export default class DecorationVariationReader {
             actionId: DecorationAction.UPDATE_COLOUR
         };
     }
+
+    private getUpdateLabelOption(decoration: Decoration) {
+        const current = decoration.label ? ` (current: ${decoration.label})` : '';
+        return {
+            label: `Update Label${current}`,
+            actionId: DecorationAction.UPDATE_LABEL
+        };
+    }
 }

src/lib/decoration/text-decorator.ts

@@ -45,7 +45,7 @@ export default class TextDecorator {
     private addDecoration(editor: TextEditor, decoration: Decoration): void {
         const ranges = decoration.pattern.locateIn(editor.wholeText);
         const decorationType = this.decorationTypeRegistry.provideFor(decoration);
-        editor.setDecorations(decorationType, ranges);
+        editor.setDecorations(decorationType, ranges, decoration.label);
         this.textLocationRegistry.register(editor.id, decoration.id, ranges);
     }
 }

src/lib/entities/decoration.ts

@@ -4,11 +4,15 @@ export class Decoration {
     public readonly id: string;
     public readonly pattern: Pattern;
     public readonly colour: string;
+    public readonly label?: string;
 
-    constructor(id: string, pattern: Pattern, colour: string) {
+    constructor(id: string, pattern: Pattern, colour: string, label?: string) {
         this.id = id;
         this.pattern = pattern;
         this.colour = colour;
+        if (label !== undefined) {
+            this.label = label;
+        }
     }
 
     withCaseSensitivityToggled(): Decoration {
@@ -24,10 +28,14 @@ export class Decoration {
     }
 
     private withPattern(newPattern: Pattern): Decoration {
-        return new Decoration(this.id, newPattern, this.colour);
+        return new Decoration(this.id, newPattern, this.colour, this.label);
     }
 
     withColour(colour: string): Decoration {
-        return new Decoration(this.id, this.pattern, colour);
+        return new Decoration(this.id, this.pattern, colour, this.label);
+    }
+
+    withLabel(label: string): Decoration {
+        return new Decoration(this.id, this.pattern, this.colour, label);
     }
 }

src/lib/entities/highlight.ts

@@ -12,4 +12,5 @@ export type Highlight = {
         wholeMatch: boolean;
     },
     color: string;
+    label?: string;
 };

src/lib/saved-highlights-restorer.ts

@@ -41,7 +41,7 @@ export default class SavedHighlightsRestorer {
     private addDecoration(decorationData: Highlight, decorationOperator: DecorationOperator) {
         const patternData = this.decorationEntryParser.getPattern(decorationData);
         const pattern = this.patternFactory.create(patternData);
-        decorationOperator.addDecoration(pattern, decorationData.color);
+        decorationOperator.addDecoration(pattern, decorationData.color, decorationData.label);
     }
 
 }

src/lib/vscode/text-editor.ts

@@ -1,5 +1,7 @@
 import SelectedTextFinder from './selected-text-finder';
 import {
+    DecorationOptions,
+    MarkdownString,
     Position,
     Range,
     Selection,
@@ -59,9 +61,15 @@ export default class TextEditor {
         return this.editor.document.positionAt(position);
     }
 
-    setDecorations(decorationType: TextEditorDecorationType, ranges: FlatRange[]) {
-        const vsRanges = ranges.map(range => this.getRange(range));
-        this.editor.setDecorations(decorationType, vsRanges);
+    setDecorations(decorationType: TextEditorDecorationType, ranges: FlatRange[], label?: string) {
+        const vsOptions: DecorationOptions[] = ranges.map(range => {
+            const opt: DecorationOptions = {range: this.getRange(range)};
+            if (label) {
+                opt.hoverMessage = new MarkdownString(`**${label}**`);
+            }
+            return opt;
+        });
+        this.editor.setDecorations(decorationType, vsOptions);
     }
 
     unsetDecorations(decorationType: TextEditorDecorationType) {