9601725152

Committed 20 Jun 2024 05:21PM UTC coverage: 31.838% (-0.009%) from 31.847%

Build # 9601725152

Build Type

Pull #9421

github

Committed by

oetherington

Commit Message

Some people directory column width adjustments

Pull Request Pull Request #9421: [EA] People directory topics

Run Details

4827 of 39594 branches covered (12.19%)

Branch coverage included in aggregate %.

31 of 80 new or added lines in 8 files covered. (38.75%)

2 existing lines in 2 files now uncovered.

28123 of 63898 relevant lines covered (44.01%)

179.28 hits per line

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

19.23

/packages/lesswrong/components/peopleDirectory/PeopleDirectoryTopicsCell.tsx

import React, { useEffect, useRef } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { tagStyle, smallTagTextStyle, coreTagStyle } from "../tagging/FooterTag";
import { textCellStyles } from "./PeopleDirectoryTextCell";
import { InteractionWrapper } from "../common/useClickableCell";
import { tagGetUrl } from "@/lib/collections/tags/helpers";

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    rowGap: "2px",
    flexWrap: "wrap",
    overflow: "hidden",
    maxHeight: 42,
  },
  tagWrapper: {},
  tag: {
    ...tagStyle(theme),
    ...smallTagTextStyle(theme),
    ...coreTagStyle(theme),
  },
  more: {
    ...textCellStyles(theme),
    color: theme.palette.grey[600],
    marginTop: 2,
    marginLeft: 6,
  },
});

const TAG_COUNT = 3;

export const PeopleDirectoryTopicsCell = ({user, classes}: {
  user: SearchUser,
  classes: ClassesType<typeof styles>,
}) => {
  const ref = useRef<HTMLDivElement | null>(null);

  // The kind of wrapping we want here can't be done with pure CSS unfortunately
  // since we want to show a "+ n more" message at the end after two lines of
  // tags. We do this by iterating over the tags after the initial render and
  // removing as many as needed until the "+ n more" message is visible.
  useEffect(() => {
    const container = ref.current;
    if (!container) {
      return;
    }

    const tags: HTMLElement[] = Array.from(
      container.querySelectorAll(`.${classes.tagWrapper}`),
    );
    for (const tag of tags) {
      tag.style.display = "block";
    }

    const more: HTMLElement | null = container.querySelector(`.${classes.more}`);
    if (!tags.length || !more) {
      return;
    }

    const offsets = Array.from(
      new Set(tags.map((t) => t.getBoundingClientRect().top)),
    ).sort();
    if (offsets.length < 2) {
      return;
    }
    while (more.getBoundingClientRect().top > offsets[1] + 15) {
      const tag = tags.pop();
      if (tag) {
        tag.remove();
      } else {
        break;
      }
    }
  }, [classes]);

  const {TagsTooltip, LWTooltip} = Components;
  return (
    <div className={classes.root} ref={ref}>
      {user.tags?.slice(0, TAG_COUNT).map(({name, slug}) => {
        return (
          <InteractionWrapper
            key={slug}
            href={tagGetUrl({slug}, {from: "people_directory"})}
            openInNewTab
            className={classes.tagWrapper}
          >
            <TagsTooltip tagSlug={slug} hideRelatedTags>
              <div className={classes.tag}>
                {name}
              </div>
            </TagsTooltip>
          </InteractionWrapper>
        );
      })}
      {(user.tags?.length ?? 0) > TAG_COUNT &&
        <div className={classes.more}>
          <LWTooltip title={
            <div>
              {user.tags!.slice(TAG_COUNT).map(({name}) => (
                <div key={name}>{name}</div>
              ))}
            </div>
          }>
            + {user.tags!.length - TAG_COUNT} more
          </LWTooltip>
        </div>
      }
    </div>
  );
}

const PeopleDirectoryTopicsCellComponent = registerComponent(
  "PeopleDirectoryTopicsCell",
  PeopleDirectoryTopicsCell,
  {styles},
);

declare global {
  interface ComponentTypes {
    PeopleDirectoryTopicsCell: typeof PeopleDirectoryTopicsCellComponent
  }
}

