Code Monkey home page Code Monkey logo

Comments (5)

Nexucis avatar Nexucis commented on May 26, 2024

should fix the issue raised in the PR #18 regarding the problem of escaping the html characters.

from codemirror-promql.

Nexucis avatar Nexucis commented on May 26, 2024

fuse.js is a bit weird of how it is matching the element. From my test, the string su is matching group .
It's not really a big issue, this lib is a bit more permissive than the other one.

from codemirror-promql.

Nexucis avatar Nexucis commented on May 26, 2024

image

Looks like the algo is testing every possible combination.

Another example:
image

Not sure we want that after all. Or maybe there is an option to avoid that, but so far I didn't find it. Any thoughts on this @juliusv ?

In case someone find how to do a better matching and want to fix the issue, here is the filter method I coded for this purpose:

const fuzzyOption = {
  includeScore: true,
  includeMatches: true,
  findAllMatches: false,
};

export class HybridComplete implements CompleteStrategy {
  private filter(
    label: string,
    text: string,
    apply: string | ((view: EditorView, result: CompletionResult, completion: Completion) => void),
    context: AutocompleteContext,
    type?: string
  ): Completion | null {
    if (context.filterType !== FilterType.Fuzzy) {
      // in case the fuzzy filtering is not used, then use the filter method coming from CMN
      let score: number | null;
      if ((score = context.filter(label, text, false))) {
        return { label: escape(label), apply: apply, type: type, score: score };
      }
    }

    const fuse = new Fuse([label], fuzzyOption);
    const result = fuse.search(text);
    if (!result || result.length === 0) {
      return null;
    }

    const matches = result[0].matches;
    if (!matches) {
      // weird case, shouldn't happen regarding the fuzzy option set
      return null;
    }
    // in case fuzzyPre and fuzzyPost option are not set, then there is nothing to do to highlight the string matched
    if (this.fuzzyPre.length === 0 || this.fuzzyPost.length === 0) {
      return { label: escape(label), apply: apply, type: type, score: result[0].score || 0 };
    }
    // otherwise we have to loop other the different match item and replace it one by one
    if (matches.length > 1) {
      // for the moment no idea what do to when there is multiple matches
      // so far, when playing with the lib, it always returns one result for an array of string
      return null;
    }

    let finalLabel = label;
    let shift = 0;
    let startIndex = 0;
    let endIndex = 0;
    for (const idx of matches[0].indices) {
      // move to the next substring matched
      startIndex = shift + idx[0];
      endIndex = startIndex + idx[1] - idx[0];

      let sub = label.substr(idx[0], idx[1] - idx[0] + 1);
      sub = this.fuzzyPre + escape(sub) + this.fuzzyPost;
      finalLabel = finalLabel.substring(0, startIndex) + sub + finalLabel.substring(endIndex + 1);

      shift = shift + sub.length - label.substr(idx[0], idx[1] - idx[0] + 1).length;
    }
    return { label: finalLabel, apply: apply, type: type, score: result[0].score ? 1 - result[0].score : 0 };
  }
}

Note: it's not finished. The only thing remains is to escape the substring between two substring that should be highlighted

from codemirror-promql.

juliusv avatar juliusv commented on May 26, 2024

Hm yeah, I didn't find an option (immediately) to turn off that over-zealous matching either. We definitely don't want that, I think. Otherwise an approach like this could be interesting.

from codemirror-promql.

Nexucis avatar Nexucis commented on May 26, 2024

lib will be replaced by https://github.com/Nexucis/fuzzy instead

from codemirror-promql.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.