@parca/profile 0.16.237 → 0.16.238

package/dist/SourceView/lang-detector/index.d.ts

@@ -0,0 +1 @@
+export declare const langaugeFromFile: (file: string) => string;

package/dist/SourceView/lang-detector/index.js

@@ -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 * as hljsLangs from 'react-syntax-highlighter/dist/esm/languages/hljs';
+import _extLangMap from './ext-to-lang.json';
+const extLangMap = _extLangMap;
+export const langaugeFromFile = (file) => {
+    const extension = file.split('.').pop() ?? '';
+    if (extLangMap[extension] == null) {
+        return 'text';
+    }
+    const langs = extLangMap[extension];
+    for (const lang of langs) {
+        // eslint-disable-next-line import/namespace
+        if (hljsLangs[lang] != null) {
+            return lang;
+        }
+    }
+    return 'text';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.237",
+  "version": "0.16.238",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "9d62964ad983602ecc905f578af1b8947501ab59"
+  "gitHead": "5372bb39e5aabffc1884b6141803f173e1a2a490"
 }

package/src/MetricsGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useRef, useState} from 'react';
+import React, {Fragment, useRef, useState} from 'react';
 
 import * as d3 from 'd3';
 import {pointer} from 'd3-selection';
@@ -408,7 +408,7 @@ export const RawMetricsGraph = ({
           <g transform={`translate(${margin}, ${margin})`}>
             <g className="y axis" textAnchor="end" fontSize="10" fill="none">
               {yScale.ticks(5).map((d, i) => (
-                <>
+                <Fragment key={`${i.toString()}-${d.toString()}`}>
                   <g
                     key={`tick-${i}`}
                     className="tick"
@@ -429,7 +429,7 @@ export const RawMetricsGraph = ({
                       y2={yScale(d)}
                     />
                   </g>
-                </>
+                </Fragment>
               ))}
               <line
                 className="stroke-gray-300 dark:stroke-gray-500"
@@ -454,7 +454,7 @@ export const RawMetricsGraph = ({
               transform={`translate(0,${height - margin})`}
             >
               {xScale.ticks(5).map((d, i) => (
-                <>
+                <Fragment key={`${i.toString()}-${d.toString()}`}>
                   <g
                     key={`tick-${i}`}
                     className="tick"
@@ -475,7 +475,7 @@ export const RawMetricsGraph = ({
                       y2={-height + margin}
                     />
                   </g>
-                </>
+                </Fragment>
               ))}
               <line
                 className="stroke-gray-300 dark:stroke-gray-500"

package/src/SourceView/Highlighter.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useId} from 'react';
+import {useId, useMemo} from 'react';
 
 import {Vector} from 'apache-arrow';
 import cx from 'classnames';
@@ -25,6 +25,7 @@ import {selectDarkMode, useAppSelector} from '@parca/store';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {LineNo} from './LineNo';
+import {langaugeFromFile} from './lang-detector';
 
 interface RendererProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36,8 +37,8 @@ interface RendererProps {
 type Renderer = ({rows, stylesheet, useInlineStyles}: RendererProps) => JSX.Element;
 
 interface HighlighterProps {
+  file: string;
   content: string;
-  language?: string;
   renderer?: Renderer;
 }
 
@@ -168,14 +169,25 @@ export const profileAwareRenderer = (
   };
 };
 
-export const Highlighter = ({content, language, renderer}: HighlighterProps): JSX.Element => {
+export const Highlighter = ({file, content, renderer}: HighlighterProps): JSX.Element => {
   const isDarkMode = useAppSelector(selectDarkMode);
+  const language = useMemo(() => langaugeFromFile(file), [file]);
 
   return (
     <div className="relative">
       <div className="flex gap-2 text-xs">
         <div
-          className={cx('text-right', charsToWidth(content.split('\n').length.toString().length))}
+          className={cx(
+            'text-right',
+            charsToWidth(
+              content
+                .split(
+                  // prettier-ignore
+                  '\n'
+                )
+                .length.toString().length
+            )
+          )}
         >
           Line
         </div>

package/src/SourceView/index.tsx

@@ -65,6 +65,7 @@ export const SourceView = React.memo(function SourceView({
 
   return (
     <Highlighter
+      file={sourceFileName as string}
       content={data.source}
       renderer={profileAwareRenderer(cumulative, flat, total, filtered)}
     />