open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into atlas3

Browse Source
This commit is contained in:
Austin Chen 2022-07-19 13:17:20 -07:00
commit a992773a65
13 changed files with 227 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
common/pseudo-numeric.ts
View File

@ -16,8 +16,8 @@ export const getMappedValue =
const { min, max, isLogScale } = contract
if (isLogScale) {
const logValue = p * Math.log10(max - min)
return 10 ** logValue + min
const logValue = p * Math.log10(max - min + 1)
return 10 ** logValue + min - 1
}
return p * (max - min) + min
@ -38,7 +38,7 @@ export const getPseudoProbability = (
isLogScale = false
) => {
if (isLogScale) {
return Math.log10(value - min) / Math.log10(max - min)
return Math.log10(value - min + 1) / Math.log10(max - min + 1)
}
return (value - min) / (max - min)

16
common/util/format.ts
View File

@ -33,20 +33,24 @@ export function formatPercent(zeroToOne: number) {
return (zeroToOne * 100).toFixed(decimalPlaces) + '%'
}
const showPrecision = (x: number, sigfigs: number) =>
// convert back to number for weird formatting reason
`${Number(x.toPrecision(sigfigs))}`
// Eg 1234567.89 => 1.23M; 5678 => 5.68K
export function formatLargeNumber(num: number, sigfigs = 2): string {
const absNum = Math.abs(num)
if (absNum < 1) return num.toPrecision(sigfigs)
if (absNum < 1) return showPrecision(num, sigfigs)
if (absNum < 100) return num.toPrecision(2)
if (absNum < 1000) return num.toPrecision(3)
if (absNum < 10000) return num.toPrecision(4)
if (absNum < 100) return showPrecision(num, 2)
if (absNum < 1000) return showPrecision(num, 3)
if (absNum < 10000) return showPrecision(num, 4)
const suffix = ['', 'K', 'M', 'B', 'T', 'Q']
const i = Math.floor(Math.log10(absNum) / 3)
const numStr = (num / Math.pow(10, 3 * i)).toPrecision(sigfigs)
return `${numStr}${suffix[i]}`
const numStr = showPrecision(num / Math.pow(10, 3 * i), sigfigs)
return `${numStr}${suffix[i] ?? ''}`
}
export function toCamelCase(words: string) {

2
functions/src/emails.ts
View File

@ -302,7 +302,7 @@ export const sendNewCommentEmail = async (
)}`
}
const subject = `Comment from ${commentorName} on ${question}`
const subject = `Comment on ${question}`
const from = `${commentorName} on Manifold <no-reply@manifold.markets>`
if (contract.outcomeType === 'FREE_RESPONSE' && answerId && answerText) {

11
web/components/bet-panel.tsx
View File

@ -50,14 +50,10 @@ export function BetPanel(props: {
const user = useUser()
const userBets = useUserContractBets(user?.id, contract.id)
const unfilledBets = useUnfilledBets(contract.id) ?? []
const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id)
const { sharesOutcome } = useSaveBinaryShares(contract, userBets)
const [isLimitOrder, setIsLimitOrder] = useState(false)
const showLimitOrders =
(isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
return (
<Col className={className}>
<SellRow
@ -85,7 +81,7 @@ export function BetPanel(props: {
<SignUpPrompt />
</Col>
{showLimitOrders && (
{unfilledBets.length > 0 && (
<LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
)}
</Col>
@ -105,9 +101,6 @@ export function SimpleBetPanel(props: {
const [isLimitOrder, setIsLimitOrder] = useState(false)
const unfilledBets = useUnfilledBets(contract.id) ?? []
const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id)
const showLimitOrders =
(isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
return (
<Col className={className}>
@ -138,7 +131,7 @@ export function SimpleBetPanel(props: {
<SignUpPrompt />
</Col>
{showLimitOrders && (
{unfilledBets.length > 0 && (
<LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
)}
</Col>

25
web/components/contract/contract-prob-graph.tsx
View File

@ -7,7 +7,6 @@ import { Bet } from 'common/bet'
import { getInitialProbability } from 'common/calculate'
import { BinaryContract, PseudoNumericContract } from 'common/contract'
import { useWindowSize } from 'web/hooks/use-window-size'
import { getMappedValue } from 'common/pseudo-numeric'
import { formatLargeNumber } from 'common/util/format'
export const ContractProbGraph = memo(function ContractProbGraph(props: {
@ -29,7 +28,11 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
...bets.map((bet) => bet.createdTime),
].map((time) => new Date(time))
const f = getMappedValue(contract)
const f: (p: number) => number = isBinary
? (p) => p
: isLogScale
? (p) => p * Math.log10(contract.max - contract.min + 1)
: (p) => p * (contract.max - contract.min) + contract.min
const probs = [startProb, ...bets.map((bet) => bet.probAfter)].map(f)
@ -69,10 +72,9 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
const points: { x: Date; y: number }[] = []
const s = isBinary ? 100 : 1
const c = isLogScale && contract.min === 0 ? 1 : 0
for (let i = 0; i < times.length - 1; i++) {
points[points.length] = { x: times[i], y: s * probs[i] + c }
points[points.length] = { x: times[i], y: s * probs[i] }
const numPoints: number = Math.floor(
dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / timeStep
)
@ -84,7 +86,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
x: dayjs(times[i])
.add(thisTimeStep * n, 'ms')
.toDate(),
y: s * probs[i] + c,
y: s * probs[i],
}
}
}
@ -99,6 +101,9 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
const formatter = isBinary
? formatPercent
: isLogScale
? (x: DatumValue) =>
formatLargeNumber(10 ** +x.valueOf() + contract.min - 1)
: (x: DatumValue) => formatLargeNumber(+x.valueOf())
return (
@ -111,11 +116,13 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
yScale={
isBinary
? { min: 0, max: 100, type: 'linear' }
: {
min: contract.min + c,
max: contract.max + c,
type: contract.isLogScale ? 'log' : 'linear',
: isLogScale
? {
min: 0,
max: Math.log10(contract.max - contract.min + 1),
type: 'linear',
}
: { min: contract.min, max: contract.max, type: 'linear' }
}
yFormat={formatter}
gridYValues={yTickValues}

3
web/components/groups/group-selector.tsx
View File

@ -53,9 +53,8 @@ export function GroupSelector(props: {
nullable={true}
className={'text-sm'}
>
{({ open }) => (
{() => (
<>
{!open && setQuery('')}
<Combobox.Label className="label justify-start gap-2 text-base">
Add to Group
<InfoTooltip text="Question will be displayed alongside the other questions in the group." />

4
web/components/limit-bets.tsx
View File

@ -78,8 +78,8 @@ export function LimitOrderTable(props: {
<thead>
{!isYou && <th></th>}
<th>Outcome</th>
<th>Amount</th>
<th>{isPseudoNumeric ? 'Value' : 'Prob'}</th>
<th>Amount</th>
{isYou && <th></th>}
</thead>
<tbody>
@ -129,12 +129,12 @@ function LimitBet(props: {
)}
</div>
</td>
<td>{formatMoney(orderAmount - amount)}</td>
<td>
{isPseudoNumeric
? getFormattedMappedValue(contract)(limitProb)
: formatPercent(limitProb)}
</td>
<td>{formatMoney(orderAmount - amount)}</td>
{isYou && (
<td>
{isCancelling ? (

30
web/components/pagination.tsx
View File

@ -4,8 +4,18 @@ export function Pagination(props: {
totalItems: number
setPage: (page: number) => void
scrollToTop?: boolean
nextTitle?: string
prevTitle?: string
}) {
const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
const {
page,
itemsPerPage,
totalItems,
setPage,
scrollToTop,
nextTitle,
prevTitle,
} = props
const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
@ -25,19 +35,21 @@ export function Pagination(props: {
</p>
</div>
<div className="flex flex-1 justify-between sm:justify-end">
<a
href={scrollToTop ? '#' : undefined}
className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page > 0 && setPage(page - 1)}
>
Previous
</a>
{page > 0 && (
<a
href={scrollToTop ? '#' : undefined}
className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page > 0 && setPage(page - 1)}
>
{prevTitle ?? 'Previous'}
</a>
)}
<a
href={scrollToTop ? '#' : undefined}
className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page < maxPage && setPage(page + 1)}
>
Next
{nextTitle ?? 'Next'}
</a>
</div>
</nav>

49
web/hooks/use-notifications.ts
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { notification_subscribe_types, PrivateUser } from 'common/user'
import { Notification } from 'common/notification'
import {
@ -6,7 +6,7 @@ import {
listenForNotifications,
} from 'web/lib/firebase/notifications'
import { groupBy, map } from 'lodash'
import { useFirestoreQuery } from '@react-query-firebase/firestore'
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
export type NotificationGroup = {
@ -19,36 +19,33 @@ export type NotificationGroup = {
// For some reason react-query subscriptions don't actually listen for notifications
// Use useUnseenPreferredNotificationGroups to listen for new notifications
export function usePreferredGroupedNotifications(privateUser: PrivateUser) {
const [notificationGroups, setNotificationGroups] = useState<
NotificationGroup[] | undefined
>(undefined)
const [notifications, setNotifications] = useState<Notification[]>([])
const key = `notifications-${privateUser.id}-all`
export function usePreferredGroupedNotifications(
privateUser: PrivateUser,
cachedNotifications?: Notification[]
) {
const result = useFirestoreQueryData(
['notifications-all', privateUser.id],
getNotificationsQuery(privateUser.id)
)
const notifications = useMemo(() => {
if (result.isLoading) return cachedNotifications ?? []
if (!result.data) return cachedNotifications ?? []
const notifications = result.data as Notification[]
const result = useFirestoreQuery([key], getNotificationsQuery(privateUser.id))
useEffect(() => {
if (result.isLoading) return
if (!result.data) return setNotifications([])
const notifications = result.data.docs.map(
(doc) => doc.data() as Notification
)
const notificationsToShow = getAppropriateNotifications(
return getAppropriateNotifications(
notifications,
privateUser.notificationPreferences
).filter((n) => !n.isSeenOnHref)
setNotifications(notificationsToShow)
}, [privateUser.notificationPreferences, result.data, result.isLoading])
}, [
cachedNotifications,
privateUser.notificationPreferences,
result.data,
result.isLoading,
])
useEffect(() => {
if (!notifications) return
const groupedNotifications = groupNotifications(notifications)
setNotificationGroups(groupedNotifications)
return useMemo(() => {
if (notifications) return groupNotifications(notifications)
}, [notifications])
return notificationGroups
}
export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) {

15
web/hooks/use-sort-and-query-params.tsx
View File

@ -53,9 +53,12 @@ export function useInitialQueryAndSort(options?: {
console.log('ready loading from storage ', sort ?? defaultSort)
const localSort = getSavedSort()
if (localSort) {
router.query.s = localSort
// Use replace to not break navigating back.
router.replace(router, undefined, { shallow: true })
router.replace(
{ query: { ...router.query, s: localSort } },
undefined,
{ shallow: true }
)
}
setInitialSort(localSort ?? defaultSort)
} else {
@ -79,7 +82,9 @@ export function useUpdateQueryAndSort(props: {
const setSort = (sort: Sort | undefined) => {
if (sort !== router.query.s) {
router.query.s = sort
router.push(router, undefined, { shallow: true })
router.replace({ query: { ...router.query, s: sort } }, undefined, {
shallow: true,
})
if (shouldLoadFromStorage) {
localStorage.setItem(MARKETS_SORT, sort || '')
}
@ -97,7 +102,9 @@ export function useUpdateQueryAndSort(props: {
} else {
delete router.query.q
}
router.push(router, undefined, { shallow: true })
router.replace({ query: router.query }, undefined, {
shallow: true,
})
track('search', { query })
}, 500),
[router]

2
web/lib/firebase/auth.ts
View File

@ -6,7 +6,7 @@ const TOKEN_KINDS = ['refresh', 'id'] as const
type TokenKind = typeof TOKEN_KINDS[number]
const getAuthCookieName = (kind: TokenKind) => {
const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replaceAll('-', '_')
const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replace(/-/g, '_')
return `FIREBASE_TOKEN_${suffix}`
}

18
web/pages/create.tsx
View File

@ -206,7 +206,7 @@ export function NewContract(props: {
min,
max,
initialValue,
isLogScale: (min ?? 0) < 0 ? false : isLogScale,
isLogScale,
groupId: selectedGroup?.id,
})
)
@ -293,15 +293,13 @@ export function NewContract(props: {
/>
</Row>
{!(min !== undefined && min < 0) && (
<Checkbox
className="my-2 text-sm"
label="Log scale"
checked={isLogScale}
toggle={() => setIsLogScale(!isLogScale)}
disabled={isSubmitting}
/>
)}
<Checkbox
className="my-2 text-sm"
label="Log scale"
checked={isLogScale}
toggle={() => setIsLogScale(!isLogScale)}
disabled={isSubmitting}
/>
{min !== undefined && max !== undefined && min >= max && (
<div className="mt-2 mb-2 text-sm text-red-500">

193
web/pages/notifications.tsx
View File

@ -1,6 +1,6 @@
import { Tabs } from 'web/components/layout/tabs'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import React, { useEffect, useState } from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import { Notification, notification_source_types } from 'common/notification'
import { Avatar, EmptyAvatar } from 'web/components/avatar'
import { Row } from 'web/components/layout/row'
@ -14,9 +14,14 @@ import {
MANIFOLD_USERNAME,
notification_subscribe_types,
PrivateUser,
User,
} from 'common/user'
import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
import { listenForPrivateUser, updatePrivateUser } from 'web/lib/firebase/users'
import {
getUser,
listenForPrivateUser,
updatePrivateUser,
} from 'web/lib/firebase/users'
import { LoadingIndicator } from 'web/components/loading-indicator'
import clsx from 'clsx'
import { RelativeTimestamp } from 'web/components/relative-timestamp'
@ -42,15 +47,39 @@ import Custom404 from 'web/pages/404'
import { track } from '@amplitude/analytics-browser'
import { Pagination } from 'web/components/pagination'
import { useWindowSize } from 'web/hooks/use-window-size'
import Router from 'next/router'
import { safeLocalStorage } from 'web/lib/util/local'
import {
getServerAuthenticatedUid,
redirectIfLoggedOut,
} from 'web/lib/firebase/server-auth'
import { SiteLink } from 'web/components/site-link'
export const NOTIFICATIONS_PER_PAGE = 30
const MULTIPLE_USERS_KEY = 'multipleUsers'
const HIGHLIGHT_CLASS = 'bg-indigo-50'
export default function Notifications() {
const user = useUser()
export const getServerSideProps = redirectIfLoggedOut('/', async (ctx) => {
const uid = await getServerAuthenticatedUid(ctx)
if (!uid) {
return { props: { user: null } }
}
const user = await getUser(uid)
return { props: { user } }
})
export default function Notifications(props: { user: User }) {
const { user } = props
const privateUser = usePrivateUser(user?.id)
const local = safeLocalStorage()
let localNotifications = [] as Notification[]
const localSavedNotificationGroups = local?.getItem('notification-groups')
let localNotificationGroups = [] as NotificationGroup[]
if (localSavedNotificationGroups) {
localNotificationGroups = JSON.parse(localSavedNotificationGroups)
localNotifications = localNotificationGroups
.map((g) => g.notifications)
.flat()
}
if (!user) return <Custom404 />
return (
@ -67,7 +96,17 @@ export default function Notifications() {
{
title: 'Notifications',
content: privateUser ? (
<NotificationsList privateUser={privateUser} />
<NotificationsList
privateUser={privateUser}
cachedNotifications={localNotifications}
/>
) : localNotificationGroups &&
localNotificationGroups.length > 0 ? (
<div className={'min-h-[100vh]'}>
<RenderNotificationGroups
notificationGroups={localNotificationGroups}
/>
</div>
) : (
<LoadingIndicator />
),
@ -88,39 +127,13 @@ export default function Notifications() {
)
}
function NotificationsList(props: { privateUser: PrivateUser }) {
const { privateUser } = props
const [page, setPage] = useState(0)
const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
useState<NotificationGroup[] | undefined>(undefined)
useEffect(() => {
if (!allGroupedNotifications) return
const start = page * NOTIFICATIONS_PER_PAGE
const end = start + NOTIFICATIONS_PER_PAGE
const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
const remainingNotification = allGroupedNotifications.slice(end)
for (const notification of remainingNotification) {
if (notification.isSeen) break
else setNotificationsAsSeen(notification.notifications)
}
setPaginatedGroupedNotifications(maxNotificationsToShow)
}, [allGroupedNotifications, page])
if (!paginatedGroupedNotifications || !allGroupedNotifications)
return <LoadingIndicator />
function RenderNotificationGroups(props: {
notificationGroups: NotificationGroup[]
}) {
const { notificationGroups } = props
return (
<div className={'min-h-[100vh]'}>
{paginatedGroupedNotifications.length === 0 && (
<div className={'mt-2'}>
You don't have any notifications. Try changing your settings to see
more.
</div>
)}
{paginatedGroupedNotifications.map((notification) =>
<>
{notificationGroups.map((notification) =>
notification.type === 'income' ? (
<IncomeNotificationGroupItem
notificationGroup={notification}
@ -138,6 +151,52 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
/>
)
)}
</>
)
}
function NotificationsList(props: {
privateUser: PrivateUser
cachedNotifications: Notification[]
}) {
const { privateUser, cachedNotifications } = props
const [page, setPage] = useState(0)
const allGroupedNotifications = usePreferredGroupedNotifications(
privateUser,
cachedNotifications
)
const paginatedGroupedNotifications = useMemo(() => {
if (!allGroupedNotifications) return
const start = page * NOTIFICATIONS_PER_PAGE
const end = start + NOTIFICATIONS_PER_PAGE
const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
const remainingNotification = allGroupedNotifications.slice(end)
for (const notification of remainingNotification) {
if (notification.isSeen) break
else setNotificationsAsSeen(notification.notifications)
}
const local = safeLocalStorage()
local?.setItem(
'notification-groups',
JSON.stringify(allGroupedNotifications)
)
return maxNotificationsToShow
}, [allGroupedNotifications, page])
if (!paginatedGroupedNotifications || !allGroupedNotifications) return <div />
return (
<div className={'min-h-[100vh]'}>
{paginatedGroupedNotifications.length === 0 && (
<div className={'mt-2'}>
You don't have any notifications. Try changing your settings to see
more.
</div>
)}
<RenderNotificationGroups
notificationGroups={paginatedGroupedNotifications}
/>
{paginatedGroupedNotifications.length > 0 &&
allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
<Pagination
@ -146,6 +205,8 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
totalItems={allGroupedNotifications.length}
setPage={setPage}
scrollToTop
nextTitle={'Older'}
prevTitle={'Newer'}
/>
)}
</div>
@ -382,7 +443,11 @@ function IncomeNotificationItem(props: {
highlighted && HIGHLIGHT_CLASS
)}
>
<a href={getSourceUrl(notification)}>
<div className={'relative'}>
<SiteLink
href={getSourceUrl(notification) ?? ''}
className={'absolute left-0 right-0 top-0 bottom-0 z-0'}
/>
<Row className={'items-center text-gray-500 sm:justify-start'}>
<div className={'line-clamp-2 flex max-w-xl shrink '}>
<div className={'inline'}>
@ -408,7 +473,7 @@ function IncomeNotificationItem(props: {
</div>
</Row>
<div className={'mt-4 border-b border-gray-300'} />
</a>
</div>
</div>
)
}
@ -597,24 +662,24 @@ function NotificationItem(props: {
highlighted && HIGHLIGHT_CLASS
)}
>
<div
className={'cursor-pointer'}
onClick={(event) => {
event.stopPropagation()
Router.push(getSourceUrl(notification) ?? '')
track('Notification Clicked', {
type: 'notification item',
sourceType,
sourceUserName,
sourceUserAvatarUrl,
sourceUpdateType,
reasonText,
reason,
sourceUserUsername,
sourceText,
})
}}
>
<div className={'relative cursor-pointer'}>
<SiteLink
href={getSourceUrl(notification) ?? ''}
className={'absolute left-0 right-0 top-0 bottom-0 z-0'}
onClick={() =>
track('Notification Clicked', {
type: 'notification item',
sourceType,
sourceUserName,
sourceUserAvatarUrl,
sourceUpdateType,
reasonText,
reason,
sourceUserUsername,
sourceText,
})
}
/>
<Row className={'items-center text-gray-500 sm:justify-start'}>
<Avatar
avatarUrl={
@ -623,7 +688,7 @@ function NotificationItem(props: {
: sourceUserAvatarUrl
}
size={'sm'}
className={'mr-2'}
className={'z-10 mr-2'}
username={
questionNeedsResolution ? MANIFOLD_USERNAME : sourceUserUsername
}
@ -639,7 +704,7 @@ function NotificationItem(props: {
<UserLink
name={sourceUserName || ''}
username={sourceUserUsername || ''}
className={'mr-1 flex-shrink-0'}
className={'relative mr-1 flex-shrink-0'}
justFirstName={true}
/>
)}
@ -706,10 +771,8 @@ function QuestionOrGroupLink(props: {
</span>
)
return (
<a
className={
'ml-1 font-bold hover:underline hover:decoration-indigo-400 hover:decoration-2 '
}
<SiteLink
className={'relative ml-1 font-bold'}
href={
sourceContractCreatorUsername
? `/${sourceContractCreatorUsername}/${sourceContractSlug}`
@ -734,7 +797,7 @@ function QuestionOrGroupLink(props: {
}
>
{sourceContractTitle || sourceTitle}
</a>
</SiteLink>
)
}