All files / src/pages/flowsheet-page/flowsheet/PropertiesSidebar GroupData.tsx

54.54% Statements 6/11
66.66% Branches 2/3
25% Functions 1/4
60% Lines 6/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95                                                    105x 105x 105x 105x   105x                                     105x                                                                                        
import { ScrollArea } from "@/ahuora-design-system/ui/scroll-area";
import { TabsComponent } from "@/ahuora-design-system/ui/tabs-content";
import {
  AbstractionTypeEnum,
  api,
  useGraphicsgroupingsPartialUpdateMutation,
} from "@/api/apiStore.gen";
import { useSelectedGroup } from "@/hooks/flowsheetObjects";
import { useProjectId } from "@/hooks/project";
import { useAppDispatch } from "@/store/hooks";
import { GroupConnectionList } from "./Connections/GroupConnectionList";
import { GroupingTypeDropdown } from "./GroupingTypeDropdown";
import { GroupProperties } from "./GroupProperties";
import { GroupPropertySelection } from "./GroupPropertySelection";
import { ObjectDataProps } from "./ObjectDataProps";
import { ObjectsPanel } from "./ObjectsPanel";
 
export function GroupData({
  schema: _schema,
  openAccordions: _openAccordions,
  setOpenAccordions: _setOpenAccordions,
  onCreateMonitoringTable,
  onToggleMonitoringTableVisibility,
  onDeleteMonitoringTable,
  monitoringTables = [],
}: ObjectDataProps) {
  const dispatch = useAppDispatch();
  const [updateGrouping] = useGraphicsgroupingsPartialUpdateMutation();
  const flowsheetId = useProjectId();
  const grouping = useSelectedGroup();
 
  const handleAbstractionTypeChange = (value: AbstractionTypeEnum) => {
    dispatch(
      api.util.updateQueryData(
        "graphicsgroupingsList",
        { flowsheet: flowsheetId },
        (groupings) => {
          const group = groupings.find((g) => g.id == grouping!.id);
          group!.abstractionType = value;
        }
      )
    );
    updateGrouping({
      id: grouping!.id,
      patchedGrouping: {
        abstractionType: value,
      },
    });
  };
 
  return (
    <ScrollArea className="w-full h-full">
      {grouping && (
        <GroupingTypeDropdown
          value={grouping.abstractionType!}
          onChange={handleAbstractionTypeChange}
        />
      )}
      <TabsComponent
        tabData={{
          Properties: {
            header: (
              <GroupPropertySelection
                handleCreateMonitoringTable={onCreateMonitoringTable}
              />
            ),
            value: (
              <GroupProperties
                monitoringTables={monitoringTables}
                onToggleVisibility={onToggleMonitoringTableVisibility}
                onDeleteTable={onDeleteMonitoringTable}
              />
            ),
            tabTriggerValue: "properties",
          },
          Connections: {
            value: <GroupConnectionList />,
            tabTriggerValue: "connections",
          },
          Objects: {
            value: <ObjectsPanel />,
            subTabHeader: {
              bg: "blend",
              type: "hShort",
              tabValues: ["All", "Units", "Streams"],
            },
            tabTriggerValue: "objects",
          },
        }}
        className="p-4"
      />
    </ScrollArea>
  );
}