diff --git a/packages/pyroscope-models/src/spyName.ts b/packages/pyroscope-models/src/spyName.ts
index 206147aec0..e12aecf30b 100644
--- a/packages/pyroscope-models/src/spyName.ts
+++ b/packages/pyroscope-models/src/spyName.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-export type SpyNameFirstClassType = typeof SpyNameFirstClass[number];
+export type SpyNameFirstClassType = (typeof SpyNameFirstClass)[number];
 
 export const SpyNameFirstClass = [
   'dotnetspy',
@@ -23,7 +23,7 @@ export const SpyNameOther = [
 export const AllSpyNames = [...SpyNameFirstClass, ...SpyNameOther] as const;
 
 export const SpyNameSchema = z.preprocess((val) => {
-  if (!val || !AllSpyNames.includes(val as typeof AllSpyNames[number])) {
+  if (!val || !AllSpyNames.includes(val as (typeof AllSpyNames)[number])) {
     return 'unknown';
   }
   return val;
diff --git a/packages/pyroscope-models/src/units.ts b/packages/pyroscope-models/src/units.ts
index c751556338..7826695025 100644
--- a/packages/pyroscope-models/src/units.ts
+++ b/packages/pyroscope-models/src/units.ts
@@ -20,5 +20,5 @@ export const UnitsSchema = z.preprocess((u) => {
   return 'unknown';
 }, z.enum(['samples', 'objects', 'goroutines', 'bytes', 'lock_samples', 'lock_nanoseconds', 'trace_samples', 'exceptions', 'unknown']));
 
-export type UnitsType = typeof units[number];
+export type UnitsType = (typeof units)[number];
 export type Units = z.infer<typeof UnitsSchema>;
diff --git a/webapp/javascript/components/DateRangePicker.tsx b/webapp/javascript/components/DateRangePicker.tsx
index 4e5f2e1608..39ce6d4cc6 100644
--- a/webapp/javascript/components/DateRangePicker.tsx
+++ b/webapp/javascript/components/DateRangePicker.tsx
@@ -86,7 +86,7 @@ function DateRangePicker() {
     }
   };
 
-  const isPresetSelected = (preset: typeof defaultPresets[0][0]) => {
+  const isPresetSelected = (preset: (typeof defaultPresets)[0][0]) => {
     return preset.label === dateToLabel(from, until, offset);
   };
 
diff --git a/webapp/javascript/components/TagsBar.tsx b/webapp/javascript/components/TagsBar.tsx
index 4699ae1750..add70a5a35 100644
--- a/webapp/javascript/components/TagsBar.tsx
+++ b/webapp/javascript/components/TagsBar.tsx
@@ -119,7 +119,7 @@ function LabelsSubmenu({
   // TODO: type this properly
   const [filter, setFilter] = useState<Record<string, string>>({});
 
-  const GetTagValues = (labelName: string, t: typeof tags[1]) => {
+  const GetTagValues = (labelName: string, t: (typeof tags)[1]) => {
     const { type } = t;
     switch (type) {
       case 'loading': {
diff --git a/webapp/javascript/components/TimelineChart/CrosshairSync.plugin.ts b/webapp/javascript/components/TimelineChart/CrosshairSync.plugin.ts
index 9685962e00..fd64182b22 100644
--- a/webapp/javascript/components/TimelineChart/CrosshairSync.plugin.ts
+++ b/webapp/javascript/components/TimelineChart/CrosshairSync.plugin.ts
@@ -14,7 +14,7 @@ type PlotWithCrosshairsSupport = jquery.flot.plot &
   function init(plot: PlotWithCrosshairsSupport) {
     function getOptions() {
       return plot.getOptions() as jquery.flot.plotOptions & {
-        syncCrosshairsWith: typeof defaultOptions['syncCrosshairsWith'];
+        syncCrosshairsWith: (typeof defaultOptions)['syncCrosshairsWith'];
       };
     }
 
@@ -26,7 +26,7 @@ type PlotWithCrosshairsSupport = jquery.flot.plot &
     }
 
     function onPlotHover(
-      syncCrosshairsWith: typeof defaultOptions['syncCrosshairsWith'],
+      syncCrosshairsWith: (typeof defaultOptions)['syncCrosshairsWith'],
       e: unknown,
       position: { x: number; y: number }
     ) {
@@ -36,7 +36,7 @@ type PlotWithCrosshairsSupport = jquery.flot.plot &
     }
 
     function clearCrosshairs(
-      syncCrosshairsWith: typeof defaultOptions['syncCrosshairsWith']
+      syncCrosshairsWith: (typeof defaultOptions)['syncCrosshairsWith']
     ) {
       syncCrosshairsWith.forEach((id) =>
         accessExternalInstance(id).clearCrosshair()
diff --git a/webapp/javascript/pages/exemplars/ExemplarsSingleView.tsx b/webapp/javascript/pages/exemplars/ExemplarsSingleView.tsx
index c4cab8041e..11708e33b3 100644
--- a/webapp/javascript/pages/exemplars/ExemplarsSingleView.tsx
+++ b/webapp/javascript/pages/exemplars/ExemplarsSingleView.tsx
@@ -145,21 +145,22 @@ function ExemplarsSingleView() {
           <p className={styles.heatmapTitle}>Heatmap</p>
           {heatmap}
         </Box>
-        {!exemplarsSingleView.selectionProfile && exemplarsSingleView.heatmap && (
-          <Box>
-            <div className={styles.heatmapSelectionGuide}>
-              <StatusMessage
-                type="info"
-                message="Select an area in the heatmap to get started"
-              />
-              <img
-                className={styles.gif}
-                src={heatmapSelectionPreviewGif}
-                alt="heatmap-selection-gif"
-              />
-            </div>
-          </Box>
-        )}
+        {!exemplarsSingleView.selectionProfile &&
+          exemplarsSingleView.heatmap && (
+            <Box>
+              <div className={styles.heatmapSelectionGuide}>
+                <StatusMessage
+                  type="info"
+                  message="Select an area in the heatmap to get started"
+                />
+                <img
+                  className={styles.gif}
+                  src={heatmapSelectionPreviewGif}
+                  alt="heatmap-selection-gif"
+                />
+              </div>
+            </Box>
+          )}
         {exemplarsSingleView.heatmap &&
         exemplarsSingleView.selectionProfile &&
         differenceProfile ? (