fix: change cytoscape layout

.gitpod.yml

@@ -0,0 +1,10 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install
+
+

.nvmrc

@@ -1 +1 @@
-18.16.1
+18

deep.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@deep-foundation/deepcase",
-    "version": "0.0.73"
+    "version": "0.0.95"
   },
   "data": [
     {

imports/aframe/components/dragger.ts

@@ -4,7 +4,7 @@ import * as THREE from "three";
 
 AFRAME.registerComponent("dragger", {
   init: function () {
-    const graph = document.querySelector("[forcegraph]");
+    const graph = document.getElementById("deepgraph");
     const rightController = document.getElementById("right");
     const leftController = document.getElementById("left");
     this.dragDisabled = false; // Set true when both grips are pressed or both pinches are started 

imports/aframe/components/node-sound.ts

@@ -0,0 +1,146 @@
+// @ts-nocheck
+import AFRAME from "aframe";
+
+AFRAME.registerComponent('node-sound', {
+  schema: {
+    id: { type: 'number', default: 1 },
+    wave: { type: 'string', default: 'sine' },
+    minFreq: { type: 'number', default: 200 },
+    maxFreq: { type: 'number', default: 3000 },
+    volume: { type: 'number', default: 0.5 },
+    panningModel: { type: "string", default: 'HRTF' },
+    distanceModel: { type: "string", default: 'inverse' },
+    refDistance: { type: 'number', default: 1 },
+    maxDistance: { type: 'number', default: 10000 },
+    rolloffFactor: { type: 'number', default: 1 },
+    coneInnerAngle: { type: 'number', default: 360 },
+    coneOuterAngle: { type: 'number', default: 360 },
+    coneOuterGain: { type: 'number', default: 1 },
+    throttle: { type: 'number', default: 0 },
+    timeout: { type: 'number', default: 1000 },
+    attack: { type: "number", default: 3.0 },
+    bufferSize: { type: 'number', default: 1024 },
+    sampleRate: { type: 'number', default: 44100 }
+  },
+
+  init: function () {
+    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const self = this;
+    this.isSoundInitialized = false; // Flag to track if sound is initialized
+
+    if (self.data.id) {
+      // Set timeout before sound starts playing
+      setTimeout(function () {
+        const hash = function (id) {
+          let hashValue = 0;
+          const str = id.toString();
+          for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hashValue = ((hashValue << 5) - hashValue) + char;
+            hashValue |= 0; // Convert to 32bit integer
+          }
+          return Math.abs(hashValue) % 1000000; // Ensure positive value and limit the range
+        };
+
+        // Map the hashed value to the desired frequency range
+        const hashedValue = hash(self.data.id);
+        const normalizedHash = hashedValue / 1000000; // Since we limited the hash range to 1,000,000
+        const frequencyFloat = self.data.minFreq + normalizedHash * (self.data.maxFreq - self.data.minFreq);
+
+        // Round and clamp the frequency
+        const frequency = Math.round(frequencyFloat);
+        const clampedFrequency = Math.min(Math.max(frequency, self.data.minFreq), self.data.maxFreq);
+
+        // Set the oscillator options
+        self.oscillator = self.audioContext.createOscillator({
+          type: self.data.wave,
+          frequency: clampedFrequency,
+          bufferSize: self.data.bufferSize,
+          sampleRate: self.data.sampleRate
+        });
+
+        self.oscillator.frequency.setValueAtTime(clampedFrequency, self.audioContext.currentTime);
+
+        // Check if volume is finite, set to 0 if it's not
+        if (!isFinite(self.data.volume)) {
+          self.data.volume = 0;
+        }
+
+        self.panner = self.audioContext.createPanner();
+        self.panner.panningModel = self.data.panningModel;
+        self.panner.distanceModel = self.data.distanceModel;
+        self.panner.refDistance = self.data.refDistance;
+        self.panner.maxDistance = self.data.maxDistance;
+        self.panner.rolloffFactor = self.data.rolloffFactor;
+        self.panner.coneInnerAngle = self.data.coneInnerAngle;
+        self.panner.coneOuterAngle = self.data.coneOuterAngle;
+        self.panner.coneOuterGain = self.data.coneOuterGain;
+
+        // Create a gain node and ramp up the volume gradually
+        self.gainNode = self.audioContext.createGain();
+        self.gainNode.gain.setValueAtTime(0.0000001, self.audioContext.currentTime); // set to very low value to avoid clicks
+        self.gainNode.gain.exponentialRampToValueAtTime(self.data.volume, self.audioContext.currentTime + self.data.attack); // 3 second attack time
+
+        self.oscillator.connect(self.gainNode); // Connect to gain node instead of Panner
+        self.gainNode.connect(self.panner); // Then connect to Panner
+        self.panner.connect(self.audioContext.destination);
+
+        self.oscillator.start();
+
+        self.camera = document.getElementById('camera');
+        self.isSoundInitialized = true; // Flag that sound is initialized
+
+        if (self.data.throttle > 0) {
+          self.tick = AFRAME.utils.throttleTick(self.tick, self.data.throttle, self);
+        }
+      }, self.data.timeout); // Timeout value from component schema
+    }
+
+  },
+
+  tick: function () {
+    if (!this.isSoundInitialized) return; // Return if sound is not initialized
+
+    const { x, y, z } = this.el.getAttribute('position');
+
+    if (!this.lastPosition ||
+      (x !== this.lastPosition.x || y !== this.lastPosition.y || z !== this.lastPosition.z)) {
+      this.panner.setPosition(x, y, z);
+      this.lastPosition = { x, y, z };
+    }
+
+    if (this.camera && this.camera.object3D) {
+      const { x: cameraX, y: cameraY, z: cameraZ } = this.camera.getAttribute('position');
+      const cameraPosition = { x: cameraX, y: cameraY, z: cameraZ };
+
+      if (!this.lastCameraPosition ||
+        (cameraX !== this.lastCameraPosition.x || cameraY !== this.lastCameraPosition.y || cameraZ !== this.lastCameraPosition.z)) {
+        this.audioContext.listener.setPosition(cameraX, cameraY, cameraZ);
+        this.lastCameraPosition = cameraPosition;
+      }
+
+      const { x: rotationX, y: rotationY, z: rotationZ } = this.camera.getAttribute('rotation');
+      const rotation = { x: rotationX, y: rotationY, z: rotationZ };
+
+      if (!this.lastRotation ||
+        (rotationX !== this.lastRotation.x || rotationY !== this.lastRotation.y || rotationZ !== this.lastRotation.z)) {
+        const forwardVector = new THREE.Vector3().setFromEuler(new THREE.Euler(-this.degToRad(rotation.x), -this.degToRad(rotation.y), -this.degToRad(rotation.z), "YXZ"));
+        const upVector = new THREE.Vector3(0, 1, 0);
+        if (this.camera.object3D.quaternion) {
+          upVector.applyQuaternion(this.camera.object3D.quaternion);
+          this.audioContext.listener.setOrientation(forwardVector.x, forwardVector.y, forwardVector.z, upVector.x, upVector.y, upVector.z);
+        }
+        this.lastRotation = rotation;
+      }
+    }
+  },
+
+  degToRad: function (degrees) {
+    return degrees * Math.PI / 180;
+  },
+
+  remove: function () {
+    if (!this.isSoundInitialized) return;
+    this.oscillator.stop();
+  }
+});

imports/aframe/components/rotator.ts

@@ -4,7 +4,7 @@ import * as THREE from "three";
 
 AFRAME.registerComponent("rotator", {
   init: function () {
-    const graph = document.querySelector("[forcegraph]");
+    const graph = document.getElementById("deepgraph");
     const rightController = document.getElementById("right");
     const leftController = document.getElementById("left");
     this.rotationDisabled = false; // Set true when both grips are pressed 

imports/aframe/components/scaler.ts

@@ -4,7 +4,7 @@ import * as THREE from "three";
 
 AFRAME.registerComponent("scaler", {
   init: function () {
-    this.graph = document.querySelector("[forcegraph]");
+    this.graph = document.getElementById("deepgraph");
     const rightController = document.getElementById("right");
     const leftController = document.getElementById("left");
     this.resizeStarted = false; // Resizing starts with both hands or controllers are active.

imports/client-handler.tsx

@@ -50,9 +50,36 @@ import WordCloud from 'react-d3-cloud';
 import ReactResizeDetector from 'react-resize-detector';
 import queryStore from '@deep-foundation/store/query';
 import localStore from '@deep-foundation/store/local';
+import * as themeTools from '@chakra-ui/theme-tools';
+import * as recharts from 'recharts';
+import * as i18n from "i18next";
+import * as LanguageDetector from 'i18next-browser-languagedetector';
+import * as reacti18next from "react-i18next";
 const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
 
-
+DeepClient.resolveDependency = async (path: string) : Promise<any> => {
+  if (path == 'peerjs') {
+    return await import('peerjs');
+  } else if (path == 'node-sound') {
+    return await import('./aframe/components/node-sound');
+  } else if (path == 'dragger') {
+    return await import('./aframe/components/dragger');
+  } else if (path == 'rotator') {
+    return await import('./aframe/components/rotator');
+  } else if (path == 'scaler') {
+    return await import('./aframe/components/scaler');
+  } else if (path == 'use-engine-tick') {
+    return await import('./aframe/components/tick');
+  } else if (path == 'el-movement') {
+    return await import('./aframe/components/el-movement');
+  } else if (path == 'aframe-extras') {
+    return await import('aframe-extras');
+  } else if (path == 'aframe') {
+    return await import('aframe');
+  } else {
+    return r(path);
+  }
+};
 
 export const r: any = (path) => {
   if (r.list[path]) return r.list[path];
@@ -133,6 +160,11 @@ r.list = {
   'react-resize-detector': ReactResizeDetector,
   '@deep-foundation/store/query': queryStore,
   '@deep-foundation/store/local': localStore,
+  'recharts': recharts,
+  '@chakra-ui/theme-tools': themeTools,
+  "i18next": i18n,
+  'i18next-browser-languagedetector': LanguageDetector,
+  "react-i18next": reacti18next,
 };
 
 export async function evalClientHandler({
@@ -147,17 +179,6 @@ export async function evalClientHandler({
   error?: any;
   data?: any;
 }> {
-  (deep as any).import = async (path: string) : Promise<any> => {
-    if (path == 'peerjs') {
-      return await import('peerjs');
-    } else {
-      try {
-        return r(path);
-      } catch(e) {
-        return await import(path);
-      }
-    }
-  };
   return await deepclientEvalClientHandler({
     value, deep, input: {
       require: r,
@@ -195,6 +216,7 @@ export interface ClientHandlerProps extends Partial<ClientHandlerRendererProps>
   handlerId?: number;
   context?: number[];
   ml?: any;
+  error?: any;
   onClose?: () => any,
 }
 
@@ -243,6 +265,7 @@ export function ClientHandler(_props: ClientHandlerProps) {
     ml,
     onClose,
     fillSize,
+    error: outerError,
     ...props
   } = _props;
   const deep = useDeep();
@@ -253,7 +276,7 @@ export function ClientHandler(_props: ClientHandlerProps) {
   });
   const file = files?.[0];
 
-  const [Component, setComponent] = React.useState<any>(null);
+  const [{ Component, errored } = {} as any, setState] = React.useState<any>({ Component: undefined, errored: undefined });
 
   // console.log('ClientHandler root', { linkId, handlerId, context, file, hid, files, Component });
   const lastEvalRef = useRef(0);
@@ -267,20 +290,60 @@ export function ClientHandler(_props: ClientHandlerProps) {
     const evalId = ++lastEvalRef.current;
     evalClientHandler({ value, deep }).then(({ data, error }) => {
       if (evalId === lastEvalRef.current) {
-        console.log('ClientHandler evalClientHandler setComponent', { file, data, error });
-        if (!error) setComponent(() => data);
-        else setComponent(undefined);
+        console.log('ClientHandler evalClientHandler setState', { file, data, error });
+        if (!error) {
+          setState(() => ({ Component: data }));
+          erroredResetRef?.current && (erroredResetRef?.current(), erroredResetRef.current = undefined);
+        }
+        else {
+          setErrorRef.current && setErrorRef.current(error);
+          setState({ Component: undefined, errored: error });
+        }
       } else {
         console.log('ClientHandler evalClientHandler outdated', { file, data, error, evalId, 'lastEvalRef.current': lastEvalRef.current });
       }
     });
   }, [file?.value?.value, hid]);
 
+  const erroredResetRef = useRef<any>();
+  const setErrorRef = useRef<any>();
+
   return (<>
-    {(typeof (Component) === 'function')
-      ? <><CatchErrors errorRenderer={() => <div></div>}>
+    <CatchErrors
+      error={errored || outerError}
+      errorRenderer={(error, reset) => {
+        erroredResetRef.current = reset;
+        return <div
+          style={{
+            ...(fillSize ? { width: '100%', height: '100%' } : {
+              width: 500, maxHeight: 500
+            }),
+            overflow: 'scroll',
+          }}
+        ><chakra.Alert
+          style={{
+            width: 'max-content',
+          }}
+          status='error'
+          variant='subtle'
+          flexDirection='column'
+          alignItems='left'
+          justifyContent='left'
+          textAlign='left'
+        >
+          <chakra.Button disabled={!Component} width="100%" onClick={reset}>reset</chakra.Button>
+          <chakra.AlertIcon />
+          <chakra.AlertTitle>{error?.message || (error || '')?.toString()}</chakra.AlertTitle>
+          {!!error?.stack && <chakra.AlertDescription>
+            <pre>{error?.stack}</pre>
+          </chakra.AlertDescription>}
+        </chakra.Alert></div>
+      }}
+      onMounted={(setError) => setErrorRef.current = setError}
+      >
+      {(typeof (Component) === 'function') ? <>
         {[<ClientHandlerRenderer key={Component.toString()} Component={Component} {...props} fillSize={fillSize} link={_ml.byId[linkId]} ml={_ml} onClose={onClose} />]}
-      </CatchErrors></>
-      : <div></div>}
+      </> : <></>}
+    </CatchErrors>
   </>);
 }