UI fixes

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/CompositeBlockRenderer.razor

@@ -1,7 +1,7 @@
 @using FicusDashboard.Components.CaseInfo.ContextValues.Canvas.Graph.Flamegraph.Context
 
 @{
-  var minWidth = @SpecifyMinWidth ? $"{Context.MinMainDim}: 100%" : string.Empty;
+  var minWidth = SpecifyMinWidth ? $"{Context.MinMainDim}: 100%" : string.Empty;
 }
 
 <div style="display: flex; flex-direction: @Context.MainFlexDirection; @minWidth; @Context.MainDim: fit-content;">
@@ -80,7 +80,7 @@
                   }
                 }
 
-                <div style="height: 100%; flex-grow: 1; min-width: @(FlamegraphConstants.EdgeWidthPx)px;">
+                <div style="height: 100%; flex-grow: 1;">
                   <EdgeRenderer Width="100%" Height="100%" EnhancedEdge="@edge" Context="Context"/>
                 </div>
               </div>

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/Context/FlamegraphContext.cs

@@ -100,6 +100,7 @@ public class FlamegraphRenderingContext
   public required bool LeftToRight { get; init; }
   public required bool RenderOcelAnnotation { get; init; }
   public required bool RenderOcelTypeNames { get; init; }
+  public required bool ShowObjectId { get; init; }
 
   public string MainDim => LeftToRight ? "height" : "width";
   public string SecondDim => LeftToRight ? "width" : "height";

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/EdgeRenderer.razor

@@ -11,9 +11,8 @@
   }
 }
 
-<div style="@style; @Context.MinSecondDim: 100px;" class="flamegraph-edge">
-
-  @if (!@Context.RenderOcelAnnotation && EnhancedEdge is { })
+<div style="@style; @Context.MinSecondDim: @(FlamegraphConstants.EdgeMinSecondDimPx)px;" class="flamegraph-edge">
+  @if (!Context.RenderOcelAnnotation && EnhancedEdge is { })
   {
     <div style="display: flex; flex-direction: column; align-items: center;">
       <div style="margin-top: -5px;">

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/FlamegraphConstants.cs

@@ -3,6 +3,7 @@
 internal static class FlamegraphConstants
 {
   public const int MainDimPx = 35;
-  public const int NodeWidthPx = 65;
-  public const int EdgeWidthPx = 40;
+  public const int NodeMinSecondDimPx = 20;
+  public const int EdgeMinSecondDimPx = 40;
+  public const int NodeMaxTextMainDimPx = 250;
 }

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/FlamegraphGraphRenderer.razor

@@ -79,7 +79,8 @@ else
         EventClassesAsName = Settings.UseEventClassesAsLabels,
         LeftToRight = Settings.UseLROrientation,
         RenderOcelAnnotation = Settings.RenderOcelAnnotation,
-        RenderOcelTypeNames = Settings.RenderOcelTypeNames
+        RenderOcelTypeNames = Settings.RenderOcelTypeNames,
+        ShowObjectId = Settings.ShowObjectId
       };
 
       StateHasChanged();

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/Node/NodeObjectsStateObjectsBlock.razor

@@ -1,5 +1,6 @@
 @inject IEntitiesColors Colors;
 
+@using BlazorBootstrap
 @using FicusDashboard.Components.CaseInfo.ContextValues.Canvas.Graph.Flamegraph.Context
 @using FicusDashboard.Services
 
@@ -16,7 +17,12 @@
     <div style="@Context.WritingMode; flex-grow: 1; @borderStyle"
          class="flamegraph-ocel-annotation flex-centered"
          id="@Context.GenerateOcelObjectsContainerId(NodeId, id, IsInitialState)">
-      @id
+      <Tooltip Title="@id" Style="width: 100%; height: 100%;">
+        @if (Context.ShowObjectId)
+        {
+          @id
+        }
+      </Tooltip>
     </div>
   }
 </div>

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/Flamegraph/Node/NodeRenderer.razor

