10258887947

Committed 06 Aug 2024 01:50AM UTC coverage: 32.039% (-0.002%) from 32.041%

Build # 10258887947

Build Type

Pull #9570

github

Committed by

darkruby501

Commit Message

good progress

Pull Request Pull Request #9570: LLM Chat Interface (& RAG) Integration into LW

Run Details

4936 of 40114 branches covered (12.3%)

Branch coverage included in aggregate %.

37 of 142 new or added lines in 10 files covered. (26.06%)

390 existing lines in 13 files now uncovered.

28761 of 65060 relevant lines covered (44.21%)

180.4 hits per line

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

25.81

/packages/lesswrong/components/common/LWPopper.tsx

import { registerComponent } from '../../lib/vulcan-lib';
import React, {ReactNode, useState} from 'react';
import type { PopperPlacementType } from '@material-ui/core/Popper'
import classNames from 'classnames';
import { usePopper } from 'react-popper';
import { createPortal } from 'react-dom';

const styles = (theme: ThemeType): JssStyles => ({
  popper: {
    position: "absolute",
    zIndex: theme.zIndexes.lwPopper
  },
  default: {
    position: "relative",
    zIndex: theme.zIndexes.lwPopperTooltip,
  },
  tooltip: {
    backgroundColor: theme.palette.panelBackground.tooltipBackground,
    borderRadius: 3,
    ...theme.typography.commentStyle,
    ...theme.typography.body2,
    fontSize: "1rem",
    padding: theme.spacing.unit,
    color: theme.palette.text.tooltipText,
    position: "relative",
    zIndex: theme.zIndexes.lwPopperTooltip,
  },
  noMouseEvents: {
    pointerEvents: "none",
  },
  hideOnTouchScreens: {
    "@media (pointer:coarse)": {
      display: "none",
    },
  },
})

// This is a wrapper around the Popper library so we can easily replace it with different versions and
// implementations
const LWPopper = ({
  classes,
  children,
  className,
  tooltip=false,
  allowOverflow,
  flip,
  open,
  anchorEl,
  placement,
  clickable = true,
  hideOnTouchScreens,
}: {
  classes: ClassesType,
  children: ReactNode,
  tooltip?: boolean,
  allowOverflow?: boolean,
  flip?: boolean,
  open: boolean,
  placement?: PopperPlacementType,
  anchorEl: any,
  className?: string,
  clickable?: boolean,
  hideOnTouchScreens?: boolean,
}) => {
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);

  const flipModifier = !flip && allowOverflow ? [
    {
      name: 'flip',
      enabled: false,
    }
  ] : [];

  const preventOverflowModifier = allowOverflow ? [
    {
      name: 'preventOverflow',
      enabled: false,
    }
  ] : [];

  const { styles, attributes } = usePopper(anchorEl, popperElement, {
    placement,
    modifiers: [
      {
        name: 'computeStyles',
        options: {
          gpuAcceleration: false, // true by default
        },
      },
      ...flipModifier,
      ...preventOverflowModifier
    ],
  });

  if (!open)
    return null;
  
  // In some cases, interacting with something inside a popper will cause a rerender that detaches the anchorEl
  // This happened in hovers on in-line reacts, and the button to create a new react ended up on the top-left corner of the page
  if (anchorEl && !anchorEl.isConnected) {
    return null;
  }
  
  // We use createPortal here to avoid having to deal with overflow problems and styling from the current child
  // context, by placing the Popper element directly into the document root
  // Rest of usage from https://popper.js.org/react-popper/v2/
  return <>{
    createPortal(
      <div
        ref={setPopperElement}
        className={classNames({
          [classes.tooltip]: tooltip,
          [classes.default]: !tooltip,
          [classes.noMouseEvents]: !clickable,
          [classes.hideOnTouchScreens]: hideOnTouchScreens},
          className
        )}
        style={styles.popper}
        {...attributes.popper}
      >
        { children }
      </div>,
      document.body
    )
  }</>
};

const LWPopperComponent = registerComponent('LWPopper', LWPopper, {styles});

declare global {
  interface ComponentTypes {
    LWPopper: typeof LWPopperComponent
  }
}

