Add span tag to kernelName dropdown. Improve readability (#102)

Signed-off-by: coleramos425 <colramos@amd.com>


[ROCm/rocprofiler-compute commit: a56bd24dbf]

projects/rocprofiler-compute/src/omniperf_analyze/assets/layout.css

@@ -213,7 +213,9 @@ ul#nav li {
    font-size: 14px;
    text-align: left;
 }
-
+.VirtualizedSelectOption {
+   overflow: hidden;
+}
 #nav .nav-right {
    float: right;
 }
@@ -246,6 +248,7 @@ button.report:hover {
    font-size: 16px;
 }
 
+/* Menu Button */
 .dropdown button {
    display: inline-block;
    font: 16px 'opensans-bold', sans-serif;

projects/rocprofiler-compute/src/omniperf_analyze/utils/gui.py

@@ -602,7 +602,7 @@ def build_layout(
                     id="popup",
                     children=[
                         html.Div(
-                            children="To dive deeper, use the top drop down menus to isolate particular kernel(s) or dispatch(s). You will then see the web page update with additional low-level metrics specific to the filter you've applied..",
+                            children="To dive deeper, use the top drop down menus to isolate particular kernel(s) or dispatch(s). You will then see the web page update with additional low-level metrics specific to the filter you've applied.",
                         ),
                     ],
                 )

projects/rocprofiler-compute/src/omniperf_analyze/utils/gui_components/header.py

@@ -38,6 +38,14 @@ def list_unique(orig_list, is_numeric):
         unique_list.sort()
     return unique_list
 
+def create_span(input):
+    elmt = {}
+    elmt["label"] = html.Span(
+        str(input),
+        title=str(input)
+    ),
+    elmt["value"] = str(input)
+    return elmt
 
 def get_header(raw_pmc, input_filters, kernel_names):
     return html.Header(
@@ -163,40 +171,6 @@ def get_header(raw_pmc, input_filters, kernel_names):
                                     )
                                 ],
                             ),
-                            html.Li(
-                                className="filter",
-                                children=[
-                                    html.Div(
-                                        children=[
-                                            html.A(
-                                                className="smoothscroll",
-                                                children=["Kernels:"],
-                                            ),
-                                            dcc.Dropdown(
-                                                list_unique(
-                                                    list(
-                                                        map(
-                                                            str,
-                                                            raw_pmc[
-                                                                schema.pmc_perf_file_prefix
-                                                            ]["KernelName"],
-                                                        )
-                                                    ),
-                                                    False,
-                                                ),  # list avail kernel names
-                                                id="kernel-filt",
-                                                multi=True,
-                                                value=kernel_names,
-                                                placeholder="ALL",
-                                                style={
-                                                    "width": "600px",  # TODO: Change these widths to % rather than fixed value
-                                                    "height": "34px",
-                                                },
-                                            ),
-                                        ]
-                                    )
-                                ],
-                            ),
                             html.Li(
                                 className="filter",
                                 children=[
@@ -261,6 +235,45 @@ def get_header(raw_pmc, input_filters, kernel_names):
                                     )
                                 ],
                             ),
+                            html.Li(
+                                className="filter",
+                                children=[
+                                    html.Div(
+                                        children=[
+                                            html.A(
+                                                className="smoothscroll",
+                                                children=["Kernels:"],
+                                            ),
+                                            dcc.Dropdown(
+                                                list(
+                                                    map(
+                                                        create_span,
+                                                        list_unique(
+                                                            list(
+                                                                map(
+                                                                    str,
+                                                                    raw_pmc[
+                                                                        schema.pmc_perf_file_prefix
+                                                                    ]["KernelName"],
+                                                                )
+                                                            ),
+                                                            False,
+                                                        ),  # list avail kernel names
+                                                    )
+                                                ),
+                                                id="kernel-filt",
+                                                multi=True,
+                                                value=kernel_names,
+                                                optionHeight=150,
+                                                placeholder="ALL",
+                                                style={
+                                                    "width": "600px",  # TODO: Change these widths to % rather than fixed value
+                                                },
+                                            ),
+                                        ]
+                                    )
+                                ],
+                            ),
                             html.Div(
                                 className="nav-right",
                                 children=[