@arpproject/recrate 0.1.2

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

@@ -0,0 +1,278 @@
+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 space-x-1">
+      {/* Navigation Controls */}
+      <Flex className="flex-row space-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

@@ -0,0 +1,139 @@
+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 : 0 }}
+      >
+        <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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,150 @@
+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 space-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"
+                title={
+                  <RenderItemLink
+                    entity={entity}
+                    onLoadEntity={handleLoadEntity}
+                  />
+                }
+              />
+            </Card>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RenderReverseConnections;

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

@@ -0,0 +1,102 @@
+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;