8663635357

Committed 12 Apr 2024 02:26PM UTC coverage: 32.002% (+0.04%) from 31.962%

Build # 8663635357

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9075 from ForumMagnum/wh-misc-posts-layout-shift-2024-04

Posts page layout shift fixes: column width, tag reordering

Run Details

4641 of 37789 branches covered (12.28%)

Branch coverage included in aggregate %.

22 of 33 new or added lines in 7 files covered. (66.67%)

2 existing lines in 2 files now uncovered.

27042 of 61214 relevant lines covered (44.18%)

183.03 hits per line

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

9.36

/packages/lesswrong/components/posts/PostsPreviewTooltip/LWPostsPreviewTooltip.tsx

import { registerComponent, Components } from '../../../lib/vulcan-lib';
import React, { useState } from 'react';
import { truncate } from '../../../lib/editor/ellipsize';
import { postGetPageUrl, postGetKarma, postGetCommentCountStr } from '../../../lib/collections/posts/helpers';
import Card from '@material-ui/core/Card';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { Link } from '../../../lib/reactRouterWrapper';
import { useSingle } from '../../../lib/crud/withSingle';
import { useForeignApolloClient } from '../../hooks/useForeignApolloClient';
import { POST_PREVIEW_ELEMENT_CONTEXT, POST_PREVIEW_WIDTH } from './helpers';
import type { PostsPreviewTooltipProps } from './PostsPreviewTooltip';

export const highlightSimplifiedStyles = {
  '& img': {
    display:"none"
  },
  '& hr': {
    display: "none"
  }
}

const highlightStyles = (theme: ThemeType) => ({
  marginTop: theme.spacing.unit*2.5,
  marginBottom: theme.spacing.unit*1.5,
  marginRight: theme.spacing.unit/2,
  wordBreak: 'break-word',
  fontSize: "1.1rem",
  '& h1': {
    fontSize: "1.2rem"
  },
  '& h2': {
    fontSize: "1.2rem"
  },
  '& h3': {
    fontSize: "1.1rem"
  },
  '& li': {
    fontSize: "1.1rem"
  },
  '& .dialogue-message-header': {
    position: 'relative !important',
  },
  ...highlightSimplifiedStyles
})

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    width: POST_PREVIEW_WIDTH,
    position: "relative",
    '& img': {
      maxHeight: "200px"
    },
    [theme.breakpoints.down('xs')]: {
      display: "none"
    },
    '& .expand': {
      color: theme.palette.grey[600],
      fontSize: "1rem",
      cursor: "pointer"
    }
  },
  postPreview: {
    maxHeight: 450,
    padding: theme.spacing.unit*1.5,
    paddingBottom: 0,
    paddingTop: 0
  },
  header: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: theme.spacing.unit*1.5,
    paddingBottom: 0,
  },
  title: {
    marginBottom: -6,
  },
  tooltipInfo: {
    marginLeft: 2,
    ...theme.typography.italic,
    fontSize: "1.1rem",
    color: theme.palette.grey[600],
    display: "flex",
    alignItems: "center"
  },
  highlight: {
    ...highlightStyles(theme)
  },
  comment: {
    marginTop: theme.spacing.unit,
  },
  bookmark: {
    marginTop: -4,
    paddingRight: 4
  },
  continue: {
    color: theme.palette.grey[500],
    fontSize: "1rem",
    marginBottom: theme.spacing.unit,
  },
  wordCount: {
    display: "inline-block"
  },
  metadata: {
    marginLeft: 12,
    paddingTop: 2
  },
  smallText: {
    fontSize: ".9rem",
    color: theme.palette.grey[500],
    marginRight: theme.spacing.unit
  },
})

const getPostCategory = (post: PostsBase) => {
  const categories: Array<string> = [];

  if (post.isEvent) return null
  if (post.curatedDate) categories.push(`Curated Post`)
  if (post.af) categories.push(`AI Alignment Forum Post`);
  if (post.frontpageDate && !post.curatedDate && !post.af) categories.push(`Frontpage Post`)

  if (categories.length > 0)
    return categories.join(', ');
  else if (post.question)
    return "Question";
  else if (post.reviewedByUserId)
    return `Personal Blogpost`
  else
    return null;
}

