LF-4696: UI to display ensemble sensors list #3686

SayakaOno · 2025-02-10T23:35:35Z

Description

Add MainContent component (usable in ExpandableItem)
- simple variant story
- decorated variant story
  - Implemented based on initial design. When expanded, a "remove" button appears. The removal action is intended to be handled within the component. (Note: the Styles appear off in Storybook due to the known issues)
Update WithStepperProgressBar
- Add getValues() as an argument to onAfterSave
Add OverviewStats component (will be adjusted later if necessary)
- story
Fix PageTitle prop type
Add EsciSensors component
Add SensorTable component
- A new variant is expected to be added for the field technology tab later
Adjust Cell components for better reusability
Update TableHeader
- Add missing className
- Hide the invisible icon that takes up unnecessary space
Add SensorList container
- Implement URL parsing, hook call, and loading screen
Add useGroupedSensors hook
- Implement API call and format data by converting depth values, adding fields, etc.
Update the sensor list URL to /sensors?partner_id={partnerId}

Jira link: https://lite-farm.atlassian.net/browse/LF-4696

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have added "MISSING" for all new language tags to languages I don't speak
I have added the GNU General Public License to all new files

…onent

SayakaOno · 2025-02-12T00:26:13Z

packages/webapp/src/assets/images/map/signal-01.svg

Am I the only one who gets stressed when finding the right icons? I've been renaming svgs, but I kept it this time since it would be easier if the name stays the same as in figma... (I always struggle with placing icons in the right folder too...)

You're not the only one, the icons folder is a mess 😂 we'd probably need to take a look at what the icon library looks like in FIgma and then organize ours accordingly.

SayakaOno · 2025-02-12T20:50:17Z

NOTE: I plan to update "ESCI" to "ESci" in translations in another PR for reorganizing folders and files.

kathyavini

I really like how this code is organised and the components broken up ❤️ I particularly like the new components OverviewStats and MainContent and I hope we will push back harder on any future designs that create yet more patterns of expandable and/or KPI! It would be nice to instead see these again elsewhere in app.

(Note: the Styles appear off in Storybook due to the known issues)

That is this, right?

I think I usually just over-specify the selectors in the SCSS (e.g. the yes/no buttons could be nested under their container) until it also works in Storybook -- is that a bad habit?

Edit:
One thing that is not at all blocking for this PR (it's really for Loïc, but I want to remind ourselves to check next week)...

This was the design based upon the two sensors Loïc saw on the Ensemble website. When he asked Morten if these were the only two possibilities, Morten said "no" and replied with the list of all sensor types. I don't think the designs got updated subsequently and we should circle back on this. I'm pretty sure all the possible sensor types should be allowable in KPI. The code is very extensible here (🙏 ) so the adjusts can definitely be made after merge.

kathyavini · 2025-02-13T19:57:55Z

packages/webapp/public/locales/en/translation.json

@@ -1826,6 +1834,7 @@
    "MONTHS_AGO": "{{time}} month(s) ago",
    "NO_DATA": "(no data)",
    "NO_DATA_FOUND": "No sensor readings found",
+    "PARTNER_SENSOR_LIST": "{{partner}} sensor list",


I still don't know if this might be fundamentally the better solution (to interpolate 'Ensemble' and 'ESci' in English wherever they occur), but I think what we decided on Wednesday was that it should be part of the string so it can be transliterated into different scripts if desired by the translators.

At the same time I had forgotten that the loading screen also interpolates {{dataName}} so right now we're mixed. I think I would prefer to stick to either one or the other throughout 🤔 Maybe @antsgar has an opinion on that?

packages/webapp/src/components/Expandable/styles.module.scss

packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx

packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/constants.ts

packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx

kathyavini · 2025-02-13T23:55:28Z

packages/webapp/src/components/Expandable/styles.module.scss

+}
+
+.inlineRemoveWarning,


