@parca/profile 0.16.449 → 0.16.451

package/dist/ProfileView/context/DashboardContext.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { createContext, useContext } from 'react';
+import { useURLState } from '@parca/components';
+const DashboardContext = createContext(undefined);
+export const DashboardProvider = ({ children }) => {
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const handleClosePanel = (visualizationType) => {
+        const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
+        setDashboardItems(newDashboardItems);
+    };
+    const isMultiPanelView = dashboardItems.length > 1;
+    return (_jsx(DashboardContext.Provider, { value: {
+            dashboardItems,
+            setDashboardItems,
+            handleClosePanel,
+            isMultiPanelView,
+        }, children: children }));
+};
+export const useDashboard = () => {
+    const context = useContext(DashboardContext);
+    if (context === undefined) {
+        throw new Error('useDashboard must be used within a DashboardProvider');
+    }
+    return context;
+};

package/dist/ProfileView/{ProfileViewContext.d.ts → context/ProfileViewContext.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ProfileSource } from '../ProfileSource';
+import { ProfileSource } from '../../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
     compareMode: boolean;

package/dist/ProfileView/context/ProfileViewContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileViewContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/ProfileViewContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,QAAA,MAAM,kBAAkB,gCAAqC,CAAC;AAE9D,eAAO,MAAM,0BAA0B,yBAGpC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAO,KAMxC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/hooks/useGraphviz.d.ts

@@ -0,0 +1,12 @@
+import { Callgraph as CallgraphType } from '@parca/client';
+interface UseGraphvizProps {
+    callgraphData?: CallgraphType;
+    width?: number;
+    colorRange: [string, string];
+}
+export declare const useGraphviz: ({ callgraphData, width, colorRange, }: UseGraphvizProps) => {
+    graphvizLoaded: boolean;
+    callgraphSVG: string | undefined;
+};
+export {};
+//# sourceMappingURL=useGraphviz.d.ts.map

package/dist/ProfileView/hooks/useGraphviz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphviz.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useGraphviz.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,eAAe,CAAC;AAIzD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,KAAG;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAmClC,CAAC"}

package/dist/ProfileView/hooks/useGraphviz.js

@@ -0,0 +1,42 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useState } from 'react';
+import graphviz from 'graphviz-wasm';
+import { jsonToDot } from '../../Callgraph/utils';
+export const useGraphviz = ({ callgraphData, width, colorRange, }) => {
+    const [graphvizLoaded, setGraphvizLoaded] = useState(false);
+    const [callgraphSVG, setCallgraphSVG] = useState(undefined);
+    useEffect(() => {
+        async function loadGraphviz() {
+            await graphviz.loadWASM();
+            setGraphvizLoaded(true);
+        }
+        void loadGraphviz();
+    }, []);
+    useEffect(() => {
+        async function loadCallgraphSVG(graph, width, colorRange) {
+            await setCallgraphSVG(undefined);
+            const dataAsDot = await jsonToDot({
+                graph,
+                width,
+                colorRange,
+            });
+            const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
+            await setCallgraphSVG(svgGraph);
+        }
+        if (graphvizLoaded && callgraphData != null && width != null) {
+            void loadCallgraphSVG(callgraphData, width, colorRange);
+        }
+    }, [graphvizLoaded, callgraphData, width, colorRange]);
+    return { graphvizLoaded, callgraphSVG };
+};

package/dist/ProfileView/hooks/useProfileMetadata.d.ts

@@ -0,0 +1,17 @@
+import { Table as ArrowTable } from 'apache-arrow';
+import { FlamegraphArrow } from '@parca/client';
+interface UseProfileMetadataProps {
+    flamegraphArrow?: FlamegraphArrow;
+    metadataMappingFiles?: string[];
+    metadataLoading: boolean;
+    colorBy: string;
+}
+export declare const useProfileMetadata: ({ flamegraphArrow, metadataMappingFiles, metadataLoading, colorBy, }: UseProfileMetadataProps) => {
+    table: ArrowTable<any> | null;
+    mappingsList: string[];
+    filenamesList: string[];
+    colorMappings: string[];
+    metadataLoading: boolean;
+};
+export {};
+//# sourceMappingURL=useProfileMetadata.d.ts.map