1	import React, { useEffect, useRef } from "react";	3✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { tagStyle, smallTagTextStyle, coreTagStyle } from "../tagging/FooterTag";	1✔
4	import { textCellStyles } from "./PeopleDirectoryTextCell";	1✔
5	import { InteractionWrapper } from "../common/useClickableCell";	1✔
6	import { tagGetUrl } from "@/lib/collections/tags/helpers";	1✔
7
8	const styles = (theme: ThemeType) => ({	1✔
9	root: {
10	display: "flex",
11	rowGap: "2px",
12	flexWrap: "wrap",
13	overflow: "hidden",
14	maxHeight: 42,
15	},
16	tagWrapper: {},
17	tag: {
18	...tagStyle(theme),
19	...smallTagTextStyle(theme),
20	...coreTagStyle(theme),
21	},
22	more: {
23	...textCellStyles(theme),
24	color: theme.palette.grey[600],
25	marginTop: 2,
26	marginLeft: 6,
27	},
28	});
29
30	const TAG_COUNT = 3;	1✔
31
32	export const PeopleDirectoryTopicsCell = ({user, classes}: {	1✔
33	user: SearchUser,
34	classes: ClassesType<typeof styles>,
35	}) => {
NEW 36	const ref = useRef<HTMLDivElement \| null>(null);	×
37
38	// The kind of wrapping we want here can't be done with pure CSS unfortunately
39	// since we want to show a "+ n more" message at the end after two lines of
40	// tags. We do this by iterating over the tags after the initial render and
41	// removing as many as needed until the "+ n more" message is visible.
NEW 42	useEffect(() => {	×
NEW 43	const container = ref.current;	×
NEW 44	if (!container) {	×
NEW 45	return;	×
46	}
47
NEW 48	const tags: HTMLElement[] = Array.from(	×
49	container.querySelectorAll(`.${classes.tagWrapper}`),
50	);
NEW 51	for (const tag of tags) {	×
NEW 52	tag.style.display = "block";	×
53	}
54
NEW 55	const more: HTMLElement \| null = container.querySelector(`.${classes.more}`);	×
NEW 56	if (!tags.length \|\| !more) {	×
NEW 57	return;	×
58	}
59
NEW 60	const offsets = Array.from(	×
NEW 61	new Set(tags.map((t) => t.getBoundingClientRect().top)),	×
62	).sort();
NEW 63	if (offsets.length < 2) {	×
NEW 64	return;	×
65	}
NEW 66	while (more.getBoundingClientRect().top > offsets[1] + 15) {	×
NEW 67	const tag = tags.pop();	×
NEW 68	if (tag) {	×
NEW 69	tag.remove();	×
70	} else {
NEW 71	break;	×
72	}
73	}
74	}, [classes]);
75
NEW 76	const {TagsTooltip, LWTooltip} = Components;	×
NEW 77	return (	×
78	<div className={classes.root} ref={ref}>
79	{user.tags?.slice(0, TAG_COUNT).map(({name, slug}) => {	×
NEW 80	return (	×
81	<InteractionWrapper
82	key={slug}
83	href={tagGetUrl({slug}, {from: "people_directory"})}
84	openInNewTab
85	className={classes.tagWrapper}
86	>
87	<TagsTooltip tagSlug={slug} hideRelatedTags>
88	<div className={classes.tag}>
89	{name}
90	</div>
91	</TagsTooltip>
92	</InteractionWrapper>
93	);
94	})}	×
95	{(user.tags?.length ?? 0) > TAG_COUNT &&	×
96	<div className={classes.more}>
97	<LWTooltip title={
98	<div>
99	{user.tags!.slice(TAG_COUNT).map(({name}) => (
NEW 100	<div key={name}>{name}</div>	×
101	))}
102	</div>
103	}>
104	+ {user.tags!.length - TAG_COUNT} more
105	</LWTooltip>
106	</div>
107	}
108	</div>
109	);
110	}
111
112	const PeopleDirectoryTopicsCellComponent = registerComponent(	1✔
113	"PeopleDirectoryTopicsCell",
114	PeopleDirectoryTopicsCell,
115	{styles},
116	);
117
118	declare global {
119	interface ComponentTypes {
120	PeopleDirectoryTopicsCell: typeof PeopleDirectoryTopicsCellComponent
121	}
122	}

ForumMagnum / ForumMagnum / 9601725152

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