Just curious -- is it because I used grid in the other one that it's not possible to extract a shared visual component between this and AnimalFormHeaderItem? Or is it just more trouble than it's worth?

I wrote this a long time ago, so I don’t fully remember what I did…😅 But I think AnimalFormHeaderItem is more complex than what this reusable component can cover, so I likely treated them as separate things. Was there a specific part where you saw a difference?

Oh no, not a difference but I just saw the chunk of code wrapped by the div with .inlineRemoveWarning was so close to duplicated I thought maybe you would have tried to extract it first and maybe that didn't work out? But it's not so much code that it matters.

Yes unfortunately AnimalFormHeaderItem is different enough again such that I don't think it could ever use MainContent 😜 So many expandables!

Ah you were referring to inlineRemoveWarning specifically! (It's so obvious looking back 😂)
I think I just got lazy and didn’t create a new component, which makes no sense... 🙄
I'll clean that up in the next PR 🙏

Co-authored-by: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>

SayakaOno

Thank you Joyce for reviewing and for checking unused ones as well 🙏

I think I addressed all comments and also pushed a missed commit for OverviewStats styles, along with a small improvement to MainContent (making errorCount optional).

I always want to nest CSS! It's more readable than comments... It fixed the styling in Storybook perfectly, thank you!

I spent too much time accommodating the unknowns in the KPI, so I'm hoping we'll just be adding more types without many adjustments 🤞 I'll check with Loïc next week!

SayakaOno · 2025-02-14T21:59:06Z

packages/webapp/src/components/Expandable/styles.module.scss

+}
+
+.inlineRemoveWarning,


I wrote this a long time ago, so I don’t fully remember what I did…😅 But I think AnimalFormHeaderItem is more complex than what this reusable component can cover, so I likely treated them as separate things. Was there a specific part where you saw a difference?

kathyavini

Oh I love that with MainContent having its own set of stories 😍

Looks great!

antsgar

So much code here and yet really readable and easy to follow, great work @SayakaOno! Unfortunately I wasn't able to see it come to life because the Ensemble API is currently erroring out but the code looks great 👏

antsgar · 2025-02-18T02:56:07Z

packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx

+const formatKpiLabel: OverviewStatsProps['format'] = (statsKey, label) => {
+  const Icon = statsKey === SENSOR_ARRAY ? SensorArrayIcon : SensorIcon;
+  return (
+    <div className={styles.kpiLabel}>
+      <span className={styles.iconWrapper}>
+        <Icon />
+      </span>
+      <span className={styles.text}>{label}</span>
+    </div>
+  );
+};


Perhaps this could be a component instead of a plain function, since it returns a React node?

Suggested change

const formatKpiLabel: OverviewStatsProps['format'] = (statsKey, label) => {

const Icon = statsKey === SENSOR_ARRAY ? SensorArrayIcon : SensorIcon;

return (

<div className={styles.kpiLabel}>

<span className={styles.iconWrapper}>

<Icon />

</span>

<span className={styles.text}>{label}</span>

</div>

);

};

const FormatKpiLabel: OverviewStatsProps['format'] = (statsKey, label) => {

const Icon = statsKey === SENSOR_ARRAY ? SensorArrayIcon : SensorIcon;

return (

<div className={styles.kpiLabel}>

<span className={styles.iconWrapper}>

<Icon />

</span>

<span className={styles.text}>{label}</span>

</div>

);

};

and then in the OverviewStats component

<span className={styles.category}>{FormattedLabelComponent ? <FormattedLabelComponent key={key} label={label} /> : label}</span>

antsgar · 2025-02-18T02:58:01Z

packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx

+        format={formatKpiLabel}
+        isCompact={isCompact}
+      />
+      <div className={styles.sensorGroups}>


Should this be ul instead of div since it's a list? We're probably defaulting to divs a bit too much in general and should try to use more semantic tags if possible

