10382713701

Committed 14 Aug 2024 06:41AM UTC coverage: 32.053% (+0.03%) from 32.024%

Build # 10382713701

Build Type

Pull #9556

github

Committed by

Discordius

Commit Message

Remove ToC on very short posts

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4941 of 40219 branches covered (12.29%)

Branch coverage included in aggregate %.

75 of 146 new or added lines in 27 files covered. (51.37%)

6 existing lines in 5 files now uncovered.

28815 of 65093 relevant lines covered (44.27%)

180.33 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

17.05

/packages/lesswrong/components/comments/CommentsTableOfContents.tsx

import React, { useEffect, useRef, useState } from 'react';
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { CommentTreeNode } from '../../lib/utils/unflatten';
import { getCurrentSectionMark, getLandmarkY, ScrollHighlightLandmark, useScrollHighlight } from '../hooks/useScrollHighlight';
import { useLocation } from '../../lib/routeUtil';
import isEmpty from 'lodash/isEmpty';
import qs from 'qs'
import { commentsTableOfContentsEnabled } from '../../lib/betas';
import { useNavigate } from '../../lib/reactRouterWrapper';
import classNames from 'classnames';
import { forumTypeSetting } from '@/lib/instanceSettings';

const COMMENTS_TITLE_CLASS_NAME = 'CommentsTableOfContentsTitle';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    color: theme.palette.text.dim,
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
  },
  comment: {
    display: "inline-flex",
  },
  commentKarma: {
    width: 20,
    textAlign: "right",
    marginRight: 4,
  },
  commentAuthor: {
  },
  collapseButtonWrapper: {
    marginLeft: 4,
    height: 24,
  },
  collapseButton: {
    "&:hover": {
      background: theme.palette.greyAlpha(0.1),
      borderRadius: 8,
    },
  },
  collapseButtonExpanded: {
  },
  collapseButtonCollapsed: {
    transform: "rotate(-90deg)",
  },
  postTitle: {
    minHeight: 76,
    paddingTop: 16,
    ...theme.typography.body2,
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    cursor: "pointer",
    fontSize: "1.3rem",
    paddingBottom: 16,
    display: 'flex',
    alignItems: 'center',
  },
  tocPostedAt: {
    color: theme.palette.link.tocLink
  },
  highlightUnread: {
    paddingLeft: 4,
    marginLeft: -7,
    borderLeft: `solid 3px ${theme.palette.secondary.main}`
  },
  '@global': {
    // Hard-coding this class name as a workaround for one of the JSS plugins being incapable of parsing a self-reference ($titleContainer) while inside @global
    [`body:has(.headroom--pinned) .${COMMENTS_TITLE_CLASS_NAME}, body:has(.headroom--unfixed) .${COMMENTS_TITLE_CLASS_NAME}`]: {
      opacity: 0,
    }
  }
})

const CommentsTableOfContents = ({commentTree, answersTree, post, highlightDate, classes}: {
  commentTree?: CommentTreeNode<CommentsList>[],
  answersTree?: CommentTreeNode<CommentsList>[],
  post: PostsWithNavigation | PostsWithNavigationAndRevision,
  highlightDate: Date|undefined,
  classes: ClassesType,
}) => {
  const flattenedComments = flattenCommentTree([
    ...(answersTree ?? []),
    ...(commentTree ?? [])
  ]);
  const { landmarkName: highlightedLandmarkName } = useScrollHighlight(
    flattenedComments.map(comment => commentIdToLandmark(comment._id))
  );

  const [isPinned, setIsPinned] = useState(true);
  const titleRef = useRef<HTMLAnchorElement|null>(null);
  const hideTitleContainer = isPinned;

  useEffect(() => {
    const target = titleRef.current;
    if (target) {
      // To prevent the comment ToC title from being hidden when scrolling up
      // This relies on the complementary `top: -1px` styling in `MultiToCLayout` on the parent sticky element
      const observer = new IntersectionObserver(([e]) => {
        const newIsPinned = e.intersectionRatio < 1;
        setIsPinned(newIsPinned);
      }, { threshold: [1] });
  
      observer.observe(target);
      return () => observer.unobserve(target);
    }
  }, []);

  if (flattenedComments.length === 0) return null;
  
  if (!commentsTableOfContentsEnabled) {
    return null;
  }

  return <div className={classes.root}>
      <a id="comments-table-of-contents" href="#" className={classNames(classes.postTitle, {[COMMENTS_TITLE_CLASS_NAME]: hideTitleContainer})}
      onClick={ev => {
        ev.preventDefault();
        window.scrollTo({ top: 0, behavior: "smooth" });
      }} ref={titleRef}>
        {post.title?.trim()}
      </a>

    {answersTree && answersTree.map(answer => <>
      <ToCCommentBlock
        key={answer.item._id}
        commentTree={answer} indentLevel={1} classes={classes}
        highlightedCommentId={highlightedLandmarkName}
        highlightDate={highlightDate}
      />
      <Components.TableOfContentsDivider/>
    </>)}
    {commentTree && commentTree.map(comment => <ToCCommentBlock
      key={comment.item._id}
      commentTree={comment}
      indentLevel={1}
      highlightDate={highlightDate}
      highlightedCommentId={highlightedLandmarkName}
      classes={classes}
    />)}
  </div>
}

