@arpproject/recrate 0.1.7 → 0.1.8

package/src/crate-builder/RenderEntity/RenderControls.tsx

@@ -1,278 +0,0 @@
-import React, { useState, useEffect, useMemo, useContext } from 'react';
-import { Button, Drawer, Popover, Typography, Modal, Flex } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { ArrowLeftOutlined, HomeOutlined, ArrowRightOutlined, CodeOutlined, EditOutlined, EyeOutlined, SaveOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import AddPropertyDialog from './DialogAddProperty';
-import EditContextDialog from './DialogEditContext';
-import PreviewCrateDialog from './DialogPreviewCrate';
-import BrowseEntitiesDialog from './DialogBrowseEntities';
-import SaveEntityAsTemplateDialog from './DialogSaveEntityTemplate';
-import { ProfileManagerContext } from '../Shell';
-import { useStateStore } from '../store';
-
-interface Config {
-  readonly?: boolean;
-  enableUrlMarkup?: boolean;
-  enableContextEditor?: boolean;
-  enableCratePreview?: boolean;
-  enableBrowseEntities?: boolean;
-  enableTemplateSave?: boolean;
-}
-
-interface RenderControlsProps {
-  entity: {
-    '@id': string;
-    '@type': string[];
-    etype?: string;
-    [key: string]: any;
-  };
-  onLoadEntity: (data: { id: string }) => void;
-  onBack: () => void;
-  onForward: () => void;
-  onAddPropertyPlaceholder: (property: any) => void;
-  onDeleteEntity: (data: { id: string }) => void;
-  onSaveEntityTemplate: (data: any) => void;
-  onUpdateContext: (data: any) => void;
-}
-
-const RenderControls: React.FC<RenderControlsProps> = ({
-  entity,
-  onLoadEntity,
-  onBack,
-  onForward,
-  onAddPropertyPlaceholder,
-  onDeleteEntity,
-  onSaveEntityTemplate,
-  onUpdateContext
-}) => {
-  const { t } = useTranslation();
-  const profileManager = useContext(ProfileManagerContext);
-  const state = useStateStore();
-
-  const [dialogs, setDialogs] = useState({
-    previewCrate: false,
-    editContext: false,
-    addProperty: false,
-    browseEntities: false,
-    saveEntityAsTemplate: false,
-    deleteConfirm: false,
-  });
-
-  const [definition, setDefinition] = useState<any>({});
-
-  const isRootDataset = useMemo(() => entity['@id'] === './', [entity]);
-  const isRootDescriptor = useMemo(
-    () => entity['@id'] === 'ro-crate-metadata.json' && entity['@type'].includes('CreativeWork'),
-    [entity]
-  );
-
-  useEffect(() => {
-    loadEntityDefinition();
-  }, [profileManager?.$key, entity['@id']]);
-
-  const loadEntityDefinition = () => {
-    if (!entity?.['@type'] || !profileManager?.getTypeDefinition) {
-      setDefinition('inherit');
-    } else {
-      setDefinition(profileManager.getTypeDefinition({ entity }));
-    }
-  };
-
-  type DialogType = keyof typeof dialogs;
-
-  const toggle = (dialog: DialogType) => {
-    setDialogs(prev => {
-      const newState = { ...prev };
-      Object.keys(newState).forEach(d => {
-        newState[d as DialogType] = d === dialog ? !prev[d] : false;
-      });
-      return newState;
-    });
-  };
-
-  const loadRootDataset = () => {
-    onLoadEntity({ id: './' });
-  };
-
-  const handleDeleteEntity = () => {
-    onDeleteEntity({ id: entity['@id'] });
-  };
-
-  const handleBack = () => {
-    state.editorState.back();
-    const latest = state.editorState.latest();
-    if (latest.id) {
-      onLoadEntity({ id: latest.id });
-    }
-  };
-
-  const handleForward = () => {
-    state.editorState.forward();
-    const latest = state.editorState.latest();
-    if (latest.id) {
-      onLoadEntity({ id: latest.id });
-    }
-  };
-
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const handleDeleteClick = () => {
-    setPopoverOpen(true);
-  };
-
-  const handleClose = () => {
-    setPopoverOpen(false);
-  };
-
-  const handleDeleteConfirm = () => {
-    onDeleteEntity({ id: entity['@id'] });
-    handleClose();
-  };
-
-  return (
-    <Flex className="flex-row gap-x-1">
-      {/* Navigation Controls */}
-      <Flex className="flex-row gap-x-1">
-        <Button
-          onClick={handleBack}
-          type="primary"
-          icon={<ArrowLeftOutlined />}
-        />
-        <Button
-          onClick={loadRootDataset}
-          type="primary"
-          icon={<HomeOutlined />}
-          disabled={isRootDataset}
-        />
-        <Button
-          onClick={handleForward}
-          type="primary"
-          icon={<ArrowRightOutlined />}
-        />
-      </Flex>
-
-      {/* Add Property Button */}
-      {!state.configuration?.readonly && (
-        <Button
-          onClick={() => toggle('addProperty')}
-          type="primary"
-          disabled={definition !== 'inherit'}
-          icon={<PlusOutlined />}
-        >
-          {t('add_label')}
-        </Button>
-      )}
-
-      {/* Context Editor Button */}
-      {state.configuration?.enableContextEditor && !state.configuration?.readonly && (
-        <Button
-          onClick={() => toggle('editContext')}
-          type="primary"
-          icon={<EditOutlined />}
-        >
-          {t('edit_context_label')}
-        </Button>
-      )}
-
-      {/* Preview Button */}
-      {state.configuration?.enableCratePreview && (
-        <Button
-          onClick={() => toggle('previewCrate')}
-          type="primary"
-          icon={<EyeOutlined />}
-        >
-          {t('preview_label')}
-        </Button>
-      )}
-
-      {/* Browse Entities Button */}
-      {state.configuration?.enableBrowseEntities && (
-        <Button
-          onClick={() => toggle('browseEntities')}
-          type="primary"
-          icon={<CodeOutlined />}
-        >
-          {t('browse_entities_label')}
-        </Button>
-      )}
-
-      {/* Template and Delete Controls */}
-      <Flex className="flex-row space-x-1">
-        {state.configuration?.enableTemplateSave && !isRootDataset && !isRootDescriptor && (
-          <Button
-            onClick={() => toggle('saveEntityAsTemplate')}
-            type="primary"
-            icon={<SaveOutlined />}
-          >
-            {entity.etype !== 'File' && t('save_entity_template_label')}
-          </Button>
-        )}
-
-        {!isRootDataset && !isRootDescriptor && (
-          <Popover
-            open={popoverOpen}
-            onOpenChange={setPopoverOpen}
-            trigger="click"
-            placement="bottomLeft"
-            content={
-              <Flex vertical>
-                <Typography.Text style={{ marginBottom: 12 }}>
-                  {t('are_you_sure_to_delete')}
-                </Typography.Text>
-                <Flex justify="flex-end" gap={8}>
-                  <Button onClick={handleClose}>
-                    {t('are_you_sure_to_delete_no')}
-                  </Button>
-                  <Button onClick={handleDeleteConfirm} danger>
-                    {t('are_you_sure_to_delete_yes')}
-                  </Button>
-                </Flex>
-              </Flex>
-            }
-          >
-            <Button
-              onClick={handleDeleteClick}
-              color='red'
-              variant='solid'
-              danger
-              icon={<DeleteOutlined />}
-            >
-              {entity.etype !== 'File' && t('delete_entity_label')}
-            </Button>
-          </Popover>
-        )}
-      </Flex>
-
-      {/* Dialogs */}
-      <AddPropertyDialog
-        entity={entity}
-        onAddPropertyPlaceholder={onAddPropertyPlaceholder}
-        open={dialogs.addProperty}
-        onClose={() => toggle('addProperty')}
-      />
-      <EditContextDialog
-        onUpdateContext={onUpdateContext}
-        open={dialogs.editContext}
-        onClose={() => toggle('editContext')}
-      />
-      <PreviewCrateDialog
-        open={dialogs.previewCrate}
-        onClose={() => toggle('previewCrate')}
-        key={Date.now().toString()} // This will force a re-render when the drawer is opened
-      />
-      <BrowseEntitiesDialog
-        onLoadEntity={onLoadEntity}
-        open={dialogs.browseEntities}
-        onClose={() => toggle('browseEntities')}
-      />
-      <SaveEntityAsTemplateDialog
-        entity={entity}
-        open={dialogs.saveEntityAsTemplate}
-        onClose={() => toggle('saveEntityAsTemplate')}
-        onSaveEntityTemplate={onSaveEntityTemplate}
-      />
-    </Flex>
-  );
-};
-
-export default RenderControls;

package/src/crate-builder/RenderEntity/RenderLinkedItem.tsx

@@ -1,139 +0,0 @@
-import React, { useState, useEffect, useMemo, useContext } from 'react';
-import { Flex, Card } from 'antd';
-import { ArrowRightOutlined } from '@ant-design/icons';
-import RenderItemLink from './ItemLink';
-import UnlinkEntity from './UnlinkEntity';
-import MapComponent from '../primitives/Map';
-import { useStateStore } from '../store';
-import { CrateManagerContext, ProfileManagerContext } from '../Shell';
-
-interface RenderLinkedItemProps {
-  entity: {
-    '@id': string;
-    '@type': string[];
-    name?: string;
-    [key: string]: any;
-  };
-  property: string;
-  readonly: boolean;
-  onLoadEntity: (entity: { id: string }) => void;
-  onUnlinkEntity: (data: { property: string; tgtEntityId: string }) => void;
-}
-
-const RenderLinkedItem: React.FC<RenderLinkedItemProps> = ({
-  entity,
-  property,
-  readonly,
-  onLoadEntity,
-  onUnlinkEntity
-}) => {
-  const state = useStateStore();
-  const crateManager = useContext(CrateManagerContext);
-  const profileManager = useContext(ProfileManagerContext);
-
-  const [associations, setAssociations] = useState<any[]>([]);
-
-  const showMap = useMemo(() => {
-    return entity?.['@type'].join(', ').match(/Geo/) ? true : false;
-  }, [entity]);
-
-  const resolveAssociations = () => {
-    const profile = profileManager.profile;
-    const resolvedAssociations = crateManager.resolveLinkedEntityAssociations({
-      entity: crateManager.getEntity({ id: entity['@id'] }),
-      profile
-    });
-    setAssociations(resolvedAssociations);
-  };
-
-  useEffect(() => {
-    resolveAssociations();
-  }, [profileManager.$key, entity['@id']]);
-
-  const handleLoadEntity = (entityData: { id: string }) => {
-    onLoadEntity(entityData);
-  };
-
-  const handleUnlinkEntity = (unlinkData: { entity: { '@id': string } }) => {
-    if (unlinkData.entity && unlinkData.entity['@id']) {
-      onUnlinkEntity({ property, tgtEntityId: unlinkData.entity['@id'] });
-    }
-  };
-
-  if (showMap) {
-    return (
-      <Flex className="describo-render-item-link py-1 rounded bg-blue-200 hover:text-black hover:bg-blue-300 hover:rounded-r-none">
-        <Flex vertical className="space-y-2">
-          <Flex className="p-2">
-            <Flex>{entity.name}</Flex>
-            <Flex flex={1} />
-            {!state.configuration?.readonly && !readonly && (
-              <UnlinkEntity entity={entity} onUnlinkEntity={handleUnlinkEntity} />
-            )}
-          </Flex>
-          <MapComponent entity={entity} crateManager={crateManager} />
-        </Flex>
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex className="describo-render-item-link py-1 rounded hover:rounded-r-none">
-      <Flex
-        vertical
-        style={{ margin: entity?.associations?.length ? 8 : 2 }}
-      >
-        <Card
-          style={{
-            backgroundColor: '#e6f0ff',
-            cursor: 'pointer',
-            transition: 'background-color 0.2s',
-            borderLeft: '3px solid #409eff'
-          }}
-          hoverable
-        >
-          <Flex justify="space-between" align="middle">
-            <RenderItemLink
-              entity={{
-                ...entity,
-                  name: entity.name || entity['@id']
-                }} 
-                onLoadEntity={handleLoadEntity} 
-              />
-              {!state.configuration?.readonly && !readonly && (
-                <UnlinkEntity entity={entity} onUnlinkEntity={handleUnlinkEntity} />
-              )}
-            </Flex>
-          </Card>
-
-        {associations?.length > 0 && (
-          <Flex className="mt-2 flex-col space-y-2 border-l-2 pl-1 border-solid border-slate-700">
-            {associations.map(association => (
-              <Flex
-                key={association['@id']}
-                onClick={() => handleLoadEntity({ id: association['@id'] })}
-                className="cursor-pointer"
-              >
-                <Flex className="flex-row text-base border-solid border-black">
-                  <Flex className="bg-slate-700 w-3 h-3 rounded-lg -4 mt-4" />
-                  <Flex className="bg-slate-700 w-6 h-1 mt-5 -mx-1" />
-                  <Flex className="bg-purple-200 hover:bg-cyan-200 flex flex-row p-2 rounded space-x-2">
-                    <Flex>{association.property}</Flex>
-                    <Flex><ArrowRightOutlined /></Flex>
-                    <Flex className="flex-row space-x-1">
-                      <Flex>
-                        {association.name || association['@id']}
-                      </Flex>
-                    </Flex>
-                  </Flex>
-                </Flex>
-              </Flex>
-            ))}
-          </Flex>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default RenderLinkedItem;

package/src/crate-builder/RenderEntity/RenderPropertyHelp.tsx

@@ -1,41 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Flex } from 'antd';
-
-interface RenderPropertyHelpProps {
-  help?: string;
-}
-
-const RenderPropertyHelp: React.FC<RenderPropertyHelpProps> = ({ help }) => {
-  const [showMore, setShowMore] = useState(false);
-  const length = 100;
-
-  const showToggle = useMemo(() => {
-    return help ? help.length > length : false;
-  }, [help]);
-
-  const helpText = useMemo(() => {
-    if (!help) return '';
-    if (showMore) return help;
-    return help.slice(0, length);
-  }, [help, showMore]);
-
-  if (!showToggle) {
-    return (
-      <Flex className="text-gray-600 font-light text-sm pr-1 describo-property-help">
-        {helpText}
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex
-      className="text-gray-600 font-light text-sm pr-1 cursor-pointer describo-property-help-more"
-      onClick={() => setShowMore(!showMore)}
-    >
-      {helpText}
-      {!showMore && <span>...</span>}
-    </Flex>
-  );
-};
-
-export default RenderPropertyHelp;

package/src/crate-builder/RenderEntity/RenderReverseConnections.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Flex, Pagination, Input, Typography, Card } from 'antd';
-import { useTranslation } from 'react-i18next';
-import RenderItemLink from './ItemLink';
-import isPlainObject from 'lodash/isPlainObject';
-import uniqBy from 'lodash/uniqBy';
-import { CrateManagerContext } from '../Shell';
-import { useContext } from 'react';
-
-interface RenderReverseConnectionsProps {
-  entity: {
-    '@id': string;
-    '@type': string[];
-    '@reverse'?: {
-      [key: string]: any[];
-    };
-    [key: string]: any;
-  };
-  onLoadEntity: (data: { id: string }) => void;
-}
-
-const RenderReverseConnections: React.FC<RenderReverseConnectionsProps> = ({
-  entity,
-  onLoadEntity
-}) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const pageSize = 10;
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const [filterQuery, setFilterQuery] = useState('');
-  const [entities, setEntities] = useState<any[]>([]);
-
-  const connections = useMemo(() => {
-    const offset = (currentPage - 1) * pageSize;
-    const re = new RegExp(filterQuery, 'i');
-    
-    const filteredEntities = entities.filter(entity => {
-      return (
-        entity['@id'].match(re) ||
-        entity['@type'].join(', ').match(re) ||
-        entity.name?.match(re)
-      );
-    });
-
-    return {
-      total: filteredEntities.length,
-      items: filteredEntities.slice(offset, offset + pageSize)
-    };
-  }, [entities, currentPage, filterQuery]);
-
-  const resolveConnections = async () => {
-    if (isPlainObject(entity) && entity['@reverse']) {
-      let allEntities: any[] = [];
-      
-      Object.values(entity['@reverse']).forEach(reverseEntities => {
-        allEntities = [...allEntities, ...reverseEntities];
-      });
-
-      const resolvedEntities = allEntities.map(entity => 
-        crateManager.getEntity({ id: entity['@id'], stub: true })
-      );
-
-      const re = new RegExp(filterQuery, 'i');
-      const filteredEntities = resolvedEntities.filter(entity => {
-        if (!entity) return false;
-        return (
-          entity['@id'].match(re) ||
-          entity['@type'].join(', ').match(re) ||
-          entity.name?.match(re)
-        );
-      });
-
-      setEntities(uniqBy(filteredEntities, '@id'));
-    }
-  };
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      resolveConnections();
-    }, 50);
-    return () => clearTimeout(timer);
-  }, [entity, filterQuery]);
-
-  const handleLoadEntity = (data: { id: string }) => {
-    onLoadEntity(data);
-    setTimeout(() => {
-      resolveConnections();
-    }, 200);
-  };
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setCurrentPage(1);
-    setFilterQuery(event.target.value);
-  };
-
-  return (
-    <div className="w-full">
-      <div className="flex flex-row">
-        <Typography.Text className="text-lg mb-2">{t("links_to_this_entity")}</Typography.Text>
-        <div className="flex-grow" />
-      </div>
-      <div className="flex flex-col gap-y-2">
-        <Pagination
-          current={currentPage}
-          total={connections.total}
-          pageSize={pageSize}
-          onChange={handlePageChange}
-          showSizeChanger={false}
-        />
-        <div className="flex-grow">
-          <Input.Search
-            value={filterQuery}
-            onChange={handleFilterChange}
-            placeholder={t('search_for_connection') || ''}
-          />
-        </div>
-        {connections.items.map(entity => (
-          <div key={entity['@id']} className="mb-2">
-            <Card 
-              style={{ 
-                backgroundColor: '#e6f0ff',
-                cursor: 'pointer',
-                transition: 'background-color 0.2s',
-                borderLeft: '3px solid #409eff'
-              }} 
-              hoverable
-            >
-              <Card.Meta
-                className="describo-render-item-link m-2"
-                title={
-                  <RenderItemLink
-                    entity={entity}
-                    onLoadEntity={handleLoadEntity}
-                  />
-                }
-              />
-            </Card>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default RenderReverseConnections;

package/src/crate-builder/RenderEntity/RenderTypes.tsx

@@ -1,102 +0,0 @@
-import React, { useContext } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faBookOpen,
-  faAddressCard,
-  faPlus,
-  faImage,
-  faFlag,
-  faFolder,
-  faDownload,
-  faFile,
-  faMapMarkerAlt,
-  faBarcode,
-  faSignLanguage,
-  faUniversity,
-  faUser,
-  faGlobe,
-  faParagraph,
-  faNewspaper,
-  faCubes,
-  faCube,
-  faScroll,
-  faCode,
-  faLink,
-  faProjectDiagram,
-} from '@fortawesome/free-solid-svg-icons';
-import { faJs } from '@fortawesome/free-brands-svg-icons';
-import { Tag } from 'antd';
-import { ProfileManagerContext } from '../Shell';
-
-interface RenderTypesProps {
-  types: string[];
-}
-
-const typeIcons = {
-  Book: faBookOpen,
-  ContactPoint: faAddressCard,
-  ComputerLanguage: faJs,
-  CreateAction: faPlus,
-  CreativeWork: faImage,
-  Country: faFlag,
-  Dataset: faFolder,
-  DataDownload: faDownload,
-  DerivedMaterial: faDownload,
-  File: faFile,
-  GeoCoordinates: faMapMarkerAlt,
-  GeoShape: faMapMarkerAlt,
-  IndividualProduct: faBarcode,
-  Language: faSignLanguage,
-  Organization: faUniversity,
-  Organisation: faUniversity,
-  Person: faUser,
-  Place: faGlobe,
-  PropertyValue: faParagraph,
-  Publication: faNewspaper,
-  RepositoryCollection: faCubes,
-  RepositoryObject: faCube,
-  ScholarlyArticle: faScroll,
-  Script: faCode,
-  SoftwareApplication: faCode,
-  URL: faLink,
-  Workflow: faProjectDiagram,
-  WorkflowSketch: faProjectDiagram,
-};
-
-const RenderTypes: React.FC<RenderTypesProps> = ({ types }) => {
-  const profileManager = useContext(ProfileManagerContext);
-
-  const getTypeLabelFromProfile = (type: string) => {
-    return profileManager?.getTypeLabel(type) || type;
-  };
-
-  return (
-    <div className="flex flex-row space-x-1">
-      {types.map((etype, idx) => (
-        <Tag
-          key={idx}
-          className="text-gray-800 font-light flex flex-row items-center space-x-1"
-          style={{
-              backgroundColor: '#f0f0f0',
-              borderRadius: '16px',
-              padding: '0 12px',
-              height: '32px',
-              display: 'flex',
-              alignItems: 'center',
-              margin: '4px',
-            }}
-        >
-          {typeIcons[etype as keyof typeof typeIcons] && (
-            <FontAwesomeIcon 
-                  icon={typeIcons[etype as keyof typeof typeIcons]} 
-                  fixedWidth 
-                />
-              )}
-              <span>{getTypeLabelFromProfile(etype)}</span>
-        </Tag>
-      ))}
-    </div>
-  );
-};
-
-export default RenderTypes;