index.tsx

import './index.scss';

import { schema as schemaDefn } from '@bcgsc-pori/graphkb-schema';
import CloseIcon from '@mui/icons-material/Close';
import EditIcon from '@mui/icons-material/Edit';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import {
  Collapse,
  Divider,
  Drawer,
  IconButton,
  List,
  ListItem,
  ListItemText,
  ListSubheader,
  Typography,
} from '@mui/material';
import React, { ReactNode, useEffect, useState } from 'react';
import { Link } from 'react-router';

import { GeneralRecordType } from '@/components/types';
import schema from '@/services/schema';
import util from '@/services/util';

import { useAuth } from '../Auth';
import LinkEmbeddedPropList from './LinkEmbeddedPropList';
import RelationshipList from './RelationshipList';
import SetPropsList from './SetPropsList';
import TextRow from './TextRow';

/**
 * Takes properties list to be displayed in detail drawer and promotes an inputted
 * property to top of the list. For display purposes.
 *
 * @property {Array.<PropertyModel>} properties array of property models to be rearranged
 * @property {string} propToBeMovedToTop property to be promoted to top of array for display
 */
const movePropToTop = (properties, propToBeMovedToTop) => {
  const propIndex = properties.findIndex((prop) => prop.name === propToBeMovedToTop);
  const updatedProperties = [...properties];

  if (propIndex !== 0 && propIndex !== -1) {
    updatedProperties.splice(propIndex, 1);
    updatedProperties.unshift(properties[propIndex]);
  }
  return updatedProperties;
};

interface DetailDrawerProps {
  /** Function triggered on @mui/Drawer onClose event. */
  isEdge?: boolean;
  /** Ontology to be displayed in drawer. */
  node?: GeneralRecordType;
  onClose?: () => void;
}

/**
 * Component used to display record details in a side drawer. Dynamically
 * generates display based on record, and its corresponding schema entry.
 */
