IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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 // TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
// THIS SOFTWARE. // THIS SOFTWARE.
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import uFuzzy from '@leeoniya/ufuzzy';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useMeasure } from 'react-use'; import { useMeasure } from 'react-use';
@ -107,6 +108,11 @@ const FlameGraph = ({
theme: createTheme() /* theme does not matter for us here */, 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++) { for (let levelIndex = 0; levelIndex < levels.length; levelIndex++) {
const level = levels[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 // 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); const dimensions = getRectDimensionsForLevel(level, levelIndex, totalTicks, rangeMin, pixelsPerTick, processor);
for (const rect of dimensions) { for (const rect of dimensions) {
// Render each rectangle based on the computed 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, rangeMax: number,
query: string, query: string,
levelIndex: number, levelIndex: number,
topLevelIndex: number topLevelIndex: number,
ufuzzy: uFuzzy
) { ) {
if (rect.width < HIDE_THRESHOLD) { if (rect.width < HIDE_THRESHOLD) {
return; return;
@ -100,7 +101,8 @@ export function renderRect(
const l = 65 + 7 * intensity; const l = 65 + 7 * intensity;
const name = rect.label; 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) { if (!rect.collapsed) {
ctx.stroke(); ctx.stroke();