That's a good point, and this is definitely a list!
It wouldn't be a quick change since ExpandableItem would need the ability to render li and div conditionally, but we could create a ticket to update it!

antsgar · 2025-02-18T02:59:26Z

packages/webapp/src/containers/SensorList/useGroupedSensors.ts

+type SensorsMapKeys = SensorArray['id'] | typeof STANDALONE;
+type MappedSensors = { [key: SensorsMapKeys]: SensorInSimpleTableFormat[] };
+
+const formatSenorArrayToGroup = (


Suggested change

const formatSenorArrayToGroup = (

const formatSensorArrayToGroup = (

antsgar · 2025-02-18T03:02:30Z

packages/webapp/src/components/Sensor/v2/EsciSensorList/index.tsx

+  summary: SensorSummary;
+};
+
+const EsciSensorList = ({ groupedSensors, summary }: EsciSensorListProps) => {


I'm curious, do you think this component is specific to ESci and would not be applicable if we were to integrate another partner?

I’m hoping we can make this component reusable for another partner in the future with minimal changes. The title and sensor table header are currently ESci specific, making the component non-reusable, so I named it accordingly!

…s_list_B

…wStats

SayakaOno · 2025-02-18T21:46:47Z

Thank you @antsgar for reviewing and suggestions!

@kathyavini I think I've addressed Anto's comments, it would be appreciated if you could review the changes. Thank you!

kathyavini

Changes look good! With integration merged did you also want to grab this TODO on this PR or separately? (It's just supplying the sensor list URL to the Partner and FarmAddon links)

SayakaOno · 2025-02-18T22:22:26Z

Oh, thank you for the reminder! I wouldn’t want to ask you for another re-review 😂, so I'll include it in my next PR!

SayakaOno added 30 commits February 10, 2025 13:45

LF-4696 Update TableV2 to accept more classNames

5befcec

LF-4696 Add reusable MainContent for Expandable

a88e919

LF-4696 Add stories for Expandable MainContent

1b52a5b

LF-4696 Add iconType and remove isRemovable props in MainContent comp…

08daef6

…onent

LF-4696 Add and modify ExpandableItem stories

f5b05c5

LF-4696 Add useGroupedSensors hook

7c1cb87

LF-4696 Add sensor icon svg, update iconMap

108c116

LF-4696 Add className prop to PlainCell

f9c692d

LF-4696 Adjust IconText cell props type

fca4bbd

LF-4696 Add System type

e8db5c8

LF-4696 Add SensorInSimpleTableFormat type

76ca033

LF-4696 Add SensorTable component

f167420

LF-4696 Update useGroupedSensors hook

39ba6bd

LF-4696 Export IconType from MainContent

3029748

LF-4696 Update AreaLocation type

7d42d98

LF-4696 Update useGroupedSensors to include field names

a44d530

LF-4696 Fix id for standalone sensors

2c5b84a

LF-4696 Add translations

7ecfebd

LF-4696 Return loading status from useGroupedSensors

bf90eea

LF-4696 Add EsciDevices component

fab3dfc

LF-4696 Fix sensor device type

35ac6ab

LF-4696 Add translations for device types

6a3b401

LF-4696 Update SensorTable to use device type translation

e2d878f

LF-4696 Rename EsciDevices to EsciSensors

f345a90

LF-4696 Update TableV2 to support className for columns

6b2eeb3

LF-4696 Add missing className to TableV2 th

348c6f7

LF-4696 Remove invisible svg in Table header when not sortable

e10ca4f

LF-4696 Add mobile styles for sensor table

89c44e1

LF-4696 Fix PageTitle classNames title propType

155603e

LF-4696 Fix useGroupedSensors to handle no standalone sensors

bc3a000

LF-4696 Cleanup

662485a

SayakaOno commented Feb 12, 2025

View reviewed changes

SayakaOno marked this pull request as draft February 12, 2025 17:14

SayakaOno marked this pull request as ready for review February 12, 2025 20:48

SayakaOno added the new translations New translations to be sent to CrowdIn are present label Feb 12, 2025

kathyavini mentioned this pull request Feb 13, 2025

LF-4693 Display existing Ensemble addon #3685

Merged

16 tasks

kathyavini reviewed Feb 14, 2025

View reviewed changes

SayakaOno and others added 7 commits February 14, 2025 13:43

Update packages/webapp/src/components/Expandable/styles.module.scss

90fb169

Co-authored-by: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>

LF-4696 Update OverviewStats scss to handle many items

63f6bb5

LF-4696 Fix misspelling

937b383

LF-4696 Remove comment

91085a0

LF-4696 Improve MainContent stories

68a7d8f

LF-4696 Reorganize CSS for MainContent

1d995b1

LF-4696 Make MainContent errorCount prop optional

22234a1

SayakaOno commented Feb 14, 2025

View reviewed changes

kathyavini previously approved these changes Feb 15, 2025

View reviewed changes

antsgar previously approved these changes Feb 18, 2025

View reviewed changes

SayakaOno added 3 commits February 18, 2025 12:00

Merge branch 'integration' into LF-4696/UI_to_display_Ensemble_sensor…

fc05089

…s_list_B

LF-4696 Change format prop to FormattedLabelComponent prop in Overvie…

df2915b

…wStats

LF-4696 Fix typo

3d143fa

SayakaOno dismissed stale reviews from antsgar and kathyavini via 3d143fa February 18, 2025 21:45

kathyavini approved these changes Feb 18, 2025

View reviewed changes

SayakaOno added this pull request to the merge queue Feb 18, 2025

Merged via the queue into integration with commit b43b4ae Feb 18, 2025
4 of 5 checks passed

SayakaOno mentioned this pull request Feb 19, 2025

Reorganize and finalize ensemble addon UI #3693

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LF-4696: UI to display ensemble sensors list #3686

LF-4696: UI to display ensemble sensors list #3686

SayakaOno commented Feb 10, 2025 •

edited

Loading

SayakaOno Feb 12, 2025

antsgar Feb 13, 2025

SayakaOno commented Feb 12, 2025

kathyavini left a comment •

edited

Loading

kathyavini Feb 13, 2025 •

edited

Loading

kathyavini Feb 13, 2025

SayakaOno Feb 14, 2025

kathyavini Feb 15, 2025

SayakaOno Feb 15, 2025

SayakaOno left a comment

SayakaOno Feb 14, 2025

kathyavini left a comment

antsgar left a comment

antsgar Feb 18, 2025

antsgar Feb 18, 2025

SayakaOno Feb 18, 2025

antsgar Feb 18, 2025

antsgar Feb 18, 2025

SayakaOno Feb 18, 2025

SayakaOno commented Feb 18, 2025

kathyavini left a comment •

edited

Loading

SayakaOno commented Feb 18, 2025

	const formatSenorArrayToGroup = (
	const formatSensorArrayToGroup = (

		}

		.inlineRemoveWarning,

		}

		.inlineRemoveWarning,

LF-4696: UI to display ensemble sensors list #3686

LF-4696: UI to display ensemble sensors list #3686

Conversation

SayakaOno commented Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SayakaOno commented Feb 12, 2025

kathyavini left a comment • edited Loading

Choose a reason for hiding this comment

kathyavini Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SayakaOno left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathyavini left a comment

Choose a reason for hiding this comment

antsgar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SayakaOno commented Feb 18, 2025

kathyavini left a comment • edited Loading

Choose a reason for hiding this comment

SayakaOno commented Feb 18, 2025

SayakaOno commented Feb 10, 2025 •

edited

Loading

kathyavini left a comment •

edited

Loading

kathyavini Feb 13, 2025 •

edited

Loading

kathyavini left a comment •

edited

Loading