Terms in the body of a card from a concept should show the concept card when they hover

[jkomoros]

Cards that reference a concept by one of its alt titles are sometimes unclear which one they're referring to. There should be some way to see when looking at a card which concepts map to which words somehow.

One way is to make it so card-links in the info panel show the title alternate that matches the card.

Another way is to make the word cloud items that match the concepts show which card they come from.

Another way is to make the text of the body that matches be highlighted in a subtle color and when you hover over it shows a card preview. We'd have a highlightConceptsInHTML method that would be memoized, and take the HTML, and a map of concept normalized string to card ID, and a map of concept cards this card actively references. And then it would do something like originalNgramsForNormalizedString through the whole inner text of the card for the references it knows are in there, and then when it finds one, it would walk through the parsed HTML and replace the strings with a span (using innerHTML). Later, the spans would be simple little custom elements that, when hovered, emit a card-hovered event.

It would need to make sure that the display HTML was never read back and saved. The toContentEditable would have none of this processing done on it, and it would never be visible in HTML to an editor.

Originally tracked in #399 as a bonus item.

[jkomoros]

• [x] Hovering over items in the word cloud shows the concept card they come from
• [ ] Some way to toggle in the UI (for admins only?) whether to do the full fingerprint or not in word cloud, for debugging. Or maybe just a DEBUG constant that can be flipped. (It currently only shows terms literally on the card, which is different than what is actually compared to other cards,which includes synonyms)
• [x] Make sure that things like > are handled right
• [x] Make sure references inside of links work OK
• [x] Card highlights should navigate card when clicked
• [x] card highlights should catch the inside card-hovers and throw new ones as though they themselves were hovered (and navigations when that happens)
• [x] Highlighting that matches within a URL (e.g. cynefin model on cynefin model) breaks the rendering because it tries to highlight the URL. Exclude literal < and > from matches?
• [x] Ensure that highlighting only happens at word boundaries, and won't start within a word.
• [ ] Make it so that highlights that would fully contain a sub-element are highlighted e.g complex <strong>adaptive</strong> systems should be highlighted for complex adaptive systems. This is non trivial to make work...
• [x] card-links should catch any navigations coming from within themselves and navigate to their own url (is that possible?)
• [ ] Things got slower again when pushing this to production, and this will be an expensive thing to run. Verify the memoization is working correctly and it's not the thing slowing card saving down.
• [x] highlighting should not start in the middle of words (changing the regular expression machinery to select internal groups is a little more complex to do the replacements correctly and return the right result, actually it's not that hard if using the '$' string not a replacer function. I think I'm going to have to stop using regular expressions and walk the DOM directly to replace it. Do test for a thing that takes html and list of words and cardIDs. And don't replace inside of card-link or card-highlight.
• [ ] https://thecompendium.cards/c/everything/concept/concept-intrinsic-motivation highlights 'motivation is a force' for 'motive force' (which is unavoidable with stop word expansion and stemming), but doesn't highlight the later actual occurance of motive force. Is it just that only the first occurance is matched?
• [x] Make it so concept references do trigger a navigation like a card link (but are styled differently). card-link and card-highlight should suprress navigate-to-card and card-hovered that come from within them and instead pretend like they came from them.
• [x] Concepts that nest inside of one another, e.g. 'continuous' inside of 'discontinuous' get a double highlight (visible on http://localhost:8081/c/everything/concept/shock). This is only noticeable as a weird highlight where you get the wrong thing highlighted for part of the word.
• [x] On everything/concept/life-support, sub-linear is a concept on the card, but linear is highlighted instead. (Oh, it's because linear is going first and grabs it.)
• [x] Do the highlighting from big concepts down to small (but don't nest the small inside the large). For example, postmodernism concept card highlights modernism within metamodernism (this is another example of the bullet point immediately above)
• [x] Highlighting should render as an actual highlight that gets brighter when you hover (not as the text changing, but the background)
• [x] The card preview that shows up when you hover over a card-highlight should show a little message saying what the card is and how to navigate to it.
• [ ] on cards that mention e.g. systems, the fingerprint includes the card synonym 'agent' but it's not highlighted, because the card doesn't LITERALLY reference that precise card, so it's filtered out. Ideally we'd not filter out any cards where we link to a card that links to the other card as a synonym (ideally transitively)
• [x] If there's a card-highlight inside of a card-link, then the hover over the highlight will show a different card than would load if you clicked on it, which is a bit confusing.
• [x] Make sure basic card works right
• [ ] Make basic-card/screenshot service highlight concept references
• [x] In general, us-vs-them concept is coming through as us-vs? (tracked in #436)
• [ ] Test the highlighting in test:contenteditable (including things with stop words in between like force of gravity)
• [x] Make the highlighting be a type of card element that hovers the concept card.
• [ ] The general RE machinery for backing out the the original text might be able to be used in the word clouds (wasn't there somewhere that I wanted it?)

[jkomoros]

So you have a map of cardIDs that this card explicitly references as concepts. And you can reverse concept map, so you have a list of fully normalized ngrams for each conceptCardID. Then for your text field, you can use extractOriginalNgram to extract the text... minus punctuation. (Dang, that's really really hard to do, and breaks the rest of this). Then once you know the text string, you walk the DOM for the body, looking for innerText that contains that, and then setting innerHTML with the concept text wrapped in the special <span>. BUT, the string might not be in any single run within any single containing element.

So there are two challenges: one to figure out what the literal expanded, non-normalized string to select is, and two to find that string even if it crosses element boundaries. (The second would be OK to just skip)

We could construct a regular expression for a given expandedOriginalNgram that is resilient to extra punctuation or other normalization and then use that to replace those strings with the exact matched string, just wrapped in a <span card='ID>` or whatever.