function DetailDrawer(props: DetailDrawerProps) {
  const {
    node,
    onClose,
    isEdge = false,
  } = props;
  const auth = useAuth();

  const [opened, setOpened] = useState<string[]>([]);

  /**
   * Toggles collapsed list item.
   * @param key - list item key.
   */
  const handleExpand = (key: string) => {
    if (opened.includes(key)) {
      opened.splice(opened.indexOf(key), 1);
    } else {
      opened.push(key);
    }
    setOpened([...opened]);
  };

  const [linkOpen, setLinkOpen] = useState<string | null>(null);

  /**
   * Toggles collapsed link list item.
   * @param  key - list item key.
   */
  const handleLinkExpand = (key: string) => {
    if (linkOpen === key) {
      setLinkOpen(null);
      setOpened(opened.filter((o) => !o.includes(key)));
    } else {
      setLinkOpen(key);
    }
  };

  /**
   * Formats properties, varying structure based on property type. Base function
   * that other formatting functions call.
   * @param {Object} record - Record being displayed for its details.
   * @param {Array.<Object>} properties - List of property models to display.
   * @param {boolean} isNested - Nested flag.
   */
  const formatProps = (record, properties, isNested) => {
    const identifiers = ['displayName', '@rid', 'sourceId'];
    const updatedProperties = movePropToTop(properties, 'displayName');

    return updatedProperties.map((prop) => {
      const { type } = prop;
      let { name } = prop;
      let value = record[name];
      if (!value) return null;
      if (type === 'embeddedset' || type === 'linkset') {
        const formattedSetProps = (
          <SetPropsList
            handleExpand={handleExpand}
            identifiers={identifiers}
            opened={opened}
            prop={prop}
            value={value}
          />
        );
        return formattedSetProps;
      }
      if ((type === 'link' || type === 'embedded') && value['@class']) {
        const linkEmbeddedProps = (
          <LinkEmbeddedPropList
            // eslint-disable-next-line no-use-before-define
            formatOtherProps={formatOtherProps}
            handleExpand={handleExpand}
            identifiers={identifiers}
            isNested={isNested}
            opened={opened}
            prop={prop}
            value={value}
          />
        );
        return linkEmbeddedProps;
      }
      if (name === 'displayNameTemplate') {
        name = 'Statement';
        value = schema.getLabel(node, { truncate: false });
      }
      return (
        <TextRow
          handleExpand={handleExpand}
          isNested={isNested}
          isStatic
          name={name}
          opened={opened}
          value={value}
        />
      );
    });
  };

  /**
   * Closes all expanded list properties.
   * @param {Object} prevProps - Component's previous props.
   */
  useEffect(() => {
    if (!node) {
      setOpened([]);
      setLinkOpen(null);
    }
  }, [node]);

  /**
   * Formats record metadata.
   * @param {Object} record - Record to be formatted.
   * @param {boolean} isNested - Nested flag.
   */
  const formatMetadata = (record, isNested) => formatProps(record, schema.getMetadata(), isNested);

  /**
   * Formats non-identifying, non-metadata properties of the input record.
   * @param {Object} node - Record being displayed.
   * @param isNested - Nested flag indicating if record is embedded
   */
  const formatOtherProps = (record, isNested?: boolean) => {
    const identifiers = ['@class', '@rid'];

    let properties = Object.keys(record)
      .map((key) => ({ name: key, type: util.parseKBType(record[key]) }));

    if (record['@class'] && schemaDefn.getProperties(record['@class'])) {
      properties = schema.getProperties(record['@class']);
    }
    const propsList = Object.values(properties)
      .filter((prop) => !identifiers.map((id) => id.split('.')[0]).includes(prop.name)
        && !prop.name.startsWith('in_')
        && !prop.name.startsWith('out_'));

    return formatProps(record, propsList, isNested);
  };

  const drawerIsOpen = Boolean(node);
  let content: ReactNode = null;

  if (drawerIsOpen) {
    const recordId = node?.['@rid']?.replace(/^#/, '');
    const recordClass = node?.['@class'];

    const otherProps = formatOtherProps(node);
    const metadata = formatMetadata(node, true);

    const metadataIsOpen = opened.includes('metadata');

    let preview;
    let errorMessage;

    try {
      preview = schema.getLabel(node);
      // Only for kbp nodes so far.
    } catch (e) {
      preview = 'Invalid variant';
      errorMessage = (e as Error).message;
    }
    content = (
      <div className="detail-drawer__content">
        <div className="detail-drawer__heading">
          <div>
            <Typography variant="h2">
              {preview}
            </Typography>
            {errorMessage && (
              <Typography color="error" variant="subtitle2">
                {errorMessage}
              </Typography>
            )}
          </div>
          {auth.hasWriteAccess && (
          <Link target="_blank" to={`/edit/${recordClass}/${recordId}`}>
            <IconButton>
              <EditIcon />
            </IconButton>
          </Link>
          )}
          <Link target="_blank" to={`/view/${recordClass}/${recordId}`}>
            <IconButton>
              <OpenInNewIcon />
            </IconButton>
          </Link>
          <IconButton onClick={() => onClose?.()}>
            <CloseIcon />
          </IconButton>
        </div>
        <Divider />
        {otherProps}
        <ListItem
          dense
          onClick={() => handleExpand('metadata')}
        >
          <ListItemText
            primary={<Typography>Metadata</Typography>}
          />
          {!metadataIsOpen ? <ExpandMoreIcon /> : <ExpandLessIcon />}
        </ListItem>
        <Collapse in={!!metadataIsOpen} unmountOnExit>
          <List
            className="detail-drawer__nested-list"
            dense
            disablePadding
          >
            {metadata}
          </List>
        </Collapse>
        <Divider />
        {!isEdge && (
          <>
            <ListSubheader className="detail-drawer__relationships-subheader">
              Relationships
            </ListSubheader>
            {!isEdge ? (
              <RelationshipList
                formatMetadata={formatMetadata}
                formatOtherProps={formatOtherProps}
                handleLinkExpand={handleLinkExpand}
                linkOpen={linkOpen}
                record={node}
              />
            ) : (
              <ListItem dense>
                <ListItemText
                  inset
                  primary="None"
                  primaryTypographyProps={{ color: 'textSecondary' }}
                />
              </ListItem>
            )}
          </>
        )}
      </div>
    );
  }

  return (
    <Drawer
      anchor="right"
      classes={{
        paper: `detail-drawer ${!drawerIsOpen
          ? 'detail-drawer--closed'
          : ''
        }`,
      }}
      open={drawerIsOpen}
      variant="permanent"
    >
      {content}
    </Drawer>
  );
}

export default DetailDrawer;