@@ -1,3 +1,4 @@
+@using BlazorBootstrap
 @using FicusDashboard.Components.CaseInfo.ContextValues.Canvas.Graph.Flamegraph.Context
 
 @{
@@ -8,7 +9,7 @@
 }
 
 <div style="@Context.MinMainDim: @(mainDim)px; 
-            @Context.MinSecondDim: @(FlamegraphConstants.NodeWidthPx)px;
+            @Context.MinSecondDim: @(FlamegraphConstants.NodeMinSecondDimPx)px;
             display: flex;
             flex-direction: @Context.MainFlexDirection;"
      class="flamegraph-node">
@@ -20,19 +21,24 @@
                               IsInitialState="@true"/> 
   }
 
-  <div style="@Context.WritingMode;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              @Context.MinSecondDim: @(FlamegraphConstants.NodeWidthPx)px;">
-    @foreach (var eventClass in Context.GetNodeName(Node))
-    {
-      <div style="text-overflow: ellipsis; white-space: wrap; flex-grow: 1;"
-           class="flamegraph-node-title">
-        @eventClass
-      </div>
-    }
-  </div>
+  <Tooltip Title="@string.Join('\n',  Context.GetNodeName(Node))"
+           Style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;"
+           Class="flamegraph-node-title-container">
+    <div style="@Context.WritingMode;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: @(FlamegraphConstants.NodeMinSecondDimPx)px;
+                flex-direction: column;">
+      @foreach (var eventClass in Context.GetNodeName(Node))
+      {
+        <div style="@Context.MaxMainDim: @(FlamegraphConstants.NodeMaxTextMainDimPx)px"
+             class="flamegraph-node-title">
+          @eventClass
+        </div>
+      }
+    </div>
+  </Tooltip>
 
   @if (Context.RenderOcelAnnotation)
   {

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/ContextValues/Canvas/Graph/GraphLikeEntitySettings.razor

@@ -48,6 +48,10 @@
       <BoolCheckbox T="bool"
                     Handler="@((newValue, _) => RenderOcelTypeNames = newValue)"
                     Title="Render OCEL type names explicitly"/>
+
+      <BoolCheckbox T="bool"
+                    Handler="@((newValue, _) => ShowObjectId = newValue)"
+                    Title="Show objects ids"/>
     </div>
   }
 
@@ -73,6 +77,7 @@
   public bool RenderDagLcsInFlamegraphMode { get; private set; }
   public bool RenderOcelAnnotation { get; private set; }
   public bool RenderOcelTypeNames { get; private set; }
+  public bool ShowObjectId { get; private set; }
 
   public string? Filter { get; private set; }
   public bool UseLROrientation { get; private set; } = true;

Ficus/src/front/FicusFrontend/FicusDashboard/Components/CaseInfo/PipelinePartResultsRenderer.razor