export function commentIdToLandmark(commentId: string): ScrollHighlightLandmark {
  return {
    landmarkName: commentId,
    elementId: commentId,
    position: "topOfElement",
    offset: 25, //approximate distance from top-border of a comment to the center of the metadata line
  }
}

const ToCCommentBlock = ({commentTree, indentLevel, highlightedCommentId, highlightDate, classes}: {
  commentTree: CommentTreeNode<CommentsList>,
  indentLevel: number,
  highlightedCommentId: string|null,
  highlightDate: Date|undefined,
  classes: ClassesType,
}) => {
  const { UsersNameDisplay, TableOfContentsRow } = Components;
  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;
  const comment = commentTree.item;
  
  const score = forumTypeSetting.get() === "AlignmentForum"
    ? comment.afBaseScore
    : comment.baseScore;
  
  return <div>
    <TableOfContentsRow
      indentLevel={indentLevel}
      highlighted={highlightedCommentId===comment._id}
      dense
      href={"#"+comment._id}
      onClick={ev => {
        const commentTop = getLandmarkY(commentIdToLandmark(comment._id));
        if (commentTop) {
          // Add window.scrollY because window.scrollTo takes a relative scroll distance
          // rather than an absolute scroll position, and a +1 because of rounding issues
          // that otherwise cause us to wind up just above the comment such that the ToC
          // highlights the wrong one.
          const y = commentTop + window.scrollY - getCurrentSectionMark() + 1;
          window.scrollTo({ top: y, behavior: "smooth" });
        }

        delete query.commentId;
        navigate({
          search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,
          hash: `#${comment._id}`,
        });
        ev.stopPropagation();
        ev.preventDefault();
      }}
    >
      <span className={classNames(classes.comment, {
        [classes.highlightUnread]: highlightDate && new Date(comment.postedAt) > new Date(highlightDate),
      })}>
        <span className={classes.commentKarma}>{score}</span>
        <span className={classes.commentAuthor}>
          <UsersNameDisplay user={comment.user} simple/>
        </span>
      </span>
    </TableOfContentsRow>
    
    {commentTree.children.map(child =>
      <ToCCommentBlock
        key={child.item._id}
        highlightedCommentId={highlightedCommentId}
        highlightDate={highlightDate}
        commentTree={child}
        indentLevel={indentLevel+1}
        classes={classes}
      />
    )}
  </div>
}

function flattenCommentTree(commentTree: CommentTreeNode<CommentsList>[]): CommentsList[] {
  let result: CommentsList[] = [];
  
  function visitComment(c: CommentTreeNode<CommentsList>) {
    if (c.item) {
      result.push(c.item);
    }
    for (const child of c.children) {
      visitComment(child);
    }
  }
  
  for (let comment of commentTree)
    visitComment(comment);
  
  return result;
}


const CommentsTableOfContentsComponent = registerComponent('CommentsTableOfContents', CommentsTableOfContents, { styles });

declare global {
  interface ComponentTypes {
    CommentsTableOfContents: typeof CommentsTableOfContentsComponent
  }
}

