From 779c0ab60c2f876016ac7958eab7ada6eed54dbf Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Thu, 25 Jul 2024 13:37:52 +0200 Subject: [PATCH 01/10] Implement new design for navbar --- .../app/web/src/components/ui/Navbar.tsx | 174 +++++++++--------- 1 file changed, 86 insertions(+), 88 deletions(-) diff --git a/ui/packages/app/web/src/components/ui/Navbar.tsx b/ui/packages/app/web/src/components/ui/Navbar.tsx index 3eec904473d..f5ca55c9dd8 100644 --- a/ui/packages/app/web/src/components/ui/Navbar.tsx +++ b/ui/packages/app/web/src/components/ui/Navbar.tsx @@ -32,6 +32,7 @@ const links: {[path: string]: {label: string; href: string; external: boolean}} '/': {label: 'Explorer', href: `/`, external: false}, '/compare': {label: 'Compare', href: 'compare', external: false}, '/targets': {label: 'Targets', href: `/targets`, external: false}, + '/settings': {label: 'Settings', href: `/settings`, external: false}, '/help': {label: 'Help', href: 'https://parca.dev/docs/overview', external: true}, }; @@ -124,7 +125,10 @@ const Navbar = () => { }; return ( - + {({open}) => ( <>
@@ -158,92 +162,90 @@ const Navbar = () => {
-
- -
+
+ )} +
+ ) : item.external === true ? ( + + {item.label} + + ) : ( + + {item.label} + + ); + })} + @@ -254,11 +256,7 @@ const Navbar = () => {
-
- - GitHub - -
+
From 8a9563e8e1149d92e2a9e0994192ade69af78ce2 Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Thu, 25 Jul 2024 21:40:25 +0200 Subject: [PATCH 02/10] Settings page in progress --- ui/packages/app/web/src/App.tsx | 16 ++-- .../app/web/src/components/ui/Navbar.tsx | 2 +- ui/packages/app/web/src/pages/index.tsx | 12 +-- ui/packages/app/web/src/pages/settings.tsx | 29 +++++++ .../src/DateTimeRangePicker/index.tsx | 2 +- .../components/src/ParcaContext/index.tsx | 2 +- .../FlamegraphColorProfileSelector.tsx | 4 +- .../UserPreferences/UserPreferenceItem.tsx | 76 ++++++++++++++----- .../components/src/UserPreferences/index.tsx | 67 +++++----------- .../hooks/src/useUserPreference/index.ts | 13 +++- .../ProfileExplorer/ProfileExplorerSingle.tsx | 34 ++++----- .../profile/src/ProfileSelector/index.tsx | 14 ++-- 12 files changed, 159 insertions(+), 112 deletions(-) create mode 100644 ui/packages/app/web/src/pages/settings.tsx diff --git a/ui/packages/app/web/src/App.tsx b/ui/packages/app/web/src/App.tsx index 2ea5d08d01e..f9482fa2ad6 100644 --- a/ui/packages/app/web/src/App.tsx +++ b/ui/packages/app/web/src/App.tsx @@ -33,6 +33,7 @@ import HomePage from './pages/index'; import Component404 from './pages/layouts/Component404'; import Header from './pages/layouts/Header'; import ThemeProvider from './pages/layouts/ThemeProvider'; +import SettingsPage from './pages/settings'; import TargetsPage from './pages/targets'; declare global { @@ -70,14 +71,13 @@ const App = () => {
-
- - } /> - } /> - } /> - } /> - -
+ + } /> + } /> + } /> + } /> + } /> + diff --git a/ui/packages/app/web/src/components/ui/Navbar.tsx b/ui/packages/app/web/src/components/ui/Navbar.tsx index f5ca55c9dd8..68061613d2c 100644 --- a/ui/packages/app/web/src/components/ui/Navbar.tsx +++ b/ui/packages/app/web/src/components/ui/Navbar.tsx @@ -127,7 +127,7 @@ const Navbar = () => { return ( {({open}) => ( <> diff --git a/ui/packages/app/web/src/pages/index.tsx b/ui/packages/app/web/src/pages/index.tsx index 9229a84c422..d1aa33208d6 100644 --- a/ui/packages/app/web/src/pages/index.tsx +++ b/ui/packages/app/web/src/pages/index.tsx @@ -58,11 +58,13 @@ const Profiles = () => { isDarkMode, }} > - +
+ +
); }; diff --git a/ui/packages/app/web/src/pages/settings.tsx b/ui/packages/app/web/src/pages/settings.tsx new file mode 100644 index 00000000000..f462c8ab8f7 --- /dev/null +++ b/ui/packages/app/web/src/pages/settings.tsx @@ -0,0 +1,29 @@ +// 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 {UserPreferences} from '@parca/components'; + +const SettingsPage = () => { + return ( +
+
+

Visualisation Setttings

+
+ +
+
+
+ ); +}; + +export default SettingsPage; diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx index ba2dd4f9b51..f28950f4da8 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx @@ -39,7 +39,7 @@ const DateTimeRangePicker = ({onRangeSelection, range}: DateTimeRangePickerProps return ( -
+
, noDataPrompt: , profileExplorer: { - PaddingX: 58, + PaddingX: 32, metricsGraph: { maxHeightStyle: { default: 'calc(47vw - 24px)', diff --git a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx index a0e9baafdaf..2b031932861 100644 --- a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx +++ b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx @@ -33,7 +33,7 @@ const FlamegraphColorProfileSelector = (): JSX.Element => { return (
- Flamegraph Color Profile + Iciclegraph color profile
{(Object.keys(colorProfiles) as ColorProfileName[]).map(profile => { const isSelected = profile === colorProfileName; @@ -60,7 +60,7 @@ const FlamegraphColorProfileSelector = (): JSX.Element => { /> {displayName} -
+
{colorProfiles[profile].colors.map((color: ColorsDuo) => (
({ +// userPreferenceDetails, +// className = '', +// labelToLeft = false, +// disabled = false, +// inputSuffix = '', +// id = '', +// }: UserPreferenceItemProps): JSX.Element { +// const [enabledTrimming, setEnabledTrimming] = useUserPreference(userPreferenceDetails.key); + +// return ( +//
+// {labelToLeft ? ( +// +// ) : null} +// +// {inputSuffix.length > 0 ? {inputSuffix} : null} +// {!labelToLeft ? ( +// +// ) : null} +//
+// ); +// } + function UserPreferenceItem({ userPreferenceDetails, className = '', - labelToLeft = false, disabled = false, - inputSuffix = '', id = '', }: UserPreferenceItemProps): JSX.Element { - const [enabledTrimming, setEnabledTrimming] = useUserPreference(userPreferenceDetails.key); + const [enabledPreference, setEnabledPreference] = useUserPreference(userPreferenceDetails.key); return (
- {labelToLeft ? ( - - ) : null} - - {inputSuffix.length > 0 ? {inputSuffix} : null} - {!labelToLeft ? ( - - ) : null} +
+
+

{userPreferenceDetails.name}

+

{userPreferenceDetails.description}

+
+ setEnabledPreference(checked as T)} + className={`${(enabledPreference as boolean) ? 'bg-indigo-600' : 'bg-gray-400'} + relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`} + > + Use setting + +
); } diff --git a/ui/packages/shared/components/src/UserPreferences/index.tsx b/ui/packages/shared/components/src/UserPreferences/index.tsx index d3b4ecda656..7f33bf4c5a7 100644 --- a/ui/packages/shared/components/src/UserPreferences/index.tsx +++ b/ui/packages/shared/components/src/UserPreferences/index.tsx @@ -11,13 +11,8 @@ // See the License for the specific language governing permissions and // limitations under the License. -import {cloneElement, useState} from 'react'; - -import {Icon} from '@iconify/react'; - import {USER_PREFERENCES, useUIFeatureFlag} from '@parca/hooks'; -import {Button, IconButton, Modal} from '../'; import FlamegraphColorProfileSelector from './FlamegraphColorProfileSelector'; import UserPreferenceItem from './UserPreferenceItem'; @@ -42,54 +37,28 @@ const FlagToggle = ({name, id}: FlagToggleProps): JSX.Element => { ); }; -const UserPreferences = ({customButton}: {customButton?: JSX.Element}): JSX.Element => { - const [isOpen, setIsOpen] = useState(false); - +const UserPreferences = (): JSX.Element => { return (
- {customButton != null ? ( - cloneElement(customButton, { - onClick: () => setIsOpen(!isOpen), - }) - ) : ( - setIsOpen(!isOpen)} - icon={} +
+ - )} - { - setIsOpen(false); - }} - title="Preferences" - className="max-w-[460px]" - > -
- - - - -
-

Experimental Features

- -
-
-
- + + + +
+

Experimental Features

+
- +
); }; diff --git a/ui/packages/shared/hooks/src/useUserPreference/index.ts b/ui/packages/shared/hooks/src/useUserPreference/index.ts index d0109c95b4d..4bbd16fdad5 100644 --- a/ui/packages/shared/hooks/src/useUserPreference/index.ts +++ b/ui/packages/shared/hooks/src/useUserPreference/index.ts @@ -20,6 +20,7 @@ export interface UserPreferenceDetails { key: string; type: string; default: boolean | string; + description: string; } export const USER_PREFERENCES: {[key: string]: UserPreferenceDetails} = { @@ -28,30 +29,40 @@ export const USER_PREFERENCES: {[key: string]: UserPreferenceDetails} = { key: 'HIGHTLIGHT_AFTER_FILTERING', type: 'boolean', default: true, + description: + 'When enabled, this option highlights all occurrences of nodes that match your filter criteria, specifically when using the "filter by function" feature.', }, ENABLE_GRAPH_TRIMMING: { name: 'Enable trimming of nodes that are too small to be seen', key: 'ENABLE_GRAPH_TRIMMING', type: 'boolean', default: true, + description: + 'When enabled, this option automatically trims nodes that are too small to be seen in the graph, making it easier to read and understand.', }, FLAMEGRAPH_COLOR_PROFILE: { - name: 'Flamegraph color profile', + name: 'Iciclegraph color profile', key: 'FLAMEGRAPH_COLOR_PROFILE', type: 'string', default: 'ocean', + description: + 'This setting allows you to customize the color scheme used in the Icicle graph visualization.', }, GRAPH_METAINFO_DOCKED: { name: 'Dock Graph MetaInfo', key: 'GRAPH_METAINFO_DOCKED', type: 'boolean', default: false, + description: + 'When enabled, this option anchors the graph tooltip to the bottom of your screen instead of floating near your cursor.', }, HIGHLIGHT_SIMILAR_STACKS: { name: 'Highlight similar stacks when hovering over a node', key: 'HIGHLIGHT_SIMILAR_STACKS', type: 'boolean', default: false, + description: + "When enabled, this option automatically highlights stacks that are similar to the one you're currently hovering over in the Icicle graph.", }, } as const; diff --git a/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerSingle.tsx b/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerSingle.tsx index 28c042d0a73..c3c16c9dd9f 100644 --- a/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerSingle.tsx +++ b/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerSingle.tsx @@ -37,28 +37,24 @@ const ProfileExplorerSingle = ({ }: ProfileExplorerSingleProps): JSX.Element => { return ( <> - - {}} // eslint-disable-line @typescript-eslint/no-empty-function + profileSelection={profile} + comparing={false} + enforcedProfileName={''} // TODO + navigateTo={navigateTo} + suffix="_a" + /> + {profile != null ? ( + {}} // eslint-disable-line @typescript-eslint/no-empty-function - profileSelection={profile} - comparing={false} - enforcedProfileName={''} // TODO + profileSource={profile.ProfileSource()} navigateTo={navigateTo} - suffix="_a" /> - - {profile != null ? ( - - - ) : ( <> )} diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx index 010c2a69aa1..e187b06eeb5 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/index.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/index.tsx @@ -270,9 +270,9 @@ const ProfileSelector = ({ return ( <> -
-
-
+
+
+
-
+
{(query.matchers.length > 0 || query.inputMatcherString.length > 0) && @@ -297,7 +297,7 @@ const ProfileSelector = ({ profileType={selectedProfileName} />
-
+
@@ -358,13 +358,13 @@ const ProfileSelector = ({
{comparing && closeProfile()} icon={} />}
-
+
{querySelection.expression !== undefined && querySelection.expression.length > 0 && querySelection.from !== undefined && querySelection.to !== undefined ? ( -
+
Date: Mon, 29 Jul 2024 12:57:04 +0200 Subject: [PATCH 03/10] Implement settings page --- .../FlamegraphColorProfileSelector.tsx | 14 ++- .../UserPreferences/UserPreferenceItem.tsx | 114 +++--------------- .../components/src/UserPreferences/index.tsx | 27 +---- .../shared/profile/src/ProfileView/index.tsx | 9 -- 4 files changed, 28 insertions(+), 136 deletions(-) diff --git a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx index 2b031932861..ff9e0079cf7 100644 --- a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx +++ b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx @@ -32,9 +32,15 @@ const FlamegraphColorProfileSelector = (): JSX.Element => { }, [colorProfiles, colorProfileName, setColorProfileName]); return ( -
- Iciclegraph color profile -
+
+
+

Iciclegraph color profile

+

+ This setting allows you to customize the color scheme used in the Icicle graph + visualization. +

+
+
{(Object.keys(colorProfiles) as ColorProfileName[]).map(profile => { const isSelected = profile === colorProfileName; let displayName: string = profile; @@ -73,7 +79,7 @@ const FlamegraphColorProfileSelector = (): JSX.Element => { ); })}
-
+
); }; diff --git a/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx b/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx index 063fbe715a9..b584eb30d08 100644 --- a/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx +++ b/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx @@ -16,49 +16,6 @@ import cx from 'classnames'; import {useUserPreference, type UserPreferenceDetails} from '@parca/hooks'; -interface GenericInputProps { - id: string; - type: string; - value: any; - onChange: (value: any) => void; - disabled?: boolean; -} - -const GenericInput = ({ - id, - type, - value, - onChange, - disabled = false, -}: GenericInputProps): JSX.Element => { - switch (type) { - case 'boolean': - return ( - onChange(e.target.checked)} - disabled={disabled} - /> - ); - case 'number': - return ( - onChange(Number(e.target.value))} - disabled={disabled} - /> - ); - } - return <>; -}; - interface UserPreferenceItemProps { userPreferenceDetails: UserPreferenceDetails; className?: string; @@ -68,41 +25,6 @@ interface UserPreferenceItemProps { id?: string; } -// function UserPreferenceItem({ -// userPreferenceDetails, -// className = '', -// labelToLeft = false, -// disabled = false, -// inputSuffix = '', -// id = '', -// }: UserPreferenceItemProps): JSX.Element { -// const [enabledTrimming, setEnabledTrimming] = useUserPreference(userPreferenceDetails.key); - -// return ( -//
-// {labelToLeft ? ( -// -// ) : null} -// -// {inputSuffix.length > 0 ? {inputSuffix} : null} -// {!labelToLeft ? ( -// -// ) : null} -//
-// ); -// } - function UserPreferenceItem({ userPreferenceDetails, className = '', @@ -113,31 +35,29 @@ function UserPreferenceItem({ return (
-
-
-

{userPreferenceDetails.name}

-

{userPreferenceDetails.description}

-
- setEnabledPreference(checked as T)} - className={`${(enabledPreference as boolean) ? 'bg-indigo-600' : 'bg-gray-400'} +
+

{userPreferenceDetails.name}

+

{userPreferenceDetails.description}

+
+ setEnabledPreference(checked as T)} + className={`${(enabledPreference as boolean) ? 'bg-indigo-600' : 'bg-gray-400'} relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`} - > - Use setting - -
+ /> +
); } diff --git a/ui/packages/shared/components/src/UserPreferences/index.tsx b/ui/packages/shared/components/src/UserPreferences/index.tsx index 7f33bf4c5a7..ebe870e1aa6 100644 --- a/ui/packages/shared/components/src/UserPreferences/index.tsx +++ b/ui/packages/shared/components/src/UserPreferences/index.tsx @@ -11,32 +11,11 @@ // See the License for the specific language governing permissions and // limitations under the License. -import {USER_PREFERENCES, useUIFeatureFlag} from '@parca/hooks'; +import {USER_PREFERENCES} from '@parca/hooks'; import FlamegraphColorProfileSelector from './FlamegraphColorProfileSelector'; import UserPreferenceItem from './UserPreferenceItem'; -interface FlagToggleProps { - name: string; - id: string; -} - -const FlagToggle = ({name, id}: FlagToggleProps): JSX.Element => { - const [enabled, setEnabled] = useUIFeatureFlag(id); - - return ( -
- setEnabled(e.target.checked)} - /> - -
- ); -}; - const UserPreferences = (): JSX.Element => { return (
@@ -54,10 +33,6 @@ const UserPreferences = (): JSX.Element => { userPreferenceDetails={USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS} /> -
-

Experimental Features

- -
); diff --git a/ui/packages/shared/profile/src/ProfileView/index.tsx b/ui/packages/shared/profile/src/ProfileView/index.tsx index 11521b8fe86..78c5b166e99 100644 --- a/ui/packages/shared/profile/src/ProfileView/index.tsx +++ b/ui/packages/shared/profile/src/ProfileView/index.tsx @@ -38,7 +38,6 @@ import { Button, ConditionalWrapper, KeyDownProvider, - UserPreferences, useParcaContext, useURLState, } from '@parca/components'; @@ -373,14 +372,6 @@ export const ProfileView = ({
{profileViewExternalSubActions != null ? profileViewExternalSubActions : null} - - Preferences - - - } - /> {profileSource !== undefined && queryClient !== undefined ? ( Date: Thu, 1 Aug 2024 14:58:21 +0200 Subject: [PATCH 04/10] dark mode fixes --- ui/packages/app/web/src/pages/index.tsx | 2 +- ui/packages/app/web/src/pages/settings.tsx | 4 ++-- .../FlamegraphColorProfileSelector.tsx | 6 +++-- .../UserPreferences/UserPreferenceItem.tsx | 23 +++++++++++++------ 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/ui/packages/app/web/src/pages/index.tsx b/ui/packages/app/web/src/pages/index.tsx index d1aa33208d6..b4d65ca8a34 100644 --- a/ui/packages/app/web/src/pages/index.tsx +++ b/ui/packages/app/web/src/pages/index.tsx @@ -58,7 +58,7 @@ const Profiles = () => { isDarkMode, }} > -
+
{ return (
-
-

Visualisation Setttings

+
+

Visualisation Setttings

diff --git a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx index ff9e0079cf7..801d8c99c07 100644 --- a/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx +++ b/ui/packages/shared/components/src/UserPreferences/FlamegraphColorProfileSelector.tsx @@ -34,8 +34,10 @@ const FlamegraphColorProfileSelector = (): JSX.Element => { return (
-

Iciclegraph color profile

-

+

+ Iciclegraph color profile +

+

This setting allows you to customize the color scheme used in the Icicle graph visualization.

diff --git a/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx b/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx index b584eb30d08..1014b343dd5 100644 --- a/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx +++ b/ui/packages/shared/components/src/UserPreferences/UserPreferenceItem.tsx @@ -35,20 +35,29 @@ function UserPreferenceItem({ return (
-

{userPreferenceDetails.name}

-

{userPreferenceDetails.description}

+

+ {userPreferenceDetails.name} +

+

+ {userPreferenceDetails.description} +

setEnabledPreference(checked as T)} - className={`${(enabledPreference as boolean) ? 'bg-indigo-600' : 'bg-gray-400'} + className={`${ + (enabledPreference as boolean) ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-900' + } relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`} > Use setting From 26aa640149f9e68bde2c6e86e5eb788334a9d188 Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Thu, 15 Aug 2024 17:00:22 +0200 Subject: [PATCH 05/10] latest whitespace changes --- .../app/web/src/pages/layouts/ThemeProvider.tsx | 11 ++++++++++- ui/packages/app/web/src/pages/settings.tsx | 4 ++-- .../shared/components/src/Dropdown/index.tsx | 2 +- .../shared/profile/src/MetricsGraph/index.tsx | 11 +++++------ .../ProfileExplorer/ProfileExplorerCompare.tsx | 4 ++-- .../ProfileExplorer/ProfileExplorerSingle.tsx | 1 - .../profile/src/ProfileSelector/index.tsx | 17 ++++++++++------- .../shared/profile/src/ProfileSource.tsx | 4 ++-- .../shared/profile/src/ProfileView/index.tsx | 12 ++++++------ .../components/VisualisationToolbar/index.tsx | 2 -- 10 files changed, 38 insertions(+), 30 deletions(-) diff --git a/ui/packages/app/web/src/pages/layouts/ThemeProvider.tsx b/ui/packages/app/web/src/pages/layouts/ThemeProvider.tsx index 69dc60ed29c..bc3aee8734c 100644 --- a/ui/packages/app/web/src/pages/layouts/ThemeProvider.tsx +++ b/ui/packages/app/web/src/pages/layouts/ThemeProvider.tsx @@ -69,7 +69,16 @@ const ThemeProvider = ({children}: {children: React.ReactNode}) => { } }, [darkMode, isSystemSettingsTheme]); - return
{children}
; + return ( +
+ {children} +
+ ); }; export default ThemeProvider; diff --git a/ui/packages/app/web/src/pages/settings.tsx b/ui/packages/app/web/src/pages/settings.tsx index bbeb8388678..e3ed9191f28 100644 --- a/ui/packages/app/web/src/pages/settings.tsx +++ b/ui/packages/app/web/src/pages/settings.tsx @@ -15,8 +15,8 @@ import {UserPreferences} from '@parca/components'; const SettingsPage = () => { return ( -
-
+
+

Visualisation Settings

diff --git a/ui/packages/shared/components/src/Dropdown/index.tsx b/ui/packages/shared/components/src/Dropdown/index.tsx index ad96c2f310a..95eb42563d9 100644 --- a/ui/packages/shared/components/src/Dropdown/index.tsx +++ b/ui/packages/shared/components/src/Dropdown/index.tsx @@ -32,7 +32,7 @@ const Dropdown = ({ }): JSX.Element => { return ( <> - +
{element === undefined ? ( diff --git a/ui/packages/shared/profile/src/MetricsGraph/index.tsx b/ui/packages/shared/profile/src/MetricsGraph/index.tsx index b647b9e3232..8a5ef92832c 100644 --- a/ui/packages/shared/profile/src/MetricsGraph/index.tsx +++ b/ui/packages/shared/profile/src/MetricsGraph/index.tsx @@ -149,6 +149,8 @@ export const RawMetricsGraph = ({ width = 0; } + const graphWidth = width - margin * 1.5 - margin / 2; + const series: Series[] = data.reduce(function (agg: Series[], s: MetricsSeriesPb) { if (s.labelset !== undefined) { const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name)); @@ -184,10 +186,7 @@ export const RawMetricsGraph = ({ }); /* Scale */ - const xScale = d3 - .scaleUtc() - .domain([from, to]) - .range([0, width - 2.5 * margin]); + const xScale = d3.scaleUtc().domain([from, to]).range([0, graphWidth]); const yScale = d3 .scaleLinear() @@ -555,8 +554,8 @@ export const RawMetricsGraph = ({ ))} diff --git a/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerCompare.tsx b/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerCompare.tsx index dc838be9f03..2f8548adc40 100644 --- a/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerCompare.tsx +++ b/ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerCompare.tsx @@ -62,7 +62,7 @@ const ProfileExplorerCompare = ({ return ( <>
- + - +
-
+
@@ -303,16 +304,18 @@ const ProfileSelector = ({ setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser); setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced'); }} - className={`${ - advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-900' - } - relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`} + className={cx( + advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800', + 'relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75' + )} > Use setting