perf(editor): don't use unpad, use dataref

unigraph-dev · Feb 16, 2022 · ea2a717 · ea2a717
1 parent 3ff1a19
commit ea2a717
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -605,6 +605,9 @@ export function DetailedNoteBlock({
     componentId,
     displayAs,
 }: any) {
+    const dataRef = React.useRef<any>(data);
+    dataRef.current = data;
+
     const onPointerUpHandler = React.useCallback(
         (
             ev,
@@ -651,11 +654,11 @@ export function DetailedNoteBlock({
                 style={{ display: isEditing ? 'none' : '' }}
                 options={{ inline: true, noDrag: true, noContextMenu: true, noClickthrough: true }}
                 callbacks={{
-                    'get-semantic-properties': () => data,
+                    'get-semantic-properties': () => dataRef.current,
                 }}
             />
         ),
-        [data, isChildren, callbacks.isEmbed],
+        [data.get('text')?._value?._value?.['_value.%'], isChildren, callbacks.isEmbed],
     );
 
     return (

diff --git a/packages/unigraph-dev-explorer/src/examples/todo/TodoList.tsx b/packages/unigraph-dev-explorer/src/examples/todo/TodoList.tsx
@@ -50,10 +50,6 @@ function TodoListBody({ data }: { data: ATodoList[] }) {
 }
 
 export const TodoItem: DynamicViewRenderer = ({ data, callbacks, compact, inline, isEmbed }) => {
-    // console.log(data);
-    const unpadded: ATodoList = unpad(data);
-    // console.log(unpadded)
-
     const NameDisplay = React.useMemo(
         () => (
             <AutoDynamicView
@@ -71,7 +67,7 @@ export const TodoItem: DynamicViewRenderer = ({ data, callbacks, compact, inline
     const SecondaryDisplay = React.useMemo(
         () => (
             <>
-                {!unpadded.children?.map
+                {!data?._value?.children?.['_value[']
                     ? []
                     : data?._value?.children?.['_value[']
                           ?.filter((it: any) => !it._key)
@@ -82,31 +78,42 @@ export const TodoItem: DynamicViewRenderer = ({ data, callbacks, compact, inline
                                   options={{ inline: true }}
                               />
                           ))}
-                {unpadded.priority > 0
-                    ? [<Chip size="small" icon={<PriorityHigh />} label={`Priority ${unpadded.priority}`} />]
+                {data.get('priority')?.as('primitive') > 0
+                    ? [
+                          <Chip
+                              size="small"
+                              icon={<PriorityHigh />}
+                              label={`Priority ${data.get('priority')?.as('primitive')}`}
+                          />,
+                      ]
                     : []}
-                {unpadded.time_frame?.start?.datetime && new Date(unpadded.time_frame?.start?.datetime).getTime() !== 0
+                {data.get('time_frame/start/datetime')?.as('primitive') &&
+                new Date(data.get('time_frame/start/datetime')?.as('primitive')).getTime() !== 0
                     ? [
                           <Chip
                               size="small"
                               icon={<CalendarToday />}
-                              label={`Start: ${Sugar.Date.relative(new Date(unpadded.time_frame?.start?.datetime))}`}
+                              label={`Start: ${Sugar.Date.relative(
+                                  new Date(data.get('time_frame/start/datetime')?.as('primitive')),
+                              )}`}
                           />,
                       ]
                     : []}
-                {unpadded.time_frame?.end?.datetime &&
-                new Date(unpadded.time_frame?.start?.datetime).getTime() !== maxDateStamp
+                {data.get('time_frame/end/datetime')?.as('primitive') &&
+                new Date(data.get('time_frame/end/datetime')?.as('primitive')).getTime() !== maxDateStamp
                     ? [
                           <Chip
                               size="small"
                               icon={<CalendarToday />}
-                              label={`End: ${Sugar.Date.relative(new Date(unpadded.time_frame?.end?.datetime))}`}
+                              label={`End: ${Sugar.Date.relative(
+                                  new Date(data.get('time_frame/end/datetime')?.as('primitive')),
+                              )}`}
                           />,
                       ]
                     : []}
             </>
         ),
-        [unpadded, callbacks, data],
+        [callbacks, data],
     );
 
     const onPointerUp = React.useCallback(