9503489596

Committed 13 Jun 2024 04:41PM UTC coverage: 31.904% (+0.05%) from 31.851%

Build # 9503489596

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9395 from ForumMagnum/comments-toc-af-karma

Comments ToC shows AF karma on AF, rather than LW karma

Run Details

4816 of 39340 branches covered (12.24%)

Branch coverage included in aggregate %.

1 of 2 new or added lines in 1 file covered. (50.0%)

1 existing line in 1 file now uncovered.

27992 of 63492 relevant lines covered (44.09%)

180.32 hits per line

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

18.42

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

import React 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 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: 24,
    paddingTop: 16,
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
    marginBottom: 8,
    display: 'block'
  },
  tocPostedAt: {
    color: theme.palette.link.tocLink
  },
  highlightUnread: {
    paddingLeft: 4,
    marginLeft: -7,
    borderLeft: `solid 3px ${theme.palette.secondary.main}`
  },
})

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

  if (flattenedComments.length === 0) return null;
  
  if (!commentsTableOfContentsEnabled) {
    return null;
  }
  
  return <div className={classes.root}>
    <TableOfContentsRow key="postTitle"
      href="#"
      onClick={ev => {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }}
      highlighted={highlightedLandmarkName==="above"}
      title
      fullHeight
      commentToC
    >
      <span className={classes.postTitle}>
        {post.title?.trim()}
      </span>
      {post.postedAt && <div className={classes.tocPostedAt}>
        <FormatDate date={post.postedAt} format={"Do MMM YYYY"} />
      </div>}
    </TableOfContentsRow>

    {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 });
        }

        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 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 styles = (theme: ThemeType): JssStyles => ({	1✔
14	root: {
15	color: theme.palette.text.dim,
16	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
17	'& .TableOfContentsRow-title': {
18	borderBottom: "none",
19	},
20	},
21	comment: {
22	display: "inline-flex",
23	},
24	commentKarma: {
25	width: 20,
26	textAlign: "right",
27	marginRight: 4,
28	},
29	commentAuthor: {
30	},
31	collapseButtonWrapper: {
32	marginLeft: 4,
33	height: 24,
34	},
35	collapseButton: {
36	"&:hover": {
37	background: theme.palette.greyAlpha(0.1),
38	borderRadius: 8,
39	},
40	},
41	collapseButtonExpanded: {
42	},
43	collapseButtonCollapsed: {
44	transform: "rotate(-90deg)",
45	},
46	postTitle: {
47	minHeight: 24,
48	paddingTop: 16,
49	...theme.typography.postStyle,
50	...theme.typography.smallCaps,
51	fontSize: "1.3rem",
52	marginBottom: 8,
53	display: 'block'
54	},
55	tocPostedAt: {
56	color: theme.palette.link.tocLink
57	},
58	highlightUnread: {
59	paddingLeft: 4,
60	marginLeft: -7,
61	borderLeft: `solid 3px ${theme.palette.secondary.main}`
62	},
63	})
64
65	const CommentsTableOfContents = ({commentTree, answersTree, post, highlightDate, classes}: {	1✔
66	commentTree?: CommentTreeNode<CommentsList>[],
67	answersTree?: CommentTreeNode<CommentsList>[],
68	post: PostsWithNavigation \| PostsWithNavigationAndRevision,
69	highlightDate: Date\|undefined,
70	classes: ClassesType,
71	}) => {
72	const { TableOfContentsRow, FormatDate } = Components;	×
73	const flattenedComments = flattenCommentTree([	×
74	...(answersTree ?? []),	×
75	...(commentTree ?? [])	×
76	]);
77	const { landmarkName: highlightedLandmarkName } = useScrollHighlight(	×
78	flattenedComments.map(comment => commentIdToLandmark(comment._id))	×
79	);
80
81	if (flattenedComments.length === 0) return null;	×
82
83	if (!commentsTableOfContentsEnabled) {	×
84	return null;	×
85	}
86
87	return <div className={classes.root}>	×
88	<TableOfContentsRow key="postTitle"
89	href="#"
90	onClick={ev => {
91	window.scrollTo({	×
92	top: 0,
93	behavior: "smooth"
94	});
95	}}
96	highlighted={highlightedLandmarkName==="above"}
97	title
98	fullHeight
99	commentToC
100	>
101	<span className={classes.postTitle}>
102	{post.title?.trim()}	×
103	</span>
104	{post.postedAt && <div className={classes.tocPostedAt}>	×
105	<FormatDate date={post.postedAt} format={"Do MMM YYYY"} />
106	</div>}
107	</TableOfContentsRow>
108
109	{answersTree && answersTree.map(answer => <>	×
110	<ToCCommentBlock
111	key={answer.item._id}
112	commentTree={answer} indentLevel={1} classes={classes}
113	highlightedCommentId={highlightedLandmarkName}
114	highlightDate={highlightDate}
115	/>
116	<Components.TableOfContentsDivider/>
117	</>)}
118	{commentTree && commentTree.map(comment => <ToCCommentBlock	×
119	key={comment.item._id}
120	commentTree={comment}
121	indentLevel={1}
122	highlightDate={highlightDate}
123	highlightedCommentId={highlightedLandmarkName}
124	classes={classes}
125	/>)}
126	</div>
127	}
128
129	export function commentIdToLandmark(commentId: string): ScrollHighlightLandmark {
130	return {	×
131	landmarkName: commentId,
132	elementId: commentId,
133	position: "topOfElement",
134	offset: 25, //approximate distance from top-border of a comment to the center of the metadata line
135	}
136	}
137
138	const ToCCommentBlock = ({commentTree, indentLevel, highlightedCommentId, highlightDate, classes}: {	1✔
139	commentTree: CommentTreeNode<CommentsList>,
140	indentLevel: number,
141	highlightedCommentId: string\|null,
142	highlightDate: Date\|undefined,
143	classes: ClassesType,
144	}) => {
145	const { UsersNameDisplay, TableOfContentsRow } = Components;	×
146	const navigate = useNavigate();	×
147	const location = useLocation();	×
148	const { query } = location;	×
149	const comment = commentTree.item;	×
150
NEW 151	const score = forumTypeSetting.get() === "AlignmentForum"	×
152	? comment.afBaseScore	×
153	: comment.baseScore;
154
UNCOV 155	return <div>	×
156	<TableOfContentsRow
157	indentLevel={indentLevel}
158	highlighted={highlightedCommentId===comment._id}
159	dense
160	href={"#"+comment._id}
161	onClick={ev => {
162	const commentTop = getLandmarkY(commentIdToLandmark(comment._id));	×
163	if (commentTop) {	×
164	// Add window.scrollY because window.scrollTo takes a relative scroll distance
165	// rather than an absolute scroll position, and a +1 because of rounding issues
166	// that otherwise cause us to wind up just above the comment such that the ToC
167	// highlights the wrong one.
168	const y = commentTop + window.scrollY - getCurrentSectionMark() + 1;	×
169	window.scrollTo({ top: y });	×
170	}
171
172	delete query.commentId;	×
173	navigate({	×
174	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
175	hash: `#${comment._id}`,
176	});
177	ev.stopPropagation();	×
178	ev.preventDefault();	×
179	}}
180	>
181	<span className={classNames(classes.comment, {
182	[classes.highlightUnread]: highlightDate && new Date(comment.postedAt) > new Date(highlightDate),	×
183	})}>
184	<span className={classes.commentKarma}>{score}</span>
185	<span className={classes.commentAuthor}>
186	<UsersNameDisplay user={comment.user} simple/>
187	</span>
188	</span>
189	</TableOfContentsRow>
190
191	{commentTree.children.map(child =>
192	<ToCCommentBlock	×
193	key={child.item._id}
194	highlightedCommentId={highlightedCommentId}
195	highlightDate={highlightDate}
196	commentTree={child}
197	indentLevel={indentLevel+1}
198	classes={classes}
199	/>
200	)}
201	</div>
202	}
203
204	function flattenCommentTree(commentTree: CommentTreeNode<CommentsList>[]): CommentsList[] {
205	let result: CommentsList[] = [];	×
206
207	function visitComment(c: CommentTreeNode<CommentsList>) {
208	if (c.item) {	×
209	result.push(c.item);	×
210	}
211	for (const child of c.children) {	×
212	visitComment(child);	×
213	}
214	}
215
216	for (let comment of commentTree)	×
217	visitComment(comment);	×
218
219	return result;	×
220	}
221
222
223	const CommentsTableOfContentsComponent = registerComponent('CommentsTableOfContents', CommentsTableOfContents, { styles });	1✔
224
225	declare global {
226	interface ComponentTypes {
227	CommentsTableOfContents: typeof CommentsTableOfContentsComponent
228	}
229	}

ForumMagnum / ForumMagnum / 9503489596

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