@@ -49,14 +49,14 @@
 
   @if (Results.Results.Count > 1)
   {
-    <div class="pipeline-part-result-selection-buttons-container">
+    <div class="pipeline-part-result-selection-buttons-container visible-scroll">
       @for (var index = 0; index < Results.Results.Count; ++index)
       {
         var currentIndex = index;
         var selectedClass = mySelectedExecutionResultIndex == index ? "pipeline-part-result-selection-button-selected" : string.Empty;
         var buttonClass = "pipeline-part-result-selection-button " + selectedClass;
 
-        <div class="@buttonClass" @onclick="@(e => HandleIndexSelection(currentIndex))">
+        <div class="@buttonClass" @onclick="@(_ => HandleIndexSelection(currentIndex))">
           @index
         </div>
       }

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/canvas_size.ts

@@ -9,6 +9,6 @@ export function setCanvasSizeFunctions() {
 const { width, height } = await canvasSize.maxArea({usePromise: true});
 let maxDimensions: [number, number] = [width, height];
 
-export async function getMaxCanvasDimensions(): Promise<[number, number]> {
+export function getMaxCanvasDimensions(): [number, number] {
   return maxDimensions;
 }

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/colors_log/colors_log_renderer.ts

@@ -55,7 +55,7 @@ function getRectDimensions(widthScale: number, heightScale: number) {
   return [widthScale * DefaultRectWidth, heightScale * DefaultRectHeight];
 }
 
-async function drawColorsLog(
+function drawColorsLog(
   log: GrpcColorsEventLog,
   widthScale: number,
   heightScale: number,
@@ -69,7 +69,7 @@ async function drawColorsLog(
   }
 
   let additionalAxis = createAdditionalAxisList(log.adjustments);
-  let result = await calculateCanvasSize(canvas, log, widthScale, heightScale, additionalAxis.length);
+  let result = calculateCanvasSize(canvas, log, widthScale, heightScale, additionalAxis.length);
 
   if ('widthAdjustment' in result) {
     let adjustments = <TooBigCanvas>result;
@@ -179,23 +179,22 @@ interface TooBigCanvas {
 
 interface CanvasDimensions {
   widthScale: number,
-  heightScale: number,
   rectWidth: number,
   rectHeight: number,
   canvasWidth: number,
   canvasHeight: number
 }
 
-async function calculateCanvasSize(canvas: HTMLCanvasElement,
-                                   log: GrpcColorsEventLog,
-                                   widthScale: number,
-                                   heightScale: number,
-                                   additionalAxisCount: number): Promise<CanvasDimensions | TooBigCanvas> {
+function calculateCanvasSize(canvas: HTMLCanvasElement,
+                             log: GrpcColorsEventLog,
+                             widthScale: number,
+                             heightScale: number,
+                             additionalAxisCount: number): CanvasDimensions | TooBigCanvas {
+  let [origCanvasWidth, origCanvasHeight] = calculateCanvasWidthAndHeight(log, 1, 1, DefaultRectHeight, additionalAxisCount);
   let [rectWidth, rectHeight] = getRectDimensions(widthScale, heightScale);
-
   let [canvasWidth, canvasHeight] = calculateCanvasWidthAndHeight(log, widthScale, rectWidth, rectHeight, additionalAxisCount);
 
-  let [maxCanvasWidth, maxCanvasHeight] = await getMaxCanvasDimensions();
+  let [maxCanvasWidth, maxCanvasHeight] = getMaxCanvasDimensions();
   if (canvasWidth > maxCanvasWidth || canvasHeight > maxCanvasHeight) {
     return {
       widthAdjustment: maxCanvasWidth / canvasWidth,
@@ -210,19 +209,18 @@ async function calculateCanvasSize(canvas: HTMLCanvasElement,
   let minCanvasHeight = Math.max(MinCanvasHeight, parentHeight);
 
   if (canvasWidth < minCanvasWidth) {
-    widthScale = minCanvasWidth / canvasWidth;
+    widthScale = minCanvasWidth / origCanvasWidth;
   }
 
   if (canvasHeight < minCanvasHeight) {
-    heightScale = minCanvasHeight / canvasHeight;
+    heightScale = minCanvasHeight / origCanvasHeight;
   }
 
   [rectWidth, rectHeight] = getRectDimensions(widthScale, heightScale);
   [canvasWidth, canvasHeight] = calculateCanvasWidthAndHeight(log, widthScale, rectWidth, rectHeight, additionalAxisCount);
 
   return {
     widthScale: widthScale,
-    heightScale: heightScale,
     rectWidth: rectWidth,
     rectHeight: rectHeight,
     canvasWidth: canvasWidth,

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/colors_log/constants.ts

@@ -2,7 +2,7 @@ export const AxisDelta = 5;
 export const AxisWidth = 2;
 
 export const DefaultRectWidth = 1;
-export const DefaultRectHeight = 1;
+export const DefaultRectHeight = 10;
 export const AxisTextHeight = 14;
 export const OverallXDelta = AxisDelta + AxisWidth + AxisDelta;
 

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/colors_log/event_handlers.ts

@@ -2,6 +2,7 @@ import tippy, {followCursor} from "tippy.js";
 import {GrpcColorsEventLog} from "../protos/ficus/GrpcColorsEventLog";
 import {AxisDelta, AxisWidth} from "./constants";
 import bs from "binary-search";
+import {createTippyTooltipProps} from "../tooltip";
 
 let pivot: HTMLElement = null;
 
@@ -29,9 +30,9 @@ export function addColorsLogCanvasMouseMoveHandler(canvas: HTMLCanvasElement,
     }
 
     updatePivotElement(event, canvas);
-    showTooltip(log.mapping[event.colorIndex].name);
+    tippy(pivot, createTippyTooltipProps(log.mapping[event.colorIndex].name));
   };
-  
+
   canvasIdsToListeners.set(canvas.id, listener);
   canvas.addEventListener("mousemove", listener);
 }
@@ -108,18 +109,3 @@ function createPivotElement(event: CanvasEventCoordinate, canvas: HTMLCanvasElem
 
   return pivot;
 }
-
-function showTooltip(name: string) {
-  tippy(pivot, {
-    appendTo: document.fullscreenElement ? document.fullscreenElement : undefined,
-    content: `
-                <div style="padding: 10px; background: black; color: white; border-radius: 5px;">
-                    ${name}
-                </div>
-               `,
-    allowHTML: true,
-    zIndex: Number.MAX_VALUE,
-    duration: 0,
-    arrow: true,
-  });
-}

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/graph/event_listeners.ts

@@ -1,5 +1,6 @@
 import tippy, {Instance, Props} from "tippy.js";
 import {getOrCreateColor} from "../utils";
+import {createTippyTooltipProps} from "../tooltip";
 
 export function setGraphEventListeners() {
   addEventListener("mouseover", event => {
@@ -13,7 +14,7 @@ export function setGraphEventListeners() {
       let tooltip = createTooltip(element, entries, "manual", true);
       tooltip.show();
     })
-  }); 
+  });
 }
 
 function executeIfHasTooltip(event: MouseEvent, handler: (entries: [string, number][], element: HTMLElement) => void) {
@@ -30,30 +31,15 @@ function executeIfHasTooltip(event: MouseEvent, handler: (entries: [string, numb
 }
 
 function createTooltip(element: HTMLElement, histogramEntries: [string, number][], trigger: string, interactive: boolean): Instance {
-  let props = createTooltipBaseProps(histogramEntries);
+  let props = createTippyTooltipProps(createEventClassesDescription(histogramEntries).join('\n'));
   props.trigger = trigger;
   props.interactive = interactive;
 
   return tippy(element, props);
 }
 
-function createTooltipBaseProps(histogramEntries: [string, number][]): Partial<Props> {
-  return {
-    appendTo: document.fullscreenElement ? document.fullscreenElement : undefined,
-    content: `
-                <div style="padding: 10px; background: black; color: white; border-radius: 5px; max-height: 300px; overflow: auto"
-                     class="visible-scroll">
-                    ${createEventClassesDescription(histogramEntries).join('\n')}
-                </div>
-               `,
-    allowHTML: true,
-    zIndex: Number.MAX_VALUE,
-    duration: 0,
-    arrow: true,
-  }
-}
 
-function createEventClassesDescription(sortedHistogramEntries: [string, number][]) {
+function createEventClassesDescription(sortedHistogramEntries: [string, number][]): string[] {
   let currentSum = sortedHistogramEntries.reduce((a, b) => a + b[1], 0);
 
   return sortedHistogramEntries.map((entry) => {

Ficus/src/front/FicusFrontend/FicusDashboard/Npm/src/tooltip.ts

@@ -0,0 +1,21 @@
+import {Props} from "tippy.js";
+
+export function createTippyTooltipProps(text: string): Partial<Props> {
+  return {
+    appendTo: document.fullscreenElement ? document.fullscreenElement : undefined,
+    content: `
+                <div style="padding: 10px;
+                            background: black;
+                            color: white;
+                            border-radius: 5px;
+                            width: fit-content;
+                            white-space: wrap">
+                    ${text}
+                </div>
+               `,
+    allowHTML: true,
+    zIndex: Number.MAX_VALUE,
+    duration: 0,
+    arrow: true,
+  }
+}