@arpproject/recrate 0.1.2

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

@@ -0,0 +1,576 @@
+import React, { forwardRef, useImperativeHandle, useContext, useState, useEffect, useRef, useMemo } from 'react';
+import { Flex, Tabs, Drawer } from 'antd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTriangleExclamation, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faCircleCheck, faCircleXmark } from '@fortawesome/free-regular-svg-icons';
+import EntityId from './EntityId';
+import EntityType from './EntityType';
+import EntityName from './EntityName';
+import EntityProperty from './EntityProperty';
+import RenderControls from './RenderControls';
+import RenderReverseConnections from './RenderReverseConnections';
+import { ProfileManagerContext, CrateManagerContext } from '../Shell';
+import { useStateStore } from '../store';
+import { applyLayout } from "./layout";
+import { isURL } from '../CrateManager/lib';
+
+interface RenderEntityProps {
+  entity: any;
+  onLoadEntity: (params: { id: string; updateState?: boolean }) => void;
+  onSaveCrate: () => void;
+  onSaveEntityTemplate: () => void;
+  onWarning: () => void;
+  onError: () => void;
+}
+
+const RenderEntity = forwardRef<any, RenderEntityProps>((props, ref) => {
+  const { entity, onLoadEntity, onSaveCrate, onSaveEntityTemplate, onWarning, onError } = props;
+  const state = useStateStore();
+  const profileManager = useContext(ProfileManagerContext);
+  const crateManager = useContext(CrateManagerContext);
+  
+  // State variables
+  const [contextEntity, setContextEntity] = useState<any>(entity);
+  const [activeTab, setActiveTab] = useState("about");
+  const [reverseSidebarVisible, setReverseSidebarVisible] = useState(false);
+  const [highlightRequiredProperties, setHighlightRequiredProperties] = useState(false);
+  const [missingRequiredData, setMissingRequiredData] = useState(false);
+  const [renderTabs, setRenderTabs] = useState(false);
+  const [extraProperties, setExtraProperties] = useState<string[]>([]);
+  const [savedProperty, setSavedProperty] = useState<string | undefined>(undefined);
+  const [tabs, setTabs] = useState<any[]>([]);
+  
+  // Expose methods to parent component
+  useImperativeHandle(ref, () => ({
+    setTab: (tabName: string) => {
+      setActiveTab(tabName);
+    },
+    toggleReverseLinkBrowser: () => {
+      setReverseSidebarVisible(!reverseSidebarVisible);
+    }
+  }));
+
+  // Initialize component with entity data
+  useEffect(() => {
+      setExtraProperties([]); // Reset extraProperties when entity changes
+      init({ entity });
+  }, [entity]);
+
+  // Force re-render when profile changes
+  useEffect(() => {
+    if (profileManager && profileManager.$key) {
+      const entityObj = crateManager.getEntity({ id: entity['@id'] });
+      init({ entity: entityObj });
+    }
+  }, [profileManager?.$key]);
+
+  // Initialize the component with entity data
+  const init = ({ entity }: { entity: any }) => {
+    if (!entity['@id']) return;
+    
+    // Scroll to top when entity changes
+    if (entity['@id'] !== contextEntity['@id']) {
+      window.scrollTo(0, 0);
+    }
+
+    // Apply layout based on profile and entity
+    const layout = applyLayout({
+      configuration: state.configuration,
+      profileManager,
+      entity,
+      extraProperties,
+    });
+
+    setContextEntity(layout.entity);
+    setRenderTabs(layout.renderTabs);
+    setMissingRequiredData(layout.missingRequiredData);
+    setTabs(layout.tabs);
+
+    // Update editor state with tab information
+    if (layout.renderTabs) {
+      state.editorState.update({ id: entity['@id'], tab: activeTab });
+    } else {
+      state.editorState.deleteFromState({ property: "tab" });
+    }
+  };
+
+  // Refresh the component with latest entity data
+  const refresh = () => {
+    const entityObj = crateManager.getEntity({ id: entity['@id'] });
+    init({ entity: entityObj });
+  };
+
+  // Save tab to editor state
+  const saveTabToState = (tabName: string) => {
+    state.editorState.update({ id: entity['@id'], tab: tabName });
+  };
+
+  // Add property placeholder
+  // Add this effect near your other useEffect hooks
+  useEffect(() => {
+      if (entity?.['@id']) {
+          const entityObj = crateManager.getEntity({ id: entity['@id'] });
+          init({ entity: entityObj });
+          refresh();
+      }
+  }, [extraProperties]); // This will run whenever extraProperties changes
+  
+  const handleAddPropertyPlaceholder = (property: string) => {
+      try {
+          const newExtraProperties = [...extraProperties, property];
+          setExtraProperties(newExtraProperties);
+      } catch (error) {
+          console.error(error);
+          onError();
+      }
+  };
+
+  // Notify that a property was saved (for highlighting)
+  const notifySave = (property: string) => {
+    setSavedProperty(property);
+    setTimeout(() => {
+      setSavedProperty(undefined);
+    }, 1500);
+  };
+
+  // Entity update handlers
+  const handleUpdateEntity = (data: { property: string; value: any }) => {
+    try {
+      // Don't update core properties if value hasn't changed
+      if (["@id", "@type", "name"].includes(data.property)) {
+        if (contextEntity[data.property] === data.value) return;
+      }
+
+      // Update the property
+      const updatedEntity = crateManager.updateProperty({
+        id: entity['@id'],
+        ...data
+      });
+
+      // Handle entity ID changes
+      if (updatedEntity["@id"] !== entity["@id"]) {
+        onLoadEntity({ id: updatedEntity["@id"] });
+      } else {
+        refresh();
+      }
+
+      // Update editor state if ID changed
+      if (data.property === "@id" && updatedEntity?.["@id"]) {
+        state.editorState.replaceId({ id: entity["@id"], newId: updatedEntity["@id"] });
+      }
+
+      onSaveCrate();
+      notifySave(data.property);
+    } catch (error) {
+      console.error(error)
+      onError();
+    }
+  };
+
+  const handleCreateProperty = (data: { property: string; value: any }) => {
+    try {
+      if (isURL(data.value) && state.configuration?.enableUrlMarkup) {
+        handleCreateEntity({
+          property: data.property,
+          json: {
+            "@id": data.value,
+            "@type": "URL",
+            name: data.value,
+          },
+        });
+      } else {
+        crateManager.setProperty({ 
+          id: entity['@id'], 
+          ...data 
+        });
+      }
+      refresh();
+      onSaveCrate();
+      notifySave(data.property);
+    } catch (error) {
+      onError();
+    }
+  };
+
+  const handleCreateEntity = (data: any) => {
+    try {
+      delete data.json?.type;
+      
+      crateManager.ingestAndLink({
+        id: entity['@id'],
+        property: data.property,
+        propertyId: data.propertyId,
+        json: data.json,
+      });
+      
+      let warnings = crateManager.getWarnings();
+      if (warnings.hasWarning) {
+        onWarning();
+      }
+      refresh();
+      onSaveCrate();
+      return data.json['@id'];
+    } catch (error) {
+      onError();
+      return null;
+    }
+  };
+
+  const handleLinkEntity = (data: any) => {
+    try {
+      crateManager.linkEntity({
+        id: entity['@id'],
+        property: data.property,
+        propertyId: data.propertyId,
+        value: { "@id": data.json["@id"] },
+      });
+      refresh();
+      onSaveCrate();
+    } catch (error) {
+      onError();
+    }
+  };
+
+  const handleDeleteProperty = (data: { property: string; idx: number }) => {
+    try {
+      crateManager.deleteProperty({
+        id: entity['@id'],
+        property: data.property,
+        idx: data.idx
+      });
+      refresh();
+      onSaveCrate();
+    } catch (error) {
+      onError();
+    }
+  };
+
+  const handleUnlinkEntity = (data: { property: string; tgtEntityId: string }) => {
+    try {
+      crateManager.unlinkEntity({
+        id: entity['@id'],
+        property: data.property,
+        value: { "@id": data.tgtEntityId },
+      });
+      refresh();
+      onSaveCrate();
+    } catch (error) {
+      console.error(error);
+      onError();
+    }
+  };
+
+  const handleDeleteEntity = (data: { id: string }) => {
+    try {
+      crateManager.deleteEntity({ id: data.id });
+      onLoadEntity({ id: './' }); // Navigate to root after deletion
+      onSaveCrate();
+    } catch (error) {
+      onError();
+    }
+  };
+
+  const handleUpdateContext = (context: any) => {
+    try {
+      crateManager.setContext(context);
+      onSaveCrate();
+    } catch (error) {
+      onError();
+    }
+  };
+
+  if (!entity || !entity['@id']) {
+    return <div>No entity selected</div>;
+  }
+
+  return (
+    <div className="flex flex-row">
+      <div className="flex flex-col w-full">
+        {state.configuration?.showControls && (
+          <div className="flex flex-row place-content-between pb-1 border-b border-slate-700">
+            <RenderControls
+              entity={contextEntity}
+              onLoadEntity={onLoadEntity}
+              onBack={() => state.editorState.back()}
+              onForward={() => state.editorState.forward()}
+              onAddPropertyPlaceholder={handleAddPropertyPlaceholder}
+              onDeleteEntity={handleDeleteEntity}
+              onSaveEntityTemplate={onSaveEntityTemplate}
+              onUpdateContext={handleUpdateContext}
+            />
+            <div className="flex-grow"></div>
+            
+            {/* Toggle reverse links panel button */}
+            {state.configuration?.enableReverseLinkBrowser && (
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-sm"
+                onClick={() => setReverseSidebarVisible(!reverseSidebarVisible)}
+              >
+                <FontAwesomeIcon
+                  icon={reverseSidebarVisible ? faChevronRight : faChevronLeft}
+                  size="sm"
+                />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Untabbed layout */}
+        {!renderTabs && (
+          <div>
+            <div className="flex flex-row space-x-2 my-2 p-2">
+              <div 
+                className={`flex-grow describo-property describo-property-name-id ${
+                  savedProperty === '@id' ? 'bg-green-200 rounded p-1 my-1' : ''
+                }`}
+              >
+                <EntityId entity={contextEntity} onUpdate={handleUpdateEntity} />
+              </div>
+              
+              {/* Highlight required properties button */}
+              {!state.configuration?.readonly && missingRequiredData && (
+                <button
+                  className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+                  onClick={() => setHighlightRequiredProperties(!highlightRequiredProperties)}
+                >
+                  <FontAwesomeIcon icon={faTriangleExclamation} size="lg" />
+                </button>
+              )}
+            </div>
+
+            <div className={`my-2 p-2 describo-property describo-property-name-type`}>
+              <EntityType entity={contextEntity} onUpdateEntity={handleUpdateEntity} />
+            </div>
+
+            <div 
+              className={`my-2 p-2 describo-property describo-property-name-name ${
+                savedProperty === 'name' ? 'bg-green-200 rounded p-1 my-1' : ''
+              }`}
+            >
+              <EntityName entity={contextEntity} onUpdate={handleUpdateEntity} />
+            </div>
+
+            {/* Render entity properties */}
+            {Object.keys(contextEntity).sort().map(property => {
+              if (!['@id', '@type', 'name', '@reverse'].includes(property)) {
+                return (
+                  <div 
+                    key={property}
+                    className={`my-2 hover:bg-sky-100 ${
+                      savedProperty === property ? 'bg-green-200 hover:bg-green-200' : ''
+                    }`}
+                  >
+                    <EntityProperty
+                      entity={contextEntity}
+                      property={property}
+                      values={Array.isArray(contextEntity[property]) ? contextEntity[property] : [contextEntity[property]]}
+                      highlightRequired={highlightRequiredProperties}
+                      savedProperty={savedProperty === property}
+                      onLoadEntity={onLoadEntity}
+                      onCreateEntity={handleCreateEntity}
+                      onLinkEntity={handleLinkEntity}
+                      onUnlinkEntity={handleUnlinkEntity}
+                      onCreateProperty={handleCreateProperty}
+                      onSaveProperty={handleUpdateEntity}
+                      onDeleteProperty={handleDeleteProperty}
+                    />
+                  </div>
+                );
+              }
+              return null;
+            })}
+          </div>
+        )}
+
+        {/* Tabbed layout */}
+        {renderTabs && (
+          <div className="flex" style={{ 
+            flexDirection: state.configuration?.tabLocation === 'left' || state.configuration?.tabLocation === 'right' ? 'row' : 'column'
+          }}>
+            <Tabs
+              activeKey={activeTab}
+              onChange={(key) => {
+                setActiveTab(key);
+                saveTabToState(key);
+              }}
+              tabPosition={state.configuration?.tabLocation === 'left' ? 'left' : state.configuration?.tabLocation === 'right' ? 'right' : 'top'}
+            >
+              {tabs.map((tab) => (
+                <Tabs.TabPane
+                  key={tab.name}
+                  tab={
+                    <div className="flex flex-col w-full">
+                      <div className="flex flex-row items-center justify-between w-full">
+                        <div className="text-left text-base font-medium text-gray-700 describo-tab-label">
+                          {tab.label || tab.name}
+                        </div>
+                        <div className="ml-2">
+                          {tab.missingRequiredData && (
+                            <div className="text-red-600">
+                              <FontAwesomeIcon icon={faCircleXmark} size="lg" />
+                            </div>
+                          )}
+                          {tab.hasData && !tab.missingRequiredData && (
+                            <div className="text-green-600">
+                              <FontAwesomeIcon icon={faCircleCheck} size="lg" />
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      {tab.description && (
+                        <div className="text-left text-gray-500 font-light text-xs describo-tab-description">
+                          {tab.description}
+                        </div>
+                      )}
+                    </div>
+                  }
+                />
+              ))}
+            </Tabs>
+
+            <div className="flex-grow p-3">
+              {/* Required properties warning button */}
+              {!state.configuration?.readonly && 
+                tabs.find(t => t.name === activeTab)?.missingRequiredData && (
+                <div className="text-red-600 float-right mb-2">
+                  <button
+                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded text-sm"
+                    onClick={() => setHighlightRequiredProperties(!highlightRequiredProperties)}
+                  >
+                    <FontAwesomeIcon icon={faTriangleExclamation} size="lg" />
+                  </button>
+                </div>
+              )}
+
+              {/* About tab content */}
+              {activeTab === 'about' && (
+                <div className="space-y-3">
+                  <div 
+                    className={`p-2 describo-property describo-property-name-id ${
+                      savedProperty === '@id' ? 'bg-green-200 rounded' : ''
+                    }`}
+                  >
+                    <EntityId entity={contextEntity} onUpdate={handleUpdateEntity} />
+                  </div>
+                  <div className="p-2 describo-property describo-property-name-type">
+                    <EntityType entity={contextEntity} onUpdateEntity={handleUpdateEntity} />
+                  </div>
+                  <div 
+                    className={`p-2 describo-property describo-property-name-name ${
+                      savedProperty === 'name' ? 'bg-green-200 rounded' : ''
+                    }`}
+                  >
+                    <EntityName entity={contextEntity} onUpdate={handleUpdateEntity} />
+                  </div>
+                  
+                  {/* Add this section to render additional properties in the about tab */}
+                  {tabs.find(tab => tab.name === 'about')?.inputs.map((input: any) => {
+                    if (!['@id', '@type', 'name', '@reverse'].includes(input.name)) {
+                      return (
+                        <div 
+                          key={input.name}
+                          className={`p-2 hover:bg-sky-100 ${
+                            savedProperty === input.name ? 'bg-green-200 hover:bg-green-200' : ''
+                          }`}
+                        >
+                          <EntityProperty
+                            entity={contextEntity}
+                            property={input.name}
+                            values={Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]]}
+                            highlightRequired={highlightRequiredProperties}
+                            savedProperty={savedProperty === input.name}
+                            onLoadEntity={onLoadEntity}
+                            onCreateEntity={handleCreateEntity}
+                            onLinkEntity={handleLinkEntity}
+                            onUnlinkEntity={handleUnlinkEntity}
+                            onCreateProperty={handleCreateProperty}
+                            onSaveProperty={handleUpdateEntity}
+                            onDeleteProperty={handleDeleteProperty}
+                          />
+                        </div>
+                      );
+                    }
+                    return null;
+                  })}
+                </div>
+              )}
+
+              {/* Tab content for other tabs */}
+              {tabs.map(tab => {
+                if (tab.name === activeTab && tab.name !== 'about') {
+                  return (
+                    <div key={tab.name} className="space-y-3">
+                      {tab.inputs.map((input: any) => {
+                        if (!['@id', '@type', 'name', '@reverse'].includes(input.name)) {
+                          return (
+                            <div 
+                              key={input.name}
+                              className={`p-2 hover:bg-sky-100 ${
+                                savedProperty === input.name ? 'bg-green-200 hover:bg-green-200' : ''
+                              }`}
+                            >
+                              <EntityProperty
+                                entity={contextEntity}
+                                property={input.name}
+                                values={Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]]}
+                                highlightRequired={highlightRequiredProperties}
+                                savedProperty={savedProperty === input.name}
+                                onLoadEntity={onLoadEntity}
+                                onCreateEntity={handleCreateEntity}
+                                onLinkEntity={handleLinkEntity}
+                                onUnlinkEntity={handleUnlinkEntity}
+                                onCreateProperty={handleCreateProperty}
+                                onSaveProperty={handleUpdateEntity}
+                                onDeleteProperty={handleDeleteProperty}
+                              />
+                            </div>
+                          );
+                        }
+                        return null;
+                      })}
+                    </div>
+                  );
+                }
+                return null;
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Remove this entire block */}
+      {/* Reverse links toggle button (when sidebar is not visible) */}
+      {/* {state.configuration?.enableReverseLinkBrowser && !reverseSidebarVisible && (
+        <div 
+          className="p-1 h-8 rounded text-lg bg-gray-200 text-blue-600 cursor-pointer"
+          onClick={() => setReverseSidebarVisible(!reverseSidebarVisible)}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} size="sm" />
+        </div>
+      )} */}
+
+      {/* Reverse links drawer */}
+      <Drawer
+        placement="right"
+        open={reverseSidebarVisible}
+        onClose={() => setReverseSidebarVisible(false)}
+        width={600}
+      >
+        <div className="p-2">
+          <RenderReverseConnections
+            key={contextEntity['@id']}
+            entity={contextEntity}
+            onLoadEntity={(data) => {
+              onLoadEntity(data);
+              setReverseSidebarVisible(false);
+            }}
+          />
+        </div>
+      </Drawer>
+    </div>
+  );
+});
+
+RenderEntity.displayName = 'RenderEntity';
+
+export default RenderEntity;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from 'antd';
+import { LinkOutlined } from '@ant-design/icons';
+
+interface UnlinkEntityProps {
+  entity: {
+    '@id': string;
+    [key: string]: any;
+  };
+  onUnlinkEntity: (data: { entity: { '@id': string } }) => void;
+}
+
+const UnlinkEntity: React.FC<UnlinkEntityProps> = ({ entity, onUnlinkEntity }) => {
+  const handleUnlink = () => {
+    onUnlinkEntity({ entity: { '@id': entity['@id'] } });
+  };
+
+  return (
+    <Button
+      onClick={handleUnlink}
+      danger
+      variant="text"
+      color='red'
+      size="large"
+      icon={<LinkOutlined />}
+    />
+  );
+};
+
+export default UnlinkEntity;