package/dist/ProfileView/hooks/useProfileMetadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProfileMetadata.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useProfileMetadata.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,IAAI,UAAU,EAAe,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAM9C,UAAU,uBAAuB;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,yEAK5B,uBAAuB,KAAG;IAC3B,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;CAkB1B,CAAC"}

package/dist/ProfileView/hooks/useProfileMetadata.js

@@ -0,0 +1,30 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useMemo } from 'react';
+import { tableFromIPC } from 'apache-arrow';
+import useMappingList, { useFilenamesList, } from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+export const useProfileMetadata = ({ flamegraphArrow, metadataMappingFiles, metadataLoading, colorBy, }) => {
+    const table = useMemo(() => {
+        return flamegraphArrow !== undefined ? tableFromIPC(flamegraphArrow.record) : null;
+    }, [flamegraphArrow]);
+    const mappingsList = useMappingList(metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
+    const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+    return {
+        table,
+        mappingsList,
+        filenamesList,
+        colorMappings,
+        metadataLoading,
+    };
+};

package/dist/ProfileView/hooks/useVisualizationState.d.ts

@@ -0,0 +1,14 @@
+export declare const useVisualizationState: () => {
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    currentSearchString: string | undefined;
+    setSearchString: (searchString: string | undefined) => void;
+    colorStackLegend: string | undefined;
+    colorBy: string;
+    groupBy: string[];
+    setGroupBy: (keys: string[]) => void;
+    toggleGroupBy: (key: string) => void;
+    clearSelection: () => void;
+    setGroupByLabels: (labels: string[]) => void;
+};
+//# sourceMappingURL=useVisualizationState.d.ts.map

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAmD9C,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -0,0 +1,52 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useCallback, useState } from 'react';
+import { useURLState } from '@parca/components';
+import { FIELD_FUNCTION_NAME, FIELD_LABELS } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+export const useVisualizationState = () => {
+    const [curPath, setCurPath] = useState([]);
+    const [currentSearchString, setSearchString] = useURLState('search_string');
+    const [colorStackLegend] = useURLState('color_stack_legend');
+    const [colorBy] = useURLState('color_by');
+    const [groupBy, setStoreGroupBy] = useURLState('group_by', {
+        defaultValue: [FIELD_FUNCTION_NAME],
+        alwaysReturnArray: true,
+    });
+    const setGroupBy = useCallback((keys) => {
+        setStoreGroupBy(keys);
+    }, [setStoreGroupBy]);
+    const toggleGroupBy = useCallback((key) => {
+        groupBy.includes(key)
+            ? setGroupBy(groupBy.filter(v => v !== key)) // remove
+            : setGroupBy([...groupBy, key]); // add
+    }, [groupBy, setGroupBy]);
+    const setGroupByLabels = useCallback((labels) => {
+        setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+    }, [groupBy, setGroupBy]);
+    const clearSelection = useCallback(() => {
+        setSearchString?.('');
+    }, [setSearchString]);
+    return {
+        curPath,
+        setCurPath,
+        currentSearchString,
+        setSearchString,
+        colorStackLegend,
+        colorBy: colorBy ?? '',
+        groupBy,
+        setGroupBy,
+        toggleGroupBy,
+        setGroupByLabels,
+        clearSelection,
+    };
+};

package/dist/ProfileView/index.d.ts

@@ -1,50 +1,3 @@
-import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
-import { ProfileSource } from '../ProfileSource';
-export interface FlamegraphData {
-    loading: boolean;
-    data?: Flamegraph;
-    arrow?: FlamegraphArrow;
-    total?: bigint;
-    filtered?: bigint;
-    error?: any;
-    metadataMappingFiles?: string[];
-    metadataLoading: boolean;
-    metadataLabels?: string[];
-}
-export interface TopTableData {
-    loading: boolean;
-    arrow?: TableArrow;
-    data?: Top;
-    total?: bigint;
-    filtered?: bigint;
-    error?: any;
-    unit?: string;
-}
-interface CallgraphData {
-    loading: boolean;
-    data?: CallgraphType;
-    total?: bigint;
-    filtered?: bigint;
-    error?: any;
-}
-interface SourceData {
-    loading: boolean;
-    data?: Source;
-    error?: any;
-}
-export interface ProfileViewProps {
-    total: bigint;
-    filtered: bigint;
-    flamegraphData: FlamegraphData;
-    topTableData?: TopTableData;
-    callgraphData?: CallgraphData;
-    sourceData?: SourceData;
-    profileSource?: ProfileSource;
-    queryClient?: QueryServiceClient;
-    compare?: boolean;
-    onDownloadPProf: () => void;
-    pprofDownloading?: boolean;
-}
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
-export {};
+import type { ProfileViewProps } from './types/visualization';
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }: ProfileViewProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAavB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAW/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OAuXzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG/E,eAAO,MAAM,WAAW,qLAarB,gBAAgB,KAAG,GAAG,CAAC,OAwIzB,CAAC"}

