Merge pull request #248 from MetaCell/feature/SCKAN-265

Feature/sckan 265 267
MetaCell · Mar 19, 2024 · 3a774a9 · 3a774a9
2 parents 55b51f5 + f9bb329
commit 3a774a9
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 38 deletions.
diff --git a/frontend/src/components/Forms/StatementForm.tsx b/frontend/src/components/Forms/StatementForm.tsx
@@ -198,7 +198,7 @@ const StatementForm = (props: any) => {
           await api.composerViaDestroy(element.children.props.formData.id);
           refreshStatement();
         }}
-        onElementAdd={async (element: any) => {
+        onElementAdd={async () => {
           await api.composerViaCreate({
             id: -1,
             order: statement?.vias?.length,
@@ -354,7 +354,7 @@ const StatementForm = (props: any) => {
           },
           refreshStatement: () => refreshStatement(),
           errors: "",
-          mapValueToOption: (anatomicalEntities: any[], formId: any) => {
+          mapValueToOption: (anatomicalEntities: any[]) => {
             const entities: Option[] = [];
             const selected = findMatchingEntities(
               statement,
@@ -386,7 +386,7 @@ const StatementForm = (props: any) => {
           );
           refreshStatement();
         }}
-        onElementAdd={async (element: any) => {
+        onElementAdd={async () => {
           await api.composerDestinationCreate({
             id: -1,
             connectivity_statement: statement.id,
@@ -536,7 +536,7 @@ const StatementForm = (props: any) => {
           },
           refreshStatement: () => refreshStatement(),
           errors: "",
-          mapValueToOption: (anatomicalEntities: any[], formId: any) => {
+          mapValueToOption: (anatomicalEntities: any[]) => {
             const entities: Option[] = [];
             const selected = findMatchingEntities(
               statement,
@@ -573,6 +573,7 @@ const StatementForm = (props: any) => {
   copiedUISchema.forward_connection = {
     "ui:widget": CustomEntitiesDropdown,
     "ui:options": {
+      chipsNumber: 10,
       isDisabled,
       placeholder: "Forward connection(s)",
       searchPlaceholder: "Search for Connectivity Statements",

diff --git a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx
@@ -2,7 +2,6 @@ import {Box, Chip, Tooltip} from "@mui/material";
 import {Option} from "../../types";
 import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 import React from "react";
-
 const CustomChipBoxComponent = ({
    selectedOptions,
    CustomInputChip,
@@ -21,41 +20,47 @@ const CustomChipBoxComponent = ({
       width: 'fit-content',
       maxWidth: 'fit-content',
     }
+
+  const renderChipOrCustomInput = (item: Option) => (
+    <Tooltip
+      title={item?.label}
+      placement="top"
+      arrow
+      key={item.id}
+    >
+      {CustomInputChip ? (
+        <CustomInputChip sx={styles.chip} entity={item} />
+      ) : (
+        <Chip
+          sx={{
+            ...styles.chip,
+            ...extraChipStyle
+          }}
+          variant={"outlined"}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          deleteIcon={<ClearOutlinedIcon />}
+          onDelete={!isDisabled ? (e) => {
+            e.stopPropagation();
+            handleChipRemove(item);
+          } : undefined}
+          label={item?.label}
+        />
+      )}
+    </Tooltip>
+  );
+
+
   return (
     <Box gap={1} display="flex" flexWrap="wrap" alignItems="center">
-      {selectedOptions?.length ? (
+      {!isDisabled && selectedOptions?.length ? (
         selectedOptions
           .slice(0, chipsNumber)
-          .map((item: Option, index: number) => (
-            <Tooltip
-              title={item?.label}
-              placement="top"
-              arrow
-              key={item.id}
-            >
-              {CustomInputChip ? (
-                <CustomInputChip sx={styles.chip} entity={item} />
-              ) : (
-                <Chip
-                  sx={{
-                    ...styles.chip,
-                    ...extraChipStyle
-                  }}
-                  variant={"outlined"}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  deleteIcon={<ClearOutlinedIcon />}
-                  onDelete={!isDisabled ? (e) => {
-                    e.stopPropagation();
-                    handleChipRemove(item);
-                  } : undefined}
-                  label={item?.label}
-                />
-              )}
-            </Tooltip>
-          ))
-      ) : null}
+          .map((item: Option) => renderChipOrCustomInput(item))
+      ) : (
+        selectedOptions?.map((item: Option) => renderChipOrCustomInput(item))
+      )}
       {!isDisabled && selectedOptions.length > chipsNumber && (
         <span style={{ marginRight: ".5rem" }}>
           +{selectedOptions.length - chipsNumber}

diff --git a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx
@@ -98,7 +98,6 @@ const styles = {
     height: "1.5rem",
     borderRadius: "0.375rem",
     fontSize: "0.875rem",
-    maxWidth: "8rem",
     fontWeight: 500,
 
     "&.MuiChip-filled": {
@@ -484,7 +483,6 @@ export default function CustomEntitiesDropdown({
                   gap={1}
                   sx={{
                     borderBottom: `0.0625rem solid ${popperBorderColor}`,
-                    height: autocompleteOptions.length > 0 ? "2.75rem" : "auto",
                     padding:
                       autocompleteOptions.length > 0 ? "0 0.875rem" : "0.875rem",
                   }}