lichess-org · ornicar · Mar 20, 2023 · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/ui/analyse/src/treeView/columnView.ts b/ui/analyse/src/treeView/columnView.ts
@@ -4,7 +4,6 @@ import { MaybeVNodes } from 'common/snabbdom';
 import { fixCrazySan } from 'chess';
 import { path as treePath, ops as treeOps } from 'tree';
 import * as moveView from '../view/moveView';
-import { authorText as commentAuthorText } from '../study/studyComments';
 import AnalyseCtrl from '../ctrl';
 import { ConcealOf, Conceal } from '../interfaces';
 import {
@@ -13,12 +12,11 @@ import {
   nodeClasses,
   findCurrentPath,
   renderInlineCommentsOf,
-  truncateComment,
   retroLine,
   Ctx as BaseCtx,
   Opts as BaseOpts,
+  renderComment,
 } from './common';
-import { enrichText, innerHTML } from 'common/richText';
 
 interface Ctx extends BaseCtx {
   concealOf: ConcealOf;
@@ -48,7 +46,7 @@ function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes |
   if (conceal === 'hide') return;
   if (opts.isMainline) {
     const isWhite = main.ply % 2 === 1,
-      commentTags = renderMainlineCommentsOf(ctx, main, conceal, true).filter(nonEmpty);
+      commentTags = renderMainlineCommentsOf(ctx, main, conceal, true, opts.parentPath + main.id).filter(nonEmpty);
     if (!cs[1] && isEmpty(commentTags) && !main.forceVariation)
       return ((isWhite ? [moveView.renderIndex(main.ply, false)] : []) as MaybeVNodes).concat(
         renderMoveAndChildrenOf(ctx, main, {
@@ -178,7 +176,7 @@ function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVN
       ),
     ];
   return ([renderMoveOf(ctx, node, opts)] as MaybeVNodes)
-    .concat(renderInlineCommentsOf(ctx, node))
+    .concat(renderInlineCommentsOf(ctx, node, path))
     .concat(opts.inline ? renderInline(ctx, opts.inline, opts) : null)
     .concat(
       renderChildrenOf(ctx, node, {
@@ -203,23 +201,24 @@ function renderInline(ctx: Ctx, node: Tree.Node, opts: Opts): VNode {
   );
 }
 
-function renderMainlineCommentsOf(ctx: Ctx, node: Tree.Node, conceal: Conceal, withColor: boolean): MaybeVNodes {
+function renderMainlineCommentsOf(
+  ctx: Ctx,
+  node: Tree.Node,
+  conceal: Conceal,
+  withColor: boolean,
+  path: string
+): MaybeVNodes {
   if (!ctx.ctrl.showComments || isEmpty(node.comments)) return [];
 
   const colorClass = withColor ? (node.ply % 2 === 0 ? '.black ' : '.white ') : '';
 
   return node.comments!.map(comment => {
-    if (comment.by === 'lichess' && !ctx.showComputer) return;
     let sel = 'comment' + colorClass;
     if (comment.text.startsWith('Inaccuracy.')) sel += '.inaccuracy';
     else if (comment.text.startsWith('Mistake.')) sel += '.mistake';
     else if (comment.text.startsWith('Blunder.')) sel += '.blunder';
     if (conceal) sel += '.' + conceal;
-    const by = node.comments![1] ? `<span class="by">${commentAuthorText(comment.by)}</span>` : '',
-      truncated = truncateComment(comment.text, 400, ctx);
-    return h(sel, {
-      hook: innerHTML(truncated, text => by + enrichText(text)),
-    });
+    return renderComment(comment, node.comments!, sel, ctx, path, 400);
   });
 }
 
@@ -240,7 +239,8 @@ export default function (ctrl: AnalyseCtrl, concealOf?: ConcealOf): VNode {
     showEval: ctrl.showComputer(),
     currentPath: findCurrentPath(ctrl),
   };
-  const commentTags = renderMainlineCommentsOf(ctx, root, false, false);
+  //I hardcoded the root path, I'm not sure if there's a better way for that to be done
+  const commentTags = renderMainlineCommentsOf(ctx, root, false, false, '');
   return h(
     'div.tview2.tview2-column',
     {

diff --git a/ui/analyse/src/treeView/common.ts b/ui/analyse/src/treeView/common.ts
@@ -100,20 +100,44 @@ export function findCurrentPath(c: AnalyseCtrl): Tree.Path | undefined {
   );
 }
 
-export function renderInlineCommentsOf(ctx: Ctx, node: Tree.Node): MaybeVNodes {
+export const truncatedComment = (path: string, ctx: Ctx): Hooks => ({
+  insert(vnode: VNode) {
+    (vnode.elm as HTMLElement).addEventListener('click', () => {
+      ctx.ctrl.userJumpIfCan(path);
+      // Select the comments tab in the underboard
+      ctx.ctrl.study?.vm.toolTab('comments');
+      //Redraw everything
+      ctx.ctrl.redraw();
+      // Scroll down to the comments tab
+      $('.analyse__underboard')[0]?.scrollIntoView();
+    });
+  },
+});
+
+export function renderInlineCommentsOf(ctx: Ctx, node: Tree.Node, path: string): MaybeVNodes {
   if (!ctx.ctrl.showComments || isEmpty(node.comments)) return [];
   return node
-    .comments!.map(comment => {
-      if (comment.by === 'lichess' && !ctx.showComputer) return;
-      const by = node.comments![1] ? `<span class="by">${commentAuthorText(comment.by)}</span>` : '',
-        truncated = truncateComment(comment.text, 300, ctx);
-      return h('comment', {
-        hook: innerHTML(truncated, text => by + enrichText(text)),
-      });
-    })
+    .comments!.map(comment => renderComment(comment, node.comments!, 'comment', ctx, path, 300))
     .filter(nonEmpty);
 }
 
+export const renderComment = (
+  comment: Tree.Comment,
+  others: Tree.Comment[],
+  sel: string,
+  ctx: Ctx,
+  path: string,
+  maxLength: number
+) => {
+  if (comment.by === 'lichess' && !ctx.showComputer) return;
+  const by = !others[1] ? '' : `<span class="by">${commentAuthorText(comment.by)}</span>`,
+    truncated = truncateComment(comment.text, maxLength, ctx),
+    htmlHook = innerHTML(truncated, text => by + enrichText(text));
+  return truncated.length < comment.text.length
+    ? h(`${sel}.truncated`, { hook: truncatedComment(path, ctx) }, [h('span', { hook: htmlHook })])
+    : h(sel, { hook: htmlHook });
+};
+
 export function truncateComment(text: string, len: number, ctx: Ctx) {
   return ctx.truncateComments && text.length > len ? text.slice(0, len - 10) + ' [...]' : text;
 }

diff --git a/ui/analyse/src/treeView/inlineView.ts b/ui/analyse/src/treeView/inlineView.ts
@@ -27,7 +27,7 @@ function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes |
                 isMainline: true,
                 withIndex: opts.withIndex,
               }),
-              ...renderInlineCommentsOf(ctx, main),
+              ...renderInlineCommentsOf(ctx, main, opts.parentPath),
             ]),
         h(
           'interrupt',
@@ -84,7 +84,7 @@ function renderLines(ctx: Ctx, nodes: Tree.Node[], opts: Opts): VNode {
 
 function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes {
   const path = opts.parentPath + node.id,
-    comments = renderInlineCommentsOf(ctx, node);
+    comments = renderInlineCommentsOf(ctx, node, path);
   if (opts.truncate === 0) return [h('move', { attrs: { p: path } }, '[...]')];
   return ([renderMoveOf(ctx, node, opts)] as MaybeVNodes)
     .concat(comments)
@@ -144,7 +144,7 @@ export default function (ctrl: AnalyseCtrl): VNode {
       hook: mainHook(ctrl),
     },
     [
-      ...renderInlineCommentsOf(ctx, ctrl.tree.root),
+      ...renderInlineCommentsOf(ctx, ctrl.tree.root, ''),
       ...(renderChildrenOf(ctx, ctrl.tree.root, {
         parentPath: '',
         isMainline: true,

diff --git a/ui/tree/css/_tree.scss b/ui/tree/css/_tree.scss
@@ -82,6 +82,10 @@ $c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
     vertical-align: top;
   }
 
+  comment.truncated {
+    cursor: pointer;
+  }
+
   move.current {
     border: 1px solid $c-accent;
   }