package/dist/ProfileView/index.js

@@ -1,5 +1,4 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,183 +11,65 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Profiler, useCallback, useEffect, useMemo, useState } from 'react';
-import { tableFromIPC } from 'apache-arrow';
-import cx from 'classnames';
-import { scaleLinear } from 'd3';
-import graphviz from 'graphviz-wasm';
-import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
-import { ConditionalWrapper, KeyDownProvider, useParcaContext, useURLState } from '@parca/components';
+import { KeyDownProvider, useParcaContext } from '@parca/components';
 import { useContainerDimensions } from '@parca/hooks';
 import { selectDarkMode, useAppSelector } from '@parca/store';
-import { getNewSpanColor, selectQueryParam } from '@parca/utilities';
-import { Callgraph } from '../';
-import { jsonToDot } from '../Callgraph/utils';
-import ProfileIcicleGraph from '../ProfileIcicleGraph';
-import { FIELD_FUNCTION_NAME } from '../ProfileIcicleGraph/IcicleGraphArrow';
-import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
-import { SourceView } from '../SourceView';
-import { Table } from '../Table';
-import VisualisationToolbar, { IcicleGraphToolbar, TableToolbar, } from '../components/VisualisationToolbar';
-import ColorStackLegend from './ColorStackLegend';
-import { ProfileViewContextProvider } from './ProfileViewContext';
-import { VisualizationPanel } from './VisualizationPanel';
-function arrayEquals(a, b) {
-    return (Array.isArray(a) &&
-        Array.isArray(b) &&
-        a.length === b.length &&
-        a.every((val, index) => val === b[index]));
-}
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, }) => {
-    const { timezone } = useParcaContext();
+import { selectQueryParam } from '@parca/utilities';
+import ColorStackLegend from './components/ColorStackLegend';
+import { getDashboardItem } from './components/DashboardItems';
+import { DashboardLayout } from './components/DashboardLayout';
+import { ProfileHeader } from './components/ProfileHeader';
+import { IcicleGraphToolbar, TableToolbar, VisualisationToolbar } from './components/Toolbars';
+import { DashboardProvider } from './context/DashboardContext';
+import { ProfileViewContextProvider } from './context/ProfileViewContext';
+import { useGraphviz } from './hooks/useGraphviz';
+import { useProfileMetadata } from './hooks/useProfileMetadata';
+import { useVisualizationState } from './hooks/useVisualizationState';
+import { getColorRange } from './utils/colorUtils';
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
+    const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
-    const [curPath, setCurPath] = useState([]);
-    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
+    const isDarkMode = useAppSelector(selectDarkMode);
+    const colorRange = getColorRange(isDarkMode);
+    const { curPath, setCurPath, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, } = useVisualizationState();
+    const { callgraphSVG } = useGraphviz({
+        callgraphData: callgraphData?.data,
+        width: dimensions?.width,
+        colorRange,
+    });
+    const { colorMappings } = useProfileMetadata({
+        flamegraphArrow: flamegraphData.arrow,
+        metadataMappingFiles: flamegraphData.metadataMappingFiles,
+        metadataLoading: flamegraphData.metadataLoading,
+        colorBy,
     });
-    const [graphvizLoaded, setGraphvizLoaded] = useState(false);
-    const [callgraphSVG, setCallgraphSVG] = useState(undefined);
-    const [currentSearchString, setSearchString] = useURLState('search_string');
-    const [colorStackLegend] = useURLState('color_stack_legend');
-    const [colorBy] = useURLState('color_by');
     const isColorStackLegendEnabled = colorStackLegend === 'true';
-    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const isMultiPanelView = dashboardItems.length > 1;
-    const table = useMemo(() => {
-        return flamegraphData.arrow !== undefined ? tableFromIPC(flamegraphData.arrow.record) : null;
-    }, [flamegraphData.arrow]);
-    const mappingsList = useMappingList(flamegraphData.metadataMappingFiles);
-    const filenamesList = useFilenamesList(table);
-    const { perf, profileViewExternalMainActions } = useParcaContext();
-    useEffect(() => {
-        // Reset the current path when the profile source changes
-        setCurPath([]);
-    }, [profileSource]);
-    useEffect(() => {
-        async function loadGraphviz() {
-            await graphviz.loadWASM();
-            setGraphvizLoaded(true);
-        }
-        void loadGraphviz();
-    }, []);
-    const maxColor = getNewSpanColor(isDarkMode);
-    const minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
-    const colorRange = [minColor, maxColor];
-    // Note: If we want to further optimize the experience, we could try to load the graphviz layout in the ProfileViewWithData layer
-    // and pass it down to the ProfileView. This would allow us to load the layout in parallel with the flamegraph data.
-    // However, the layout calculation is dependent on the width and color range of the graph container, which is why it is done at this level
-    useEffect(() => {
-        async function loadCallgraphSVG(graph, width, colorRange) {
-            await setCallgraphSVG(undefined);
-            // Translate JSON to 'dot' graph string
-            const dataAsDot = await jsonToDot({
-                graph,
-                width,
-                colorRange,
-            });
-            // Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
-            const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
-            await setCallgraphSVG(svgGraph);
-        }
-        if (graphvizLoaded &&
-            callgraphData?.data !== null &&
-            callgraphData?.data !== undefined &&
-            dimensions?.width !== undefined) {
-            void loadCallgraphSVG(callgraphData?.data, dimensions?.width, colorRange);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [graphvizLoaded, callgraphData?.data]);
-    const setNewCurPath = (path) => {
-        if (!arrayEquals(curPath, path)) {
-            setCurPath(path);
-        }
-    };
-    const getDashboardItemByType = ({ type, isHalfScreen, }) => {
-        switch (type) {
-            case 'icicle': {
-                return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
-                        id: 'icicleGraph',
-                        onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
-                            ? isHalfScreen
-                                ? (dimensions.width - 54) / 2
-                                : dimensions.width - 16
-                            : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
-            }
-            case 'callgraph': {
-                return callgraphData?.data !== undefined &&
-                    callgraphSVG !== undefined &&
-                    dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, profileType: profileSource?.ProfileType(), width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
-            }
-            case 'table': {
-                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
-            }
-            case 'source': {
-                return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered })) : (_jsx(_Fragment, {}));
-            }
-            default: {
-                return _jsx(_Fragment, {});
-            }
-        }
-    };
-    const handleClosePanel = (visualizationType) => {
-        const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
-        setDashboardItems(newDashboardItems);
-    };
-    const onDragEnd = (result) => {
-        const { destination, source, draggableId } = result;
-        if (Boolean(destination) && destination?.index !== source.index) {
-            const targetItem = draggableId;
-            const otherItems = dashboardItems.filter(item => item !== targetItem);
-            const newDashboardItems = destination.index < source.index
-                ? [targetItem, ...otherItems]
-                : [...otherItems, targetItem];
-            setDashboardItems(newDashboardItems);
-        }
-    };
-    // TODO: this is just a placeholder, we need to replace with an actually informative and accurate title (cc @metalmatze)
-    const profileSourceString = profileSource?.toString(timezone);
-    const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
-    const headerParts = profileSourceString?.split('"') ?? [];
     const compareMode = compare === true ||
         (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
-    const [groupBy, setStoreGroupBy] = useURLState('group_by', {
-        defaultValue: [FIELD_FUNCTION_NAME],
-        alwaysReturnArray: true,
-    });
-    const setGroupBy = useCallback((keys) => {
-        setStoreGroupBy(keys);
-    }, [setStoreGroupBy]);
-    const toggleGroupBy = useCallback((key) => {
-        groupBy.includes(key)
-            ? setGroupBy(groupBy.filter(v => v !== key)) // remove
-            : setGroupBy([...groupBy, key]); // add
-    }, [groupBy, setGroupBy]);
-    const showDivider = hasProfileSource &&
-        (profileViewExternalMainActions === null || profileViewExternalMainActions === undefined);
-    const clearSelection = useCallback(() => {
-        setSearchString?.('');
-    }, [setSearchString]);
-    const getActionButtonsWithMultiPanelView = () => {
-        return {
-            icicle: _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath }),
-            table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
-        };
+    const getDashboardItemByType = ({ type, isHalfScreen, }) => {
+        return getDashboardItem({
+            type,
+            isHalfScreen,
+            dimensions,
+            flamegraphData,
+            topTableData,
+            callgraphData,
+            sourceData,
+            profileSource,
+            total,
+            filtered,
+            curPath,
+            setNewCurPath: setCurPath,
+            currentSearchString,
+            setSearchString,
+            callgraphSVG,
+            perf,
+        });
+    };
+    const actionButtons = {
+        icicle: _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setCurPath }),
+        table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
     };