1	import React, { useEffect, useRef, useState } from 'react';	3✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { CommentTreeNode } from '../../lib/utils/unflatten';
4	import { getCurrentSectionMark, getLandmarkY, ScrollHighlightLandmark, useScrollHighlight } from '../hooks/useScrollHighlight';	1✔
5	import { useLocation } from '../../lib/routeUtil';	1✔
6	import isEmpty from 'lodash/isEmpty';	1✔
7	import qs from 'qs'	1✔
8	import { commentsTableOfContentsEnabled } from '../../lib/betas';	1✔
9	import { useNavigate } from '../../lib/reactRouterWrapper';	1✔
10	import classNames from 'classnames';	1✔
11	import { forumTypeSetting } from '@/lib/instanceSettings';	1✔
12
13	const COMMENTS_TITLE_CLASS_NAME = 'CommentsTableOfContentsTitle';	1✔
14
15	const styles = (theme: ThemeType): JssStyles => ({	1✔
16	root: {
17	color: theme.palette.text.dim,
18	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
19	'& .TableOfContentsRow-title': {
20	borderBottom: "none",
21	},
22	},
23	comment: {
24	display: "inline-flex",
25	},
26	commentKarma: {
27	width: 20,
28	textAlign: "right",
29	marginRight: 4,
30	},
31	commentAuthor: {
32	},
33	collapseButtonWrapper: {
34	marginLeft: 4,
35	height: 24,
36	},
37	collapseButton: {
38	"&:hover": {
39	background: theme.palette.greyAlpha(0.1),
40	borderRadius: 8,
41	},
42	},
43	collapseButtonExpanded: {
44	},
45	collapseButtonCollapsed: {
46	transform: "rotate(-90deg)",
47	},
48	postTitle: {
49	minHeight: 76,
50	paddingTop: 16,
51	...theme.typography.body2,
52	...theme.typography.postStyle,
53	...theme.typography.smallCaps,
54	cursor: "pointer",
55	fontSize: "1.3rem",
56	paddingBottom: 16,
57	display: 'flex',
58	alignItems: 'center',
59	},
60	tocPostedAt: {
61	color: theme.palette.link.tocLink
62	},
63	highlightUnread: {
64	paddingLeft: 4,
65	marginLeft: -7,
66	borderLeft: `solid 3px ${theme.palette.secondary.main}`
67	},
68	'@global': {
69	// Hard-coding this class name as a workaround for one of the JSS plugins being incapable of parsing a self-reference ($titleContainer) while inside @global
70	[`body:has(.headroom--pinned) .${COMMENTS_TITLE_CLASS_NAME}, body:has(.headroom--unfixed) .${COMMENTS_TITLE_CLASS_NAME}`]: {
71	opacity: 0,
72	}
73	}
74	})
75
76	const CommentsTableOfContents = ({commentTree, answersTree, post, highlightDate, classes}: {	1✔
77	commentTree?: CommentTreeNode<CommentsList>[],
78	answersTree?: CommentTreeNode<CommentsList>[],
79	post: PostsWithNavigation \| PostsWithNavigationAndRevision,
80	highlightDate: Date\|undefined,
81	classes: ClassesType,
82	}) => {
83	const flattenedComments = flattenCommentTree([	×
84	...(answersTree ?? []),	×
85	...(commentTree ?? [])	×
86	]);
87	const { landmarkName: highlightedLandmarkName } = useScrollHighlight(	×
88	flattenedComments.map(comment => commentIdToLandmark(comment._id))	×
89	);
90
NEW 91	const [isPinned, setIsPinned] = useState(true);	×
NEW 92	const titleRef = useRef<HTMLAnchorElement\|null>(null);	×
NEW 93	const hideTitleContainer = isPinned;	×
94
NEW 95	useEffect(() => {	×
NEW 96	const target = titleRef.current;	×
NEW 97	if (target) {	×
98	// To prevent the comment ToC title from being hidden when scrolling up
99	// This relies on the complementary `top: -1px` styling in `MultiToCLayout` on the parent sticky element
NEW 100	const observer = new IntersectionObserver(([e]) => {	×
NEW 101	const newIsPinned = e.intersectionRatio < 1;	×
NEW 102	setIsPinned(newIsPinned);	×
103	}, { threshold: [1] });
104
NEW 105	observer.observe(target);	×
NEW 106	return () => observer.unobserve(target);	×
107	}
108	}, []);
109
UNCOV 110	if (flattenedComments.length === 0) return null;	×
111
112	if (!commentsTableOfContentsEnabled) {	×
113	return null;	×
114	}
115
116	return <div className={classes.root}>	×
117	<a id="comments-table-of-contents" href="#" className={classNames(classes.postTitle, {[COMMENTS_TITLE_CLASS_NAME]: hideTitleContainer})}
118	onClick={ev => {
NEW 119	ev.preventDefault();	×
NEW 120	window.scrollTo({ top: 0, behavior: "smooth" });	×
121	}} ref={titleRef}>
122	{post.title?.trim()}	×
123	</a>
124
125	{answersTree && answersTree.map(answer => <>	×
126	<ToCCommentBlock
127	key={answer.item._id}
128	commentTree={answer} indentLevel={1} classes={classes}
129	highlightedCommentId={highlightedLandmarkName}
130	highlightDate={highlightDate}
131	/>
132	<Components.TableOfContentsDivider/>
133	</>)}
134	{commentTree && commentTree.map(comment => <ToCCommentBlock	×
135	key={comment.item._id}
136	commentTree={comment}
137	indentLevel={1}
138	highlightDate={highlightDate}
139	highlightedCommentId={highlightedLandmarkName}
140	classes={classes}
141	/>)}
142	</div>
143	}
144
145	export function commentIdToLandmark(commentId: string): ScrollHighlightLandmark {
146	return {	×
147	landmarkName: commentId,
148	elementId: commentId,
149	position: "topOfElement",
150	offset: 25, //approximate distance from top-border of a comment to the center of the metadata line
151	}
152	}
153
154	const ToCCommentBlock = ({commentTree, indentLevel, highlightedCommentId, highlightDate, classes}: {	1✔
155	commentTree: CommentTreeNode<CommentsList>,
156	indentLevel: number,
157	highlightedCommentId: string\|null,
158	highlightDate: Date\|undefined,
159	classes: ClassesType,
160	}) => {
161	const { UsersNameDisplay, TableOfContentsRow } = Components;	×
162	const navigate = useNavigate();	×
163	const location = useLocation();	×
164	const { query } = location;	×
165	const comment = commentTree.item;	×
166
167	const score = forumTypeSetting.get() === "AlignmentForum"	×
168	? comment.afBaseScore	×
169	: comment.baseScore;
170
171	return <div>	×
172	<TableOfContentsRow
173	indentLevel={indentLevel}
174	highlighted={highlightedCommentId===comment._id}
175	dense
176	href={"#"+comment._id}
177	onClick={ev => {
178	const commentTop = getLandmarkY(commentIdToLandmark(comment._id));	×
179	if (commentTop) {	×
180	// Add window.scrollY because window.scrollTo takes a relative scroll distance
181	// rather than an absolute scroll position, and a +1 because of rounding issues
182	// that otherwise cause us to wind up just above the comment such that the ToC
183	// highlights the wrong one.
184	const y = commentTop + window.scrollY - getCurrentSectionMark() + 1;	×
NEW 185	window.scrollTo({ top: y, behavior: "smooth" });	×
186	}
187
188	delete query.commentId;	×
189	navigate({	×
190	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
191	hash: `#${comment._id}`,
192	});
193	ev.stopPropagation();	×
194	ev.preventDefault();	×
195	}}
196	>
197	<span className={classNames(classes.comment, {
198	[classes.highlightUnread]: highlightDate && new Date(comment.postedAt) > new Date(highlightDate),	×
199	})}>
200	<span className={classes.commentKarma}>{score}</span>
201	<span className={classes.commentAuthor}>
202	<UsersNameDisplay user={comment.user} simple/>
203	</span>
204	</span>
205	</TableOfContentsRow>
206
207	{commentTree.children.map(child =>
208	<ToCCommentBlock	×
209	key={child.item._id}
210	highlightedCommentId={highlightedCommentId}
211	highlightDate={highlightDate}
212	commentTree={child}
213	indentLevel={indentLevel+1}
214	classes={classes}
215	/>
216	)}
217	</div>
218	}
219
220	function flattenCommentTree(commentTree: CommentTreeNode<CommentsList>[]): CommentsList[] {
221	let result: CommentsList[] = [];	×
222
223	function visitComment(c: CommentTreeNode<CommentsList>) {
224	if (c.item) {	×
225	result.push(c.item);	×
226	}
227	for (const child of c.children) {	×
228	visitComment(child);	×
229	}
230	}
231
232	for (let comment of commentTree)	×
233	visitComment(comment);	×
234
235	return result;	×
236	}
237
238
239	const CommentsTableOfContentsComponent = registerComponent('CommentsTableOfContents', CommentsTableOfContents, { styles });	1✔
240
241	declare global {
242	interface ComponentTypes {
243	CommentsTableOfContents: typeof CommentsTableOfContentsComponent
244	}
245	}

ForumMagnum / ForumMagnum / 10382713701

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous