Add support for relations #2

sal-gassen · 2022-09-14T11:54:51Z

Add a new property type "relation" which enables the user to connect one entity with another.

Relations and its related properties will be listed separately. The user can toggle the visibility of the related properties.
There is a switch to enable/disable each related property. If disabled, the opacity of the property is reduced, to indicate it is not used in the entity.
If a property gets added, updated, or deleted in the parent entity, the relation gets updated. In the case of "add property", this property will be disabled in the related entity.
Each relation is linked to its parent. If clicked on, the viewport adjusts to focus on the parent.

Image Select Relation:

Image Relation:

Further plans from my side:

Add a reference: A reference is basically a copy of an entity. Which I would use to markup designs. I was thinking of the figma annotate example for the design direction. The reference would link to the original entity and the viewport would adjust.

Let me know what you think.

enable delete,rename,add

stefanwittwer · 2022-09-18T15:18:56Z

Wow, great work! That's a very useful addition to the widget.
I'll review it in more detail soon; but looks great on first glance. Props to you for making this work!

sal-gassen · 2022-10-04T11:40:32Z

Hi Stefan,
do you had a chance to review the changes?
I am currently working on a project and rely on the changes I submitted.
Do you have a timeline for me when you will be able to review the PR?

Thanks,
Fabian

stefanwittwer

Hi Fabian,
So sorry to have kept you waiting, have had a lot on my plate recently.
I've finally had a chance now to look over it and also test it locally in my Figma instance. Great job so far and thanks again for contributing! I definitely see this being very useful.

It works as advertised, toggling related properties on/off works really well and is intuitive, and I also especially love the ability to jump to the related widget by clicking on the related type.

There are a couple of things I think we would need to work through before releasing it to others.

Some minor things I've commented directly on the files in the PR.
In addition to those:

From a design standpoint, while it's a great start, it doesn't completely fit the look and feel of the rest of the widget just yet. However I think there aren't drastic changes necessary to achieve this, just a few minor improvements:
- I think we should consider removing the background for relations and make them more consistent with the rest of the properites, so that they fit in better, and moving down the "show details" toggle so there's no interruption for the eye when scanning the list.
- When adding a new relation, we should probably add an instruction or something when the user is supposed to select to which other entity the relation should be. It took me a minute to get. A short hint when the picker is open could clear that up.
- The "add new relation" panel should probably appear at the bottom of all existing relations. It currently shows up at the very top, which is a bit odd since the the new relation, once added, will be added at the bottom, consistent with how other properties appear when clicking the Plus button.
- The empty state has gotten a bit large. I think we could omit the relation-specific empty state since the instructions are pretty much included in the first empty state.
- When there are no relations, we should hide the divider.
- Here's a quick mockup of how it could look:

While testing, I have noticed this behaviour where adding a property to one entity somehow incorrectly syncs to the different related entities. Here's a screencast:
https://user-images.githubusercontent.com/5149339/194778585-bda118ee-c481-46fa-ab5a-b49357a1ff04.mp4
I think this happens when a user duplicates a widget instance to create a new one. While it's a fully new instance, it still seems to be linked to the relation, so any changes to the duplicate are also incorrectly applied to relations of the original. Can you reproduce the issue?
Also a small thing, but it looks to me like some of the formatting and indentation has become inconsistent. A quick reformat of all files using Prettier should do the trick (there's a .prettierrc in the root dir so it should automatically take the right config).

Thanks again for your effort! I hope I articulated myself clearly enough. Let me know if you have any questions or differing points of view.

stefanwittwer · 2022-10-09T19:25:19Z

src/Widget.tsx

+    }
+  })
+
+  const addPropertyToRelatedEntities = (propertyId , propertyToAdd) => {


The arguments propertyId and propertyToAdd should be typed instead of implicitly any.

stefanwittwer · 2022-10-09T19:29:29Z

src/Widget.tsx

  }