type LWPostsPreviewTooltipProps = PostsPreviewTooltipProps & {
  classes: ClassesType,
}

const LWPostsPreviewTooltip = ({
  postsList,
  post,
  hash,
  comment,
  dialogueMessageInfo,
  classes,
}: LWPostsPreviewTooltipProps) => {
  const { PostsUserAndCoauthors, PostsTitle, ContentItemBody, CommentsNode, BookmarkButton, FormatDate,
    Loading, ContentStyles, EventTime } = Components
  const [expanded, setExpanded] = useState(false)

  const foreignApolloClient = useForeignApolloClient();
  const isForeign = post?.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere && !!post.fmCrosspost.foreignPostId;
  const {document: postWithHighlight, loading} = useSingle({
    collectionName: "Posts",
    fragmentName: "HighlightWithHash",
    documentId: post?.fmCrosspost?.foreignPostId ?? post?._id,
    skip: !post || (!hash && !!post.contents),
    fetchPolicy: "cache-first",
    extraVariables: { hash: "String" },
    extraVariablesValues: {hash},
    apolloClient: isForeign ? foreignApolloClient : undefined,
  });

  const { dialogueMessageId, dialogueMessageContents } = dialogueMessageInfo ?? {}

  const {document: postWithDialogueMessage} = useSingle({
    collectionName: "Posts",
    fragmentName: "PostWithDialogueMessage",
    documentId: post?.fmCrosspost?.foreignPostId ?? post?._id,
    skip: !post || !dialogueMessageId,
    fetchPolicy: "cache-first",
    extraVariables: { dialogueMessageId: "String" },
    extraVariablesValues: {dialogueMessageId},
    apolloClient: isForeign ? foreignApolloClient : undefined,
  });

  if (!post) return null
  
  const { wordCount = 0, htmlHighlight = "" } = post.contents || {}

  const highlightContents = postWithHighlight?.contents?.htmlHighlightStartingAtHash || post.customHighlight?.html || htmlHighlight

  let highlight;
  if (post.collabEditorDialogue) {
    highlight = postWithDialogueMessage?.dialogueMessageContents ?? dialogueMessageContents ?? highlightContents
  } else if (post.debate) {
    highlight = post.dialogTooltipPreview
  } else {
    highlight = highlightContents
  }

  const renderWordCount = !comment && !post.isEvent && ((wordCount ?? 0) > 0)
  const truncatedHighlight = truncate(highlight, expanded ? 200 : 100, "words", `... <span class="expand">(more)</span>`)

  const renderedComment = comment || post.bestAnswer
  
  let eventLocation = post.onlineEvent ? <div>Online event</div> : null
  if (post.isEvent && post.location) {
    eventLocation = <div>{post.location}</div>
  }
  const postCategory: string|null = getPostCategory(post);

  return <AnalyticsContext pageElementContext={POST_PREVIEW_ELEMENT_CONTEXT}>
      <Card className={classes.root}>
        <div className={classes.header}>
          <div>
            <div className={classes.title}>
              <PostsTitle post={post} wrap showIcons={false} />
            </div>
            <ContentStyles contentType="comment" className={classes.tooltipInfo}>
              { postsList && <span>
                {post.startTime && <EventTime post={post} />}
                {eventLocation}
                {postCategory}
                {postCategory && (post.tags?.length > 0) && " – "}
                {post.tags?.map((tag, i) => <span key={tag._id}>{tag.name}{(i !== (post.tags?.length - 1)) ? ",  " : ""}</span>)}
                {renderWordCount && <span>{" "}<span className={classes.wordCount}>({wordCount} words)</span></span>}
              </span>}
              { !postsList && <>
                {post.user && <PostsUserAndCoauthors post={post}/>}
                <div className={classes.metadata}>
                  <span className={classes.smallText}>{postGetKarma(post)} karma</span>
                  <span className={classes.smallText}>{postGetCommentCountStr(post)}</span>
                  <span className={classes.smallText}>
                    <FormatDate date={post.postedAt}/>
                  </span>
                </div>
              </>}
            </ContentStyles>
          </div>
          { !postsList && <div className={classes.bookmark}>
            <BookmarkButton post={post}/>
          </div>}
        </div>
        {renderedComment
          ? <div className={classes.comment}>
              <CommentsNode
                treeOptions={{
                  post,
                  hideReply: true,
                  forceNotSingleLine: true,
                }}
                truncated
                comment={renderedComment}
                hoverPreview
                forceUnCollapsed
              />
            </div>
          : loading
            ? <Loading/>
            : <div onClick={() => setExpanded(true)} className={classes.postPreview}>
                <ContentStyles contentType="postHighlight" className={classes.highlight}>
                  <ContentItemBody
                    dangerouslySetInnerHTML={{__html: truncatedHighlight }}
                    description={`post ${post._id}`}
                  />
                </ContentStyles>
                {expanded && <Link to={postGetPageUrl(post)}><div className={classes.continue} >
                  (Continue Reading)
                </div></Link>}
              </div>
        }
    </Card>
  </AnalyticsContext>

}