1	import { registerComponent } from '../../lib/vulcan-lib';	1✔
2	import React, {ReactNode, useState} from 'react';	1✔
3	import type { PopperPlacementType } from '@material-ui/core/Popper'
4	import classNames from 'classnames';	1✔
5	import { usePopper } from 'react-popper';	1✔
6	import { createPortal } from 'react-dom';	1✔
7
8	const styles = (theme: ThemeType): JssStyles => ({	1✔
9	popper: {
10	position: "absolute",
11	zIndex: theme.zIndexes.lwPopper
12	},
13	default: {
14	position: "relative",
15	zIndex: theme.zIndexes.lwPopperTooltip,
16	},
17	tooltip: {
18	backgroundColor: theme.palette.panelBackground.tooltipBackground,
19	borderRadius: 3,
20	...theme.typography.commentStyle,
21	...theme.typography.body2,
22	fontSize: "1rem",
23	padding: theme.spacing.unit,
24	color: theme.palette.text.tooltipText,
25	position: "relative",
26	zIndex: theme.zIndexes.lwPopperTooltip,
27	},
28	noMouseEvents: {
29	pointerEvents: "none",
30	},
31	hideOnTouchScreens: {
32	"@media (pointer:coarse)": {
33	display: "none",
34	},
35	},
36	})
37
38	// This is a wrapper around the Popper library so we can easily replace it with different versions and
39	// implementations
40	const LWPopper = ({	1✔
41	classes,
42	children,
43	className,
44	tooltip=false,	×
45	allowOverflow,
46	flip,
47	open,
48	anchorEl,
49	placement,
50	clickable = true,	×
51	hideOnTouchScreens,
52	}: {
53	classes: ClassesType,
54	children: ReactNode,
55	tooltip?: boolean,
56	allowOverflow?: boolean,
57	flip?: boolean,
58	open: boolean,
59	placement?: PopperPlacementType,
60	anchorEl: any,
61	className?: string,
62	clickable?: boolean,
63	hideOnTouchScreens?: boolean,
64	}) => {
UNCOV 65	const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);	×
66
67	const flipModifier = !flip && allowOverflow ? [	×
68	{
69	name: 'flip',
70	enabled: false,
71	}
72	] : [];
73
UNCOV 74	const preventOverflowModifier = allowOverflow ? [	×
75	{
76	name: 'preventOverflow',
77	enabled: false,
78	}
79	] : [];
80
UNCOV 81	const { styles, attributes } = usePopper(anchorEl, popperElement, {	×
82	placement,
83	modifiers: [
84	{
85	name: 'computeStyles',
86	options: {
87	gpuAcceleration: false, // true by default
88	},
89	},
90	...flipModifier,
91	...preventOverflowModifier
92	],
93	});
94
UNCOV 95	if (!open)	×
UNCOV 96	return null;	×
97
98	// In some cases, interacting with something inside a popper will cause a rerender that detaches the anchorEl
99	// This happened in hovers on in-line reacts, and the button to create a new react ended up on the top-left corner of the page
UNCOV 100	if (anchorEl && !anchorEl.isConnected) {	×
UNCOV 101	return null;	×
102	}
103
104	// We use createPortal here to avoid having to deal with overflow problems and styling from the current child
105	// context, by placing the Popper element directly into the document root
106	// Rest of usage from https://popper.js.org/react-popper/v2/
UNCOV 107	return <>{	×
108	createPortal(
109	<div
110	ref={setPopperElement}
111	className={classNames({
112	[classes.tooltip]: tooltip,
113	[classes.default]: !tooltip,
114	[classes.noMouseEvents]: !clickable,
115	[classes.hideOnTouchScreens]: hideOnTouchScreens},
116	className
117	)}
118	style={styles.popper}
119	{...attributes.popper}
120	>
121	{ children }
122	</div>,
123	document.body
124	)
125	}</>
126	};
127
128	const LWPopperComponent = registerComponent('LWPopper', LWPopper, {styles});	1✔
129
130	declare global {
131	interface ComponentTypes {
132	LWPopper: typeof LWPopperComponent
133	}
134	}

ForumMagnum / ForumMagnum / 10258887947

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