From 8b6ebe21ec33bb700a49e2f796f0fd0caa15c32a Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Sun, 5 Jun 2022 14:14:56 -0700
Subject: [PATCH] compact the UI for long entity ids

---
 web/app/cad/craft/ui/ModelButtonBehaviour.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/app/cad/craft/ui/ModelButtonBehaviour.tsx b/web/app/cad/craft/ui/ModelButtonBehaviour.tsx
index 849c7bc5..df2e09d2 100644
--- a/web/app/cad/craft/ui/ModelButtonBehaviour.tsx
+++ b/web/app/cad/craft/ui/ModelButtonBehaviour.tsx
@@ -33,7 +33,7 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
   const highlights = useStream(ctx => ctx.highlightService.highlighted$);
 
   let typeLabel = model.TYPE as string;
-  let idLabel = model.id;
+  let idLabel: string = model.id;
   let visibilityOf = model;
   if (model instanceof MSketchObject) {
     typeLabel = model.sketchPrimitive.constructor.name
@@ -50,7 +50,8 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
   const onMouseLeave= () => ctx.highlightService.unHighlight(model.id);
 
   const label = <>
-    <ModelIcon entityType={model.TYPE} style={{marginRight: 5}} /> {typeLabel} {idLabel}
+    <ModelIcon entityType={model.TYPE} style={{marginRight: 5}} />
+    <SafeLength text={idLabel} />
   </>;
 
   const controls = <>
@@ -67,3 +68,15 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
     onMouseLeave
   });
 }
+
+function SafeLength(props: { text: string }): any {
+
+  const limit = 40;
+  const mid = limit / 2;
+  const text = props.text;
+  if (text.length > limit) {
+    return <span title={text}>{text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}</span>;
+  } else {
+    return text;
+  }
+}