= 3 })}
+ >
<_Plot
data={[
{
@@ -30,6 +34,7 @@ const Plot = ({
marker: {
color: markerColor,
},
+ hovertemplate,
},
]}
config={{
@@ -76,6 +81,8 @@ const Plot = ({
zeroline: false,
tickvals: data.tickvals,
ticktext: data.ticktext,
+ tickformat: 'd',
+ dtick: 1,
automargin: true,
...(showRangeSlider
? {
diff --git a/ui/src/design-system/components/plot/types.ts b/ui/src/design-system/components/plot/types.ts
index 54c1c78d6..aca3c8a59 100644
--- a/ui/src/design-system/components/plot/types.ts
+++ b/ui/src/design-system/components/plot/types.ts
@@ -10,4 +10,5 @@ export interface PlotProps {
type?: 'bar' | 'scatter'
showRangeSlider?: boolean
categorical?: boolean
+ hovertemplate?: string
}
diff --git a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss
index 9698d8b33..76a694b1d 100644
--- a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss
+++ b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss
@@ -25,14 +25,8 @@
&.bubble {
.label {
+ @include bubble-label();
display: inline-flex;
- height: 30px;
- border-radius: 15px;
- padding: 0 12px;
- background-color: #f2f3fe;
- line-height: 30px;
- color: $color-primary-1-600;
- font-weight: 600;
}
}
}
diff --git a/ui/src/design-system/variables/typography.scss b/ui/src/design-system/variables/typography.scss
index 1c5f13890..c9bdc6db0 100644
--- a/ui/src/design-system/variables/typography.scss
+++ b/ui/src/design-system/variables/typography.scss
@@ -111,6 +111,18 @@
text-transform: uppercase;
}
+@mixin bubble-label {
+ display: inline-flex;
+ height: 30px;
+ border-radius: 15px;
+ padding: 0 12px;
+ background-color: #f2f3fe;
+ color: $color-primary-1-600;
+ font-size: 16px;
+ line-height: 30px;
+ font-weight: 600;
+}
+
@mixin mono {
@include paragraph-xx-small();
font-family: monospace;
diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx
index 923fbadaa..ddae772e3 100644
--- a/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx
+++ b/ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx
@@ -50,7 +50,7 @@ export const SectionExampleCaptures = ({
if (!deployment.createdAt) {
return (
)
@@ -62,7 +62,7 @@ export const SectionExampleCaptures = ({
return (
diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx
index f2f7d9b77..3e27139d8 100644
--- a/ui/src/pages/deployment-details/deployment-details-info.tsx
+++ b/ui/src/pages/deployment-details/deployment-details-info.tsx
@@ -3,7 +3,7 @@ import { DeploymentDetails } from 'data-services/models/deployment-details'
import { Button } from 'design-system/components/button/button'
import * as Dialog from 'design-system/components/dialog/dialog'
import { ImageCarousel } from 'design-system/components/image-carousel/image-carousel'
-import { InputValue } from 'design-system/components/input/input'
+import { InputContent, InputValue } from 'design-system/components/input/input'
import { MultiMarkerMap } from 'design-system/map/multi-marker-map/multi-marker-map'
import { MarkerPosition } from 'design-system/map/types'
import { useMemo } from 'react'
@@ -91,14 +91,16 @@ export const DeploymentDetailsInfo = ({
value={deployment.numImages}
/>
- {deployment.exampleCaptures.length > 0 && (
-
-
-
- )}
+
+ {deployment.exampleCaptures.length > 0 && (
+
+
+
+ )}
+
>
diff --git a/ui/src/pages/occurrence-details/occurrence-details.tsx b/ui/src/pages/occurrence-details/occurrence-details.tsx
index a984ecb01..4ff6f2e90 100644
--- a/ui/src/pages/occurrence-details/occurrence-details.tsx
+++ b/ui/src/pages/occurrence-details/occurrence-details.tsx
@@ -25,8 +25,8 @@ import { Agree } from './agree/agree'
import { userAgreed } from './agree/userAgreed'
import { IdentificationCard } from './identification-card/identification-card'
import styles from './occurrence-details.module.scss'
-import { SuggestId } from './suggest-id/suggest-id'
import { RejectId } from './reject-id/reject-id'
+import { SuggestId } from './suggest-id/suggest-id'
export const TABS = {
FIELDS: 'fields',
@@ -165,7 +165,7 @@ export const OccurrenceDetails = ({
taxonId={occurrence.determinationTaxon.id}
/>