IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-07 22:53:56 -06:00
Code Issues Packages Projects Releases Wiki Activity

Flame graph: Search with uFuzzy (#61748)

Browse Source
This commit is contained in:
Joey Tawadrous 2023-01-20 12:57:31 +00:00 committed by GitHub
parent ce879ac8e1
commit e517cc0cea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
View File

@ -17,6 +17,7 @@
// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
// THIS SOFTWARE.
import { css } from '@emotion/css';
import uFuzzy from '@leeoniya/ufuzzy';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useMeasure } from 'react-use';
@ -107,6 +108,11 @@ const FlameGraph = ({
theme: createTheme() /* theme does not matter for us here */,
});
const ufuzzy = new uFuzzy({
intraMode: 0,
intraIns: 0,
});
for (let levelIndex = 0; levelIndex < levels.length; levelIndex++) {
const level = levels[levelIndex];
// Get all the dimensions of the rectangles for the level. We do this by level instead of per rectangle, because
@ -114,7 +120,7 @@ const FlameGraph = ({
const dimensions = getRectDimensionsForLevel(level, levelIndex, totalTicks, rangeMin, pixelsPerTick, processor);
for (const rect of dimensions) {
// Render each rectangle based on the computed dimensions
renderRect(ctx, rect, totalTicks, rangeMin, rangeMax, search, levelIndex, topLevelIndex);
renderRect(ctx, rect, totalTicks, rangeMin, rangeMax, search, levelIndex, topLevelIndex, ufuzzy);
}
}
},

6
public/app/plugins/panel/flamegraph/components/FlameGraph/rendering.ts
View File

@ -85,7 +85,8 @@ export function renderRect(
rangeMax: number,
query: string,
levelIndex: number,
topLevelIndex: number
topLevelIndex: number,
ufuzzy: uFuzzy
) {
if (rect.width < HIDE_THRESHOLD) {
return;
@ -100,7 +101,8 @@ export function renderRect(
const l = 65 + 7 * intensity;
const name = rect.label;
const queryResult = query && name.toLowerCase().includes(query.toLowerCase());
const idxs = ufuzzy.filter([name], query);
const queryResult = query && idxs.length > 0;
if (!rect.collapsed) {
ctx.stroke();