const LWPostsPreviewTooltipComponent = registerComponent('LWPostsPreviewTooltip', LWPostsPreviewTooltip, {styles});

declare global {
  interface ComponentTypes {
    LWPostsPreviewTooltip: typeof LWPostsPreviewTooltipComponent
  }
}

1	import { registerComponent, Components } from '../../../lib/vulcan-lib';	4✔
2	import React, { useState } from 'react';	1✔
3	import { truncate } from '../../../lib/editor/ellipsize';	1✔
4	import { postGetPageUrl, postGetKarma, postGetCommentCountStr } from '../../../lib/collections/posts/helpers';	1✔
5	import Card from '@material-ui/core/Card';	1✔
6	import { AnalyticsContext } from "../../../lib/analyticsEvents";	1✔
7	import { Link } from '../../../lib/reactRouterWrapper';	1✔
8	import { useSingle } from '../../../lib/crud/withSingle';	1✔
9	import { useForeignApolloClient } from '../../hooks/useForeignApolloClient';	1✔
10	import { POST_PREVIEW_ELEMENT_CONTEXT, POST_PREVIEW_WIDTH } from './helpers';	1✔
11	import type { PostsPreviewTooltipProps } from './PostsPreviewTooltip';
12
13	export const highlightSimplifiedStyles = {	1✔
14	'& img': {
15	display:"none"
16	},
17	'& hr': {
18	display: "none"
19	}
20	}
21
22	const highlightStyles = (theme: ThemeType) => ({	1✔
23	marginTop: theme.spacing.unit*2.5,
24	marginBottom: theme.spacing.unit*1.5,
25	marginRight: theme.spacing.unit/2,
26	wordBreak: 'break-word',
27	fontSize: "1.1rem",
28	'& h1': {
29	fontSize: "1.2rem"
30	},
31	'& h2': {
32	fontSize: "1.2rem"
33	},
34	'& h3': {
35	fontSize: "1.1rem"
36	},
37	'& li': {
38	fontSize: "1.1rem"
39	},
40	'& .dialogue-message-header': {
41	position: 'relative !important',
42	},
43	...highlightSimplifiedStyles
44	})
45
46	const styles = (theme: ThemeType): JssStyles => ({	1✔
47	root: {
48	width: POST_PREVIEW_WIDTH,
49	position: "relative",
50	'& img': {
51	maxHeight: "200px"
52	},
53	[theme.breakpoints.down('xs')]: {
54	display: "none"
55	},
56	'& .expand': {
57	color: theme.palette.grey[600],
58	fontSize: "1rem",
59	cursor: "pointer"
60	}
61	},
62	postPreview: {
63	maxHeight: 450,
64	padding: theme.spacing.unit*1.5,
65	paddingBottom: 0,
66	paddingTop: 0
67	},
68	header: {
69	display: "flex",
70	alignItems: "center",
71	justifyContent: "space-between",
72	padding: theme.spacing.unit*1.5,
73	paddingBottom: 0,
74	},
75	title: {
76	marginBottom: -6,
77	},
78	tooltipInfo: {
79	marginLeft: 2,
80	...theme.typography.italic,
81	fontSize: "1.1rem",
82	color: theme.palette.grey[600],
83	display: "flex",
84	alignItems: "center"
85	},
86	highlight: {
87	...highlightStyles(theme)
88	},
89	comment: {
90	marginTop: theme.spacing.unit,
91	},
92	bookmark: {
93	marginTop: -4,
94	paddingRight: 4
95	},
96	continue: {
97	color: theme.palette.grey[500],
98	fontSize: "1rem",
99	marginBottom: theme.spacing.unit,
100	},
101	wordCount: {
102	display: "inline-block"
103	},
104	metadata: {
105	marginLeft: 12,
106	paddingTop: 2
107	},
108	smallText: {
109	fontSize: ".9rem",
110	color: theme.palette.grey[500],
111	marginRight: theme.spacing.unit
112	},
113	})
114
115	const getPostCategory = (post: PostsBase) => {	1✔
116	const categories: Array<string> = [];	×
117
118	if (post.isEvent) return null	×
119	if (post.curatedDate) categories.push(`Curated Post`)	×
120	if (post.af) categories.push(`AI Alignment Forum Post`);	×
121	if (post.frontpageDate && !post.curatedDate && !post.af) categories.push(`Frontpage Post`)	×
122
123	if (categories.length > 0)	×
124	return categories.join(', ');	×
125	else if (post.question)
126	return "Question";	×
127	else if (post.reviewedByUserId)
128	return `Personal Blogpost`	×
129	else
130	return null;	×
131	}
132
133	type LWPostsPreviewTooltipProps = PostsPreviewTooltipProps & {
134	classes: ClassesType,
135	}
136
137	const LWPostsPreviewTooltip = ({	1✔
138	postsList,
139	post,
140	hash,
141	comment,
142	dialogueMessageInfo,
143	classes,
144	}: LWPostsPreviewTooltipProps) => {
145	const { PostsUserAndCoauthors, PostsTitle, ContentItemBody, CommentsNode, BookmarkButton, FormatDate,
146	Loading, ContentStyles, EventTime } = Components	×
147	const [expanded, setExpanded] = useState(false)	×
148
149	const foreignApolloClient = useForeignApolloClient();	×
150	const isForeign = post?.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere && !!post.fmCrosspost.foreignPostId;	×
151	const {document: postWithHighlight, loading} = useSingle({	×
152	collectionName: "Posts",
153	fragmentName: "HighlightWithHash",
154	documentId: post?.fmCrosspost?.foreignPostId ?? post?._id,	×
155	skip: !post \|\| (!hash && !!post.contents),	×
156	fetchPolicy: "cache-first",
157	extraVariables: { hash: "String" },
158	extraVariablesValues: {hash},
159	apolloClient: isForeign ? foreignApolloClient : undefined,	×
160	});
161
162	const { dialogueMessageId, dialogueMessageContents } = dialogueMessageInfo ?? {}	×
163
164	const {document: postWithDialogueMessage} = useSingle({	×
165	collectionName: "Posts",
166	fragmentName: "PostWithDialogueMessage",
167	documentId: post?.fmCrosspost?.foreignPostId ?? post?._id,	×
168	skip: !post \|\| !dialogueMessageId,	×
169	fetchPolicy: "cache-first",
170	extraVariables: { dialogueMessageId: "String" },
171	extraVariablesValues: {dialogueMessageId},
172	apolloClient: isForeign ? foreignApolloClient : undefined,	×
173	});
174
175	if (!post) return null	×
176
177	const { wordCount = 0, htmlHighlight = "" } = post.contents \|\| {}	×
178
179	const highlightContents = postWithHighlight?.contents?.htmlHighlightStartingAtHash \|\| post.customHighlight?.html \|\| htmlHighlight	×
180
181	let highlight;
182	if (post.collabEditorDialogue) {	×
183	highlight = postWithDialogueMessage?.dialogueMessageContents ?? dialogueMessageContents ?? highlightContents	×
184	} else if (post.debate) {	×
185	highlight = post.dialogTooltipPreview	×
186	} else {
187	highlight = highlightContents	×
188	}
189
190	const renderWordCount = !comment && !post.isEvent && ((wordCount ?? 0) > 0)	×
191	const truncatedHighlight = truncate(highlight, expanded ? 200 : 100, "words", `... <span class="expand">(more)</span>`)	×
192
193	const renderedComment = comment \|\| post.bestAnswer	×
194
195	let eventLocation = post.onlineEvent ? <div>Online event</div> : null	×
196	if (post.isEvent && post.location) {	×
197	eventLocation = <div>{post.location}</div>	×
198	}
199	const postCategory: string\|null = getPostCategory(post);	×
200
201	return <AnalyticsContext pageElementContext={POST_PREVIEW_ELEMENT_CONTEXT}>	×
202	<Card className={classes.root}>
203	<div className={classes.header}>
204	<div>
205	<div className={classes.title}>
206	<PostsTitle post={post} wrap showIcons={false} />
207	</div>
208	<ContentStyles contentType="comment" className={classes.tooltipInfo}>
209	{ postsList && <span>	×
210	{post.startTime && <EventTime post={post} />}	×
211	{eventLocation}
212	{postCategory}
213	{postCategory && (post.tags?.length > 0) && " – "}	×
NEW 214	{post.tags?.map((tag, i) => <span key={tag._id}>{tag.name}{(i !== (post.tags?.length - 1)) ? ", " : ""}</span>)}	×
215	{renderWordCount && <span>{" "}<span className={classes.wordCount}>({wordCount} words)</span></span>}	×
216	</span>}
217	{ !postsList && <>	×
218	{post.user && <PostsUserAndCoauthors post={post}/>}	×
219	<div className={classes.metadata}>
220	<span className={classes.smallText}>{postGetKarma(post)} karma</span>
221	<span className={classes.smallText}>{postGetCommentCountStr(post)}</span>
222	<span className={classes.smallText}>
223	<FormatDate date={post.postedAt}/>
224	</span>
225	</div>
226	</>}
227	</ContentStyles>
228	</div>
229	{ !postsList && <div className={classes.bookmark}>	×
230	<BookmarkButton post={post}/>
231	</div>}
232	</div>
233	{renderedComment
234	? <div className={classes.comment}>	×
235	<CommentsNode
236	treeOptions={{
237	post,
238	hideReply: true,
239	forceNotSingleLine: true,
240	}}
241	truncated
242	comment={renderedComment}
243	hoverPreview
244	forceUnCollapsed
245	/>
246	</div>
247	: loading
248	? <Loading/>	×
249	: <div onClick={() => setExpanded(true)} className={classes.postPreview}>	×
250	<ContentStyles contentType="postHighlight" className={classes.highlight}>
251	<ContentItemBody
252	dangerouslySetInnerHTML={{__html: truncatedHighlight }}
253	description={`post ${post._id}`}
254	/>
255	</ContentStyles>
256	{expanded && <Link to={postGetPageUrl(post)}><div className={classes.continue} >	×
257	(Continue Reading)
258	</div></Link>}
259	</div>
260	}
261	</Card>
262	</AnalyticsContext>
263
264	}
265
266	const LWPostsPreviewTooltipComponent = registerComponent('LWPostsPreviewTooltip', LWPostsPreviewTooltip, {styles});	1✔
267
268	declare global {
269	interface ComponentTypes {
270	LWPostsPreviewTooltip: typeof LWPostsPreviewTooltipComponent
271	}
272	}

ForumMagnum / ForumMagnum / 8663635357

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