fix(typos): Fix "occurrence" typo in frontend (#58365)

this pr fixes a typo of "occurrence" in front end files

static/app/components/events/interfaces/performance/spanEvidence.tsx

@@ -8,7 +8,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {
   EventTransaction,
-  getIssueTypeFromOccurenceType,
+  getIssueTypeFromOccurrenceType,
   Organization,
 } from 'sentry/types';
 import {sanitizeQuerySelector} from 'sentry/utils/sanitizeQuerySelector';
@@ -42,7 +42,7 @@ export function SpanEvidenceSection({event, organization, projectSlug}: Props) {
 
   const hasProfilingFeature = organization.features.includes('profiling');
 
-  const issueType = getIssueTypeFromOccurenceType(event.occurrence?.type);
+  const issueType = getIssueTypeFromOccurrenceType(event.occurrence?.type);
   const issueTitle = event.occurrence?.issueTitle;
   const sanitizedIssueTitle = issueTitle && sanitizeQuerySelector(issueTitle);
 

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx

@@ -88,7 +88,7 @@ describe('SpanEvidenceKeyValueList', () => {
     });
   });
 
-  describe('N+1 Database Queries with occurences', () => {
+  describe('N+1 Database Queries with occurrences', () => {
     const builder = new TransactionEventBuilder('a1', '/', undefined, undefined, true);
     builder.getEvent().projectID = '123';
 

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx

@@ -16,7 +16,7 @@ import {
   EntryType,
   Event,
   EventTransaction,
-  getIssueTypeFromOccurenceType,
+  getIssueTypeFromOccurrenceType,
   IssueType,
   KeyValueListData,
   KeyValueListDataItem,
@@ -66,7 +66,8 @@ export function SpanEvidenceKeyValueList({
   const spanInfo = getSpanInfoFromTransactionEvent(event);
 
   const issueType =
-    event.perfProblem?.issueType ?? getIssueTypeFromOccurenceType(event.occurrence?.type);
+    event.perfProblem?.issueType ??
+    getIssueTypeFromOccurrenceType(event.occurrence?.type);
 
   if (!issueType || !spanInfo) {
     return (

static/app/components/events/interfaces/performance/utils.tsx

@@ -5,7 +5,7 @@ import {
   EntrySpans,
   EntryType,
   EventTransaction,
-  getIssueTypeFromOccurenceType,
+  getIssueTypeFromOccurrenceType,
   IssueCategory,
   IssueType,
 } from 'sentry/types';
@@ -76,7 +76,7 @@ export function getProblemSpansForSpanTree(event: EventTransaction): {
 
   const issueType =
     event.perfProblem?.issueType ??
-    getIssueTypeFromOccurenceType(event?.occurrence?.type);
+    getIssueTypeFromOccurrenceType(event?.occurrence?.type);
   const affectedSpanIds: string[] = [];
   const focusedSpanIds: string[] = [];
 

static/app/components/profiling/flamegraph/flamegraphContextMenu.tsx

@@ -52,9 +52,9 @@ const FLAMEGRAPH_SORTING_OPTIONS: FlamegraphSorting[] = [
 interface FlamegraphContextMenuProps {
   contextMenu: ReturnType<typeof useContextMenu>;
   hoveredNode: FlamegraphFrame | null;
-  isHighlightingAllOccurences: boolean;
+  isHighlightingAllOccurrences: boolean;
   onCopyFunctionNameClick: () => void;
-  onHighlightAllOccurencesClick: () => void;
+  onHighlightAllOccurrencesClick: () => void;
   profileGroup: ProfileGroup | null;
   disableCallOrderSort?: boolean;
 }
@@ -177,9 +177,9 @@ export function FlamegraphContextMenu(props: FlamegraphContextMenuProps) {
             )}
             <ProfilingContextMenuItemCheckbox
               {...props.contextMenu.getMenuItemProps({
-                onClick: props.onHighlightAllOccurencesClick,
+                onClick: props.onHighlightAllOccurrencesClick,
               })}
-              checked={props.isHighlightingAllOccurences}
+              checked={props.isHighlightingAllOccurrences}
             >
               {t('Highlight all occurrences')}
             </ProfilingContextMenuItemCheckbox>

static/app/components/profiling/flamegraph/flamegraphDrawer/flamegraphTreeTable.tsx

@@ -130,7 +130,7 @@ export function FlamegraphTreeTable({
     ]);
   }, [canvasPoolManager, clickedContextMenuNode]);
 
-  const onHighlightAllOccurencesClick = useCallback(() => {
+  const onHighlightAllOccurrencesClick = useCallback(() => {
     if (!clickedContextMenuNode) {
       return;
     }
@@ -330,7 +330,7 @@ export function FlamegraphTreeTable({
         </FrameCallersTableHeader>
         <FlamegraphTreeContextMenu
           onZoomIntoFrameClick={handleZoomIntoFrameClick}
-          onHighlightAllFramesClick={onHighlightAllOccurencesClick}
+          onHighlightAllFramesClick={onHighlightAllOccurrencesClick}
           contextMenu={contextMenu}
         />
         <TableItemsContainer>

static/app/components/profiling/flamegraph/flamegraphZoomView.tsx

@@ -48,7 +48,7 @@ import {useDrawSelectedBorderEffect} from './interactions/useDrawSelectedBorderE
 import {useInteractionViewCheckPoint} from './interactions/useInteractionViewCheckPoint';
 import {useWheelCenterZoom} from './interactions/useWheelCenterZoom';
 
-function isHighlightingAllOccurences(
+function isHighlightingAllOccurrences(
   node: FlamegraphFrame | null,
   selectedNodes: FlamegraphFrame[] | null
 ) {
@@ -174,8 +174,8 @@ function FlamegraphZoomView({
 
   const hoveredNodeOnContextMenuOpen = useRef<FlamegraphFrame | null>(null);
   const contextMenu = useContextMenu({container: flamegraphCanvasRef});
-  const [highlightingAllOccurences, setHighlightingAllOccurences] = useState(
-    isHighlightingAllOccurences(hoveredNode, selectedFramesRef.current)
+  const [highlightingAllOccurrences, setHighlightingAllOccurrences] = useState(
+    isHighlightingAllOccurrences(hoveredNode, selectedFramesRef.current)
   );
 
   useEffect(() => {
@@ -384,8 +384,8 @@ function FlamegraphZoomView({
       }
 
       if (evt.key === 'Escape') {
-        if (highlightingAllOccurences) {
-          setHighlightingAllOccurences(false);
+        if (highlightingAllOccurrences) {
+          setHighlightingAllOccurrences(false);
           dispatch({type: 'set highlight all frames', payload: null});
           canvasPoolManager.dispatch('highlight frame', [null, 'selected']);
           previousKeyPress.current = {key: null, at: 0};
@@ -462,8 +462,8 @@ function FlamegraphZoomView({
     };
   }, [
     canvasPoolManager,
-    setHighlightingAllOccurences,
-    highlightingAllOccurences,
+    setHighlightingAllOccurrences,
+    highlightingAllOccurrences,
     dispatch,
     nextState,
     previousState,
@@ -641,8 +641,8 @@ function FlamegraphZoomView({
       hoveredNodeOnContextMenuOpen.current = hoveredNode;
       contextMenu.handleContextMenu(event);
       // Make sure we set the highlight state relative to the newly hovered node
-      setHighlightingAllOccurences(
-        isHighlightingAllOccurences(hoveredNode, selectedFramesRef.current)
+      setHighlightingAllOccurrences(
+        isHighlightingAllOccurrences(hoveredNode, selectedFramesRef.current)
       );
     },
     [contextMenu, hoveredNode]
@@ -653,20 +653,20 @@ function FlamegraphZoomView({
       return;
     }
 
-    // If all occurences are currently being highlighted, we want to unhighlight them now
+    // If all Occurrences are currently being highlighted, we want to unhighlight them now
     if (
-      isHighlightingAllOccurences(
+      isHighlightingAllOccurrences(
         hoveredNodeOnContextMenuOpen.current,
         selectedFramesRef.current
       )
     ) {
-      setHighlightingAllOccurences(false);
+      setHighlightingAllOccurrences(false);
       dispatch({type: 'set highlight all frames', payload: null});
       canvasPoolManager.dispatch('highlight frame', [null, 'selected']);
       return;
     }
 
-    setHighlightingAllOccurences(true);
+    setHighlightingAllOccurrences(true);
 
     const frameName = hoveredNodeOnContextMenuOpen.current.frame.name;
     const packageName =
@@ -745,9 +745,9 @@ function FlamegraphZoomView({
         contextMenu={contextMenu}
         profileGroup={profileGroup}
         hoveredNode={hoveredNodeOnContextMenuOpen.current}
-        isHighlightingAllOccurences={highlightingAllOccurences}
+        isHighlightingAllOccurrences={highlightingAllOccurrences}
         onCopyFunctionNameClick={handleCopyFunctionName}
-        onHighlightAllOccurencesClick={handleHighlightAllFramesClick}
+        onHighlightAllOccurrencesClick={handleHighlightAllFramesClick}
         disableCallOrderSort={disableCallOrderSort}
       />
       {flamegraphCanvas &&

static/app/components/profiling/flamegraphSearch.spec.tsx

@@ -14,7 +14,7 @@ const f = (name: string) => {
 };
 
 describe('fzf', () => {
-  it('matches only first occurence', () => {
+  it('matches only first occurrence', () => {
     expect(searchFrameFzf(f('foofoo'), new Map(), 'foo')).toMatchObject({
       start: 0,
       end: 3,

static/app/types/group.tsx

@@ -99,7 +99,7 @@ export enum IssueTitle {
   PERFORMANCE_DURATION_REGRESSION = 'Duration Regression',
 }
 
-export const getIssueTypeFromOccurenceType = (
+export const getIssueTypeFromOccurrenceType = (
   typeId: number | undefined
 ): IssueType | null => {
   const occurrenceTypeToIssueIdMap = {

static/app/utils/profiling/differentialFlamegraph.tsx

@@ -3,7 +3,7 @@ import {relativeChange} from './units/units';
 import {Flamegraph} from './flamegraph';
 import {FlamegraphFrame} from './flamegraphFrame';
 
-function countFrameOccurences(
+function countFrameOccurrences(
   frames: ReadonlyArray<FlamegraphFrame>
 ): Map<string, number> {
   const counts = new Map<string, number>();
@@ -38,8 +38,8 @@ export class DifferentialFlamegraph extends Flamegraph {
       {inverted: from.inverted, sort: from.sort}
     );
 
-    const fromCounts = countFrameOccurences(from.frames);
-    const toCounts = countFrameOccurences(to.frames);
+    const fromCounts = countFrameOccurrences(from.frames);
+    const toCounts = countFrameOccurrences(to.frames);
 
     const countDiff: Map<string, number> = new Map();
     const colorMap: Map<string, ColorChannels> =