frontend styling and some journey improvements

backend/composer/api/serializers.py

@@ -558,7 +558,7 @@ def create_statement_preview(self, instance, journey):
         laterality_description = instance.get_laterality_description()
 
         apinatomy = instance.apinatomy_model if instance.apinatomy_model else ""
-        journey_sentence = ', '.join(journey)
+        journey_sentence = ';  '.join(journey)
 
         # Creating the statement
         if sex or species != "":

backend/composer/models.py

@@ -258,7 +258,7 @@ class Meta:
         verbose_name_plural = "Region/Layer Combinations"
 
     def __str__(self):
-        return f'{self.region.name} - {self.layer.name}'
+        return f"{self.region.name} ({self.layer.name})"
 
 
 class AnatomicalEntity(models.Model):
@@ -268,9 +268,9 @@ class AnatomicalEntity(models.Model):
     @property
     def name(self):
         if self.simple_entity:
-            return self.simple_entity.name
-        elif self.region_layer:
-            return f'{self.region_layer.region.name},{self.region_layer.layer.name}'
+            return str(self.simple_entity)
+        if self.region_layer:
+            return str(self.region_layer)
         return 'Unknown Anatomical Entity'
 
     @property

frontend/src/components/ProofingTab/ProofingTab.tsx

@@ -77,13 +77,15 @@ const ProofingTab = (props: any) => {
                 <Stack spacing={2}>
                   <Typography variant="h5">Journey</Typography>
                     {statement.journey.map((journeyStep: string, index: number) => {
-                      if (index === 0) {
-                          return <>{journeyStep.charAt(0).toUpperCase() + journeyStep.slice(1)}, </>;
+                      if (index === 0 && index === statement.journey.length - 1) {
+                          return <>{journeyStep.charAt(0).toUpperCase() + journeyStep.slice(1)}. </>;
+                      } else if (index === 0) {
+                        return <>{journeyStep.charAt(0).toUpperCase() + journeyStep.slice(1)}; </>;
                       } else {
                         if (index === statement.journey.length - 1) {
                           return <>{journeyStep}.</>;
                         } else {
-                          return <>{journeyStep}, </>;
+                          return <>{journeyStep}; </>;
                         }
                       }
                     })}

frontend/src/components/Widgets/CustomEntitiesDropdown.tsx

@@ -353,6 +353,14 @@ export default function CustomEntitiesDropdown({
     }
   }, [inputValue, id, onSearch, postProcessOptions, selectedOptions]);
 
+  const getLabel = (option: Option) => {
+    if (option?.content.length > 3) {
+      const index = option?.label.lastIndexOf('(');
+      return <> {option?.label.slice(0, index)} <b>{option.label.slice(index)}</b> </>;
+    } else {
+      return option?.label;
+    }
+  }
 
   useEffect(() => {
     if (!isDropdownOpened) return;
@@ -747,7 +755,7 @@ export default function CustomEntitiesDropdown({
                                     >
                                       {option?.label?.length > 100
                                         ? option?.label.slice(0, 100) + "..."
-                                        : option?.label}
+                                        : getLabel(option)}
                                     </Typography>
                                     <Typography whiteSpace="nowrap" variant="body2">
                                       {option?.id}