-    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: [showDivider ? (_jsx(_Fragment, { children: _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }) })) : null, _jsx("div", { className: cx('flex w-full', hasProfileSource || profileViewExternalMainActions != null
-                        ? 'justify-start'
-                        : 'justify-end', {
-                        'items-end mb-4': !hasProfileSource && profileViewExternalMainActions != null,
-                        'items-center mb-2': hasProfileSource,
-                    }), children: _jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "text-xs font-medium", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs font-medium", children: headerParts.length > 1
-                                            ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                            : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }) }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, isMultiPanelView: isMultiPanelView, dashboardItems: dashboardItems, curPath: curPath, setNewCurPath: setNewCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [] }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorByValue === 'binary' ? mappingsList : filenamesList, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
-                                    return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('w-full min-h-96', snapshot.isDragging
-                                                ? 'bg-gray-200 dark:bg-gray-500'
-                                                : 'bg-white dark:bg-gray-900', isMultiPanelView
-                                                ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3'
-                                                : '') },
-                                            _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, index: index, actionButtons: getActionButtonsWithMultiPanelView() }))) }, dashboardItem));
-                                }) })) }) }) })] }) }));
+    const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
+    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPath, setNewCurPath: setCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
 };

package/dist/ProfileView/types/visualization.d.ts

@@ -0,0 +1,49 @@
+import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow } from '@parca/client';
+import { ProfileSource } from '../../ProfileSource';
+export interface FlamegraphData {
+    loading: boolean;
+    data?: Flamegraph;
+    arrow?: FlamegraphArrow;
+    total?: bigint;
+    filtered?: bigint;
+    error?: any;
+    metadataMappingFiles?: string[];
+    metadataLoading: boolean;
+    metadataLabels?: string[];
+}
+export interface TopTableData {
+    loading: boolean;
+    arrow?: TableArrow;
+    total?: bigint;
+    filtered?: bigint;
+    error?: any;
+    unit?: string;
+}
+export interface CallgraphData {
+    loading: boolean;
+    data?: CallgraphType;
+    total?: bigint;
+    filtered?: bigint;
+    error?: any;
+}
+export interface SourceData {
+    loading: boolean;
+    data?: Source;
+    error?: any;
+}
+export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source';
+export interface ProfileViewProps {
+    total: bigint;
+    filtered: bigint;
+    flamegraphData: FlamegraphData;
+    topTableData?: TopTableData;
+    callgraphData?: CallgraphData;
+    sourceData?: SourceData;
+    profileSource?: ProfileSource;
+    queryClient?: QueryServiceClient;
+    compare?: boolean;
+    onDownloadPProf: () => void;
+    pprofDownloading?: boolean;
+    showVisualizationSelector?: boolean;
+}
+//# sourceMappingURL=visualization.d.ts.map

package/dist/ProfileView/types/visualization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}

package/dist/ProfileView/types/visualization.js

@@ -0,0 +1,13 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export {};

package/dist/ProfileView/utils/colorUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const getColorRange: (isDarkMode: boolean) => [string, string];
+export declare const getNewSpanColor: (isDarkMode: boolean) => string;
+//# sourceMappingURL=colorUtils.d.ts.map

package/dist/ProfileView/utils/colorUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/utils/colorUtils.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,eAAgB,OAAO,KAAG,CAAC,MAAM,EAAE,MAAM,CAIlE,CAAC;AAEF,eAAO,MAAM,eAAe,eAAgB,OAAO,KAAG,MAErD,CAAC"}