+
+  const updatePropertyinRelations = (propertyId: string, property: Property) => {


Could you uppercase the "i" in the method name?

stefanwittwer · 2022-10-09T19:31:59Z

src/Widget.tsx

+  })
+
+  const addPropertyToRelatedEntities = (propertyId , propertyToAdd) => {
+    let relatedWidgets = [...getRelatedWidgets()]


This variable is initialised with let, but never reassigned as far as I can tell.

stefanwittwer · 2022-10-09T19:38:40Z

src/Widget.tsx

+        availableEntities: relatedWidget.widgetSyncedState["availableEntities"],
+        typeToAdd: relatedWidget.widgetSyncedState["typeToAdd"],
+        showRelatedProperties: relatedWidget.widgetSyncedState["showRelatedProperties"]
+      }


Maybe we should consider extracting a function to return this syncedStates object from a relatedWidget, as this is repeated multiple times in this file and a bit verbose. This would make it easier and less error-prone down the road if we add additional states to an entity.

stefanwittwer · 2022-10-09T19:42:50Z

src/Widget.tsx

+  }
+
+  const getWidgets = () => {
+    let collectedWidgets = []


Because this is initialised as an empty erray, it is implictly any[], which then also becomes the return-type of the function, leading to a lot of any across all use sites. We should either explicitly denote the type WidgetNode[] here.

stefanwittwer · 2022-10-09T19:44:33Z

src/Widget.tsx

+
+    relatedWidgets.forEach(relatedWidget => {
+      const state = relatedWidget.widgetSyncedState
+      let relations: SyncedMap<Relation> = state["relations"]


Looks to me like relations is never reassigned, so we can use const instead.

stefanwittwer · 2022-10-09T19:48:16Z

src/components/EntityRow.tsx

+    const title = props.entity["title"]
+
+    return (
+        <AutoLayout direction={"horizontal"} verticalAlignItems="center" spacing={4}>


Extraneous curly braces around "horizontal"

stefanwittwer · 2022-10-09T19:56:14Z

src/components/EntityRow.tsx

+}
+
+interface EntityRowProps {
+    entity: any


At this point, we should create an interface for Entity, so we can get better type-safety here.

stefanwittwer · 2022-10-09T19:56:51Z

src/components/SelectEntity.tsx

@@ -0,0 +1,14 @@
+interface SelectEntityProps {
+    availableEntities: any


Same as in EntityRow.tsx

stefanwittwer · 2022-10-09T19:59:29Z

src/types/Relation.ts

+    title: string
+    relatedEntity: string
+    relatedTitle: string
+    relatedProperties: []


Is this Property[]? Or (Property & { propertyId: string })[]?
Since both seem to be used, we should probably make it clear here which one it is. (Maybe also create a type for the Property type that includes its id)

sal-gassen added 8 commits September 8, 2022 14:22

update gitignore

6704590

Additional icons

c99264c

Add PropertyTypeIcon for type relation

14b24b8

Add PropertyType / PropertyDisplayName for relation

7c631a5

Relation components / Relation type

4de7a11

Add relation functionality to Widget

9de5626

update relation properties when they change in parent

e3094bf

enable delete,rename,add

fix update issue / add keys to mapped components

79b4a98

stefanwittwer reviewed Oct 9, 2022

View reviewed changes

stefanwittwer closed this Aug 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for relations #2

Add support for relations #2

sal-gassen commented Sep 14, 2022

stefanwittwer commented Sep 18, 2022

sal-gassen commented Oct 4, 2022

stefanwittwer left a comment •

edited

Loading

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

stefanwittwer Oct 9, 2022

		}

		const updatePropertyinRelations = (propertyId: string, property: Property) => {

		@@ -0,0 +1,14 @@
		interface SelectEntityProps {
		availableEntities: any

Add support for relations #2

Add support for relations #2

Conversation

sal-gassen commented Sep 14, 2022

stefanwittwer commented Sep 18, 2022

sal-gassen commented Oct 4, 2022

stefanwittwer left a comment • 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

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

stefanwittwer left a comment •

edited

Loading