@dhis2/analytics 28.1.3 → 29.0.1

package/build/es/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -1,10 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import { useDataQuery } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
 import { Modal, ModalActions, ModalContent, NoticeBox, Button, spacers, colors, Layer, CenteredContent, CircularLoader } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
+import { useActiveInterpretation, useInterpretationsCurrentUser } from '../InterpretationsProvider/hooks.js';
 import { InterpretationThread } from './InterpretationThread.js';
 import { useModalContentWidth } from './useModalContentWidth.js';
 const modalCSS = {
@@ -22,25 +22,12 @@ function getModalContentCSS(width) {
     className: _JSXStyle.dynamic([["2099285089", [width]]])
   };
 }
-const query = {
-  interpretation: {
-    resource: 'interpretations',
-    id: ({
-      id
-    }) => id,
-    params: {
-      fields: ['access[write,manage]', 'id', 'text', 'created', 'createdBy[id,displayName]', 'likes', 'likedBy', 'comments[id,text,created,createdBy[id,displayName]]']
-    }
-  }
-};
 const InterpretationModal = ({
-  currentUser,
   isVisualizationLoading,
   visualization,
   onResponsesReceived,
   downloadMenuComponent,
   onClose,
-  onInterpretationUpdate,
   interpretationId,
   initialFocus,
   pluginComponent: VisualizationPlugin
@@ -48,53 +35,14 @@ const InterpretationModal = ({
   var _currentUser$settings;
   const modalContentWidth = useModalContentWidth();
   const modalContentCSS = getModalContentCSS(modalContentWidth);
-  const [isDirty, setIsDirty] = useState(false);
+  const currentUser = useInterpretationsCurrentUser();
   const {
-    data,
-    error,
+    data: interpretation,
     loading,
-    fetching,
-    refetch
-  } = useDataQuery(query, {
-    lazy: true
-  });
-  const interpretation = data === null || data === void 0 ? void 0 : data.interpretation;
+    error
+  } = useActiveInterpretation(interpretationId);
   const shouldRenderModalContent = !error && interpretation;
   const loadingInProgress = loading || isVisualizationLoading;
-  const handleClose = () => {
-    if (isDirty) {
-      onInterpretationUpdate();
-      setIsDirty(false);
-    }
-    onClose();
-  };
-  const onThreadUpdated = affectsInterpretation => {
-    if (affectsInterpretation) {
-      setIsDirty(true);
-    }
-    refetch({
-      id: interpretationId
-    });
-  };
-  const onLikeToggled = ({
-    likedBy
-  }) => {
-    setIsDirty(true);
-    interpretation.likedBy = likedBy;
-    interpretation.likes = likedBy.length;
-  };
-  const onInterpretationDeleted = () => {
-    setIsDirty(false);
-    onInterpretationUpdate();
-    onClose();
-  };
-  useEffect(() => {
-    if (interpretationId) {
-      refetch({
-        id: interpretationId
-      });
-    }
-  }, [interpretationId, refetch]);
   const filters = useMemo(() => {
     return {
       relativePeriodDate: interpretation === null || interpretation === void 0 ? void 0 : interpretation.created
@@ -102,7 +50,7 @@ const InterpretationModal = ({
   }, [interpretation === null || interpretation === void 0 ? void 0 : interpretation.created]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, loadingInProgress && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
     fluid: true,
-    onClose: handleClose,
+    onClose: onClose,
     className: cx(modalCSS.className, {
       hidden: loadingInProgress
     }),
@@ -135,24 +83,20 @@ const InterpretationModal = ({
   })), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2014146191", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "thread-wrap"
   }, /*#__PURE__*/React.createElement(InterpretationThread, {
-    currentUser: currentUser,
-    fetching: fetching,
+    loading: loading,
     interpretation: interpretation,
-    onInterpretationDeleted: onInterpretationDeleted,
-    onThreadUpdated: onThreadUpdated,
     initialFocus: initialFocus,
     downloadMenuComponent: downloadMenuComponent,
-    onLikeToggled: onLikeToggled
+    onInterpretationDeleted: onClose
   }))))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(Button, {
-    disabled: fetching,
-    onClick: handleClose
+    disabled: loading,
+    onClick: onClose
   }, i18n.t('Hide interpretation'))), modalCSS.styles, modalContentCSS.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2014146191",
     dynamic: [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]
   }, [`.title.__jsx-style-dynamic-selector{color:${colors.grey900};margin:0px;padding:${spacers.dp24} 0 ${spacers.dp4};}`, ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;height:100%;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;}", `.thread-wrap.__jsx-style-dynamic-selector{padding-right:${spacers.dp4};-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}`])));
 };
 InterpretationModal.propTypes = {
-  currentUser: PropTypes.object.isRequired,
   interpretationId: PropTypes.string.isRequired,
   isVisualizationLoading: PropTypes.bool.isRequired,
   pluginComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
@@ -160,7 +104,6 @@ InterpretationModal.propTypes = {
   onClose: PropTypes.func.isRequired,
   onResponsesReceived: PropTypes.func.isRequired,
   downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  initialFocus: PropTypes.bool,
-  onInterpretationUpdate: PropTypes.func
+  initialFocus: PropTypes.bool
 };
 export { InterpretationModal };

package/build/es/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -6,34 +6,33 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
 import { Interpretation, getInterpretationAccess } from '../common/index.js';
+import { useInterpretationsCurrentUser } from '../InterpretationsProvider/hooks.js';
 import { Comment } from './Comment.js';
 import { CommentAddForm } from './CommentAddForm.js';
 const InterpretationThread = ({
-  currentUser,
-  fetching,
+  loading,
   interpretation,
   onInterpretationDeleted,
-  onLikeToggled,
   initialFocus,
-  onThreadUpdated,
   downloadMenuComponent: DownloadMenu,
   dashboardRedirectUrl
 }) => {
+  const currentUser = useInterpretationsCurrentUser();
   const {
     fromServerDate
   } = useTimeZoneConversion();
   const focusRef = useRef();
   useEffect(() => {
     if (initialFocus && focusRef.current) {
-      window.requestAnimationFrame(() => {
+      window.setTimeout(() => {
         focusRef.current.focus();
-      });
+      }, 25);
     }
   }, [initialFocus]);
   const interpretationAccess = getInterpretationAccess(interpretation, currentUser);
   return /*#__PURE__*/React.createElement("div", {
     className: "jsx-3292109121" + " " + (cx('container', {
-      fetching,
+      fetching: loading,
       dashboard: !!dashboardRedirectUrl
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
@@ -46,44 +45,32 @@ const InterpretationThread = ({
   }), /*#__PURE__*/React.createElement("div", {
     className: "jsx-3292109121" + " " + 'thread'
   }, /*#__PURE__*/React.createElement(Interpretation, {
-    currentUser: currentUser,
-    interpretation: interpretation,
-    onLikeToggled: onLikeToggled,
+    id: interpretation.id,
     onReplyIconClick: interpretationAccess.comment ? () => {
       var _focusRef$current;
       return (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
     } : null,
-    onUpdated: () => onThreadUpdated(true),
-    onDeleted: onInterpretationDeleted,
     dashboardRedirectUrl: dashboardRedirectUrl,
-    isInThread: true
+    isInThread: true,
+    onDeleted: onInterpretationDeleted
   }), /*#__PURE__*/React.createElement("div", {
     className: "jsx-3292109121" + " " + 'comments'
   }, interpretation.comments.map(comment => /*#__PURE__*/React.createElement(Comment, {
     key: comment.id,
     comment: comment,
-    currentUser: currentUser,
-    interpretationId: interpretation.id,
-    onThreadUpdated: onThreadUpdated,
     canComment: interpretationAccess.comment
   })))), interpretationAccess.comment && /*#__PURE__*/React.createElement(CommentAddForm, {
-    currentUser: currentUser,
-    interpretationId: interpretation.id,
-    onSave: () => onThreadUpdated(true),
     focusRef: focusRef
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3292109121"
   }, [".thread.jsx-3292109121{margin-top:var(--spacers-dp16);overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".dashboard.jsx-3292109121 .thread.jsx-3292109121{overflow-y:hidden;}", ".container.jsx-3292109121{position:relative;overflow:auto;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.dashboard.jsx-3292109121{max-height:none;}", ".container.fetching.jsx-3292109121::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-3292109121::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;}", ".title.jsx-3292109121{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-3292109121{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
 };
 InterpretationThread.propTypes = {
-  currentUser: PropTypes.object.isRequired,
-  fetching: PropTypes.bool.isRequired,
   interpretation: PropTypes.object.isRequired,
+  loading: PropTypes.bool.isRequired,
   onInterpretationDeleted: PropTypes.func.isRequired,
-  onLikeToggled: PropTypes.func.isRequired,
   dashboardRedirectUrl: PropTypes.string,
   downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  initialFocus: PropTypes.bool,
-  onThreadUpdated: PropTypes.func
+  initialFocus: PropTypes.bool
 };
 export { InterpretationThread };

package/build/es/components/Interpretations/InterpretationsProvider/InterpretationsManager.js

@@ -0,0 +1,268 @@
+import { groupInterpretationIdsByDate } from './groupInterpretationIdsByDate.js';
+export class InterpretationsManager {
+  constructor(dataEngine, currentUser) {
+    if (!dataEngine || !currentUser) {
+      throw new Error('Initialised InterpretationsManager without dataEngine or currentUser');
+    }
+    this.query = dataEngine.query.bind(dataEngine);
+    this.mutate = dataEngine.mutate.bind(dataEngine);
+    this.currentUser = currentUser;
+    this.currentVisualizationId = null;
+    this.currentType = null;
+    this.interpretations = new Map();
+    this.activeInterpretationId = null;
+    this.interpretationsListCallback = null;
+    this.interpretationObservers = new Map();
+  }
+  getInterpretation(id) {
+    const interpretation = this.interpretations.get(id);
+    if (!interpretation) {
+      throw new Error(`Could not get interpretation with id ${id}`);
+    }
+    return interpretation;
+  }
+  getCurrentUser() {
+    return this.currentUser;
+  }
+  getActiveInterpretation() {
+    const activeInterpretation = this.interpretations.get(this.activeInterpretationId);
+    if (!activeInterpretation) {
+      throw new Error('There currently is no active interpretation');
+    }
+    return activeInterpretation;
+  }
+  subscribeToInterpretationsListUpdates(callback) {
+    this.interpretationsListCallback = callback;
+
+    // return cleanup function for useEffect hooks
+    return () => {
+      this.interpretationsListCallback = null;
+    };
+  }
+  subscribeToInterpretationUpdates(id, callback) {
+    // create callback Set if needed on the fly
+    if (!this.interpretationObservers.has(id)) {
+      this.interpretationObservers.set(id, new Set());
+    }
+    this.interpretationObservers.get(id).add(callback);
+
+    // return cleanup function for useEffect hooks
+    return () => {
+      this.interpretationObservers.get(id).delete(callback);
+    };
+  }
+  notifyInterpretationsListObserver() {
+    if (this.interpretationsListCallback) {
+      this.interpretationsListCallback(groupInterpretationIdsByDate(Array.from(this.interpretations.values())));
+    }
+  }
+  notifyInterpretationObservers(id) {
+    const callbacks = this.interpretationObservers.get(id);
+    if (callbacks) {
+      for (const callback of callbacks) {
+        callback(this.getInterpretation(id));
+      }
+    }
+  }
+  clearActiveInterpretation() {
+    this.activeInterpretationId = null;
+  }
+  clearInterpretations() {
+    this.clearActiveInterpretation();
+    this.currentVisualizationId = null;
+    this.currentType = null;
+    this.interpretations.clear();
+  }
+  resetInterpretations(newInterpretations) {
+    this.interpretations.clear();
+    for (const interpretation of newInterpretations) {
+      this.interpretations.set(interpretation.id, interpretation);
+    }
+  }
+  async fetchInterpretationDetails(id) {
+    const result = await this.query({
+      interpretation: {
+        resource: 'interpretations',
+        id,
+        params: {
+          fields: ['access[write,manage]', 'comments[id,text,created,createdBy[id,displayName]]', 'created', 'createdBy[id,displayName]', 'id', 'likedBy', 'likes', 'text']
+        }
+      }
+    });
+    return result.interpretation;
+  }
+  async fetchInterpretationsList() {
+    if (!this.currentType || !this.currentVisualizationId) {
+      throw new Error('Called fetchInterpretationsList before currentType or currentVisualizationId was set');
+    }
+    const result = await this.query({
+      interpretations: {
+        resource: 'interpretations',
+        params: {
+          fields: ['access[write,manage]', 'comments[id]', 'created', 'createdBy[id,displayName]', 'id', 'likedBy[id]', 'likes', 'text'],
+          filter: `${this.currentType}.id:eq:${this.currentVisualizationId}`,
+          paging: false
+        }
+      }
+    });
+    return result.interpretations.interpretations;
+  }
+  async loadActiveInterpretation(id) {
+    const interpretation = await this.fetchInterpretationDetails(id);
+    this.interpretations.set(id, interpretation);
+    this.activeInterpretationId = id;
+    return this.getActiveInterpretation();
+  }
+  async loadInterpretationsForVisualization(type, id) {
+    this.currentType = type;
+    this.currentVisualizationId = id;
+    const interpretations = await this.fetchInterpretationsList();
+    this.resetInterpretations(interpretations);
+    return groupInterpretationIdsByDate(interpretations);
+  }
+  async createInterpretation({
+    type,
+    id,
+    text,
+    onComplete
+  }) {
+    await this.mutate({
+      resource: `interpretations/${type}/${id}`,
+      type: 'create',
+      data: text
+    }, {
+      onComplete
+    });
+    /* since the create request does not return an ID we must refetch the list
+     * and cannot return the created interpretation */
+    const interpretations = await this.fetchInterpretationsList();
+    this.resetInterpretations(interpretations);
+    this.notifyInterpretationsListObserver();
+    return null;
+  }
+  async deleteInterpretation({
+    id,
+    onComplete,
+    onError
+  }) {
+    await this.mutate({
+      resource: 'interpretations',
+      id,
+      type: 'delete'
+    }, {
+      onComplete,
+      onError
+    });
+    // This happens when deleting the interpretation from the modal
+    if (this.activeInterpretationId && id === this.activeInterpretationId) {
+      this.clearActiveInterpretation();
+    }
+    this.interpretations.delete(id);
+    this.notifyInterpretationsListObserver();
+    return null;
+  }
+  async updateInterpretationText({
+    id,
+    text,
+    onComplete,
+    onError
+  }) {
+    await this.mutate({
+      resource: 'interpretations',
+      type: 'update',
+      partial: false,
+      id,
+      data: text
+    }, {
+      onComplete,
+      onError
+    });
+    const updatedInterpretation = {
+      ...this.getInterpretation(id),
+      text
+    };
+    this.interpretations.set(id, updatedInterpretation);
+    this.notifyInterpretationObservers(id);
+    return updatedInterpretation;
+  }
+  async toggleInterpretationLike(id) {
+    const interpretation = this.getInterpretation(id);
+    const wasLikedByCurrentUser = interpretation.likedBy.some(likedBy => likedBy.id === this.currentUser.id);
+    await this.mutate({
+      resource: `interpretations/${id}/like`,
+      type: wasLikedByCurrentUser ? 'delete' : 'create'
+    });
+    const isLikedByCurrentUser = !wasLikedByCurrentUser;
+    const updatedInterpretation = {
+      ...interpretation,
+      likedBy: isLikedByCurrentUser ? interpretation.likedBy.concat({
+        id: this.currentUser.id
+      }) : interpretation.likedBy.filter(lb => lb.id !== this.currentUser.id),
+      likes: isLikedByCurrentUser ? interpretation.likes + 1 : interpretation.likes - 1
+    };
+    this.interpretations.set(id, updatedInterpretation);
+    this.notifyInterpretationObservers(id);
+    return updatedInterpretation;
+  }
+  async addCommentToActiveInterpretation({
+    text,
+    onComplete
+  }) {
+    const {
+      id
+    } = this.getActiveInterpretation();
+    await this.mutate({
+      resource: `interpretations/${id}/comments`,
+      type: 'create',
+      data: text
+    }, {
+      onComplete
+    });
+    const interpretation = await this.fetchInterpretationDetails(id);
+    this.interpretations.set(id, interpretation);
+    this.notifyInterpretationObservers(id);
+    return interpretation;
+  }
+  async deleteCommentFromActiveInterpretation({
+    id
+  }) {
+    const activeInterpretation = this.getActiveInterpretation();
+    await this.mutate({
+      resource: `interpretations/${activeInterpretation.id}/comments/${id}`,
+      type: 'delete'
+    });
+    const updatedInterpretation = {
+      ...activeInterpretation,
+      comments: activeInterpretation.comments.filter(({
+        id: commentId
+      }) => commentId !== id)
+    };
+    this.interpretations.set(activeInterpretation.id, updatedInterpretation);
+    this.notifyInterpretationObservers(activeInterpretation.id);
+    return updatedInterpretation;
+  }
+  async updateCommentForActiveInterpretation({
+    id,
+    text,
+    onComplete
+  }) {
+    const activeInterpretation = this.getActiveInterpretation();
+    this.mutate({
+      resource: `interpretations/${activeInterpretation.id}/comments/${id}`,
+      type: 'update',
+      partial: false,
+      data: text
+    }, {
+      onComplete: () => onComplete(text)
+    });
+    const updatedInterpretation = {
+      ...activeInterpretation,
+      comments: activeInterpretation.comments.map(comment => comment.id === id ? {
+        ...comment,
+        text
+      } : comment)
+    };
+    this.interpretations.set(activeInterpretation.id, updatedInterpretation);
+    return updatedInterpretation;
+  }
+}

package/build/es/components/Interpretations/InterpretationsProvider/InterpretationsProvider.js

@@ -0,0 +1,19 @@
+import { useDataEngine } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React, { createContext, useState } from 'react';
+import { InterpretationsManager } from './InterpretationsManager.js';
+export const InterpretationsContext = /*#__PURE__*/createContext(null);
+export const InterpretationsProvider = ({
+  currentUser,
+  children
+}) => {
+  const dataEngine = useDataEngine();
+  const [interpretationsManager] = useState(() => new InterpretationsManager(dataEngine, currentUser));
+  return /*#__PURE__*/React.createElement(InterpretationsContext.Provider, {
+    value: interpretationsManager
+  }, children);
+};
+InterpretationsProvider.propTypes = {
+  children: PropTypes.node,
+  currentUser: PropTypes.object
+};

package/build/es/components/Interpretations/InterpretationsProvider/__tests__/groupInterpretationIdsByDate.spec.js

@@ -0,0 +1,35 @@
+import { groupInterpretationIdsByDate } from '../groupInterpretationIdsByDate.js';
+describe('groupInterpretationIdsByDate', () => {
+  it('should group interpretations by date and sort them correctly', () => {
+    const interpretations = [{
+      id: 'id1',
+      created: '2025-09-04T07:47:12.477'
+    }, {
+      id: 'id2',
+      created: '2025-09-04T15:30:45.123'
+    }, {
+      id: 'id3',
+      created: '2025-09-03T10:20:30.456'
+    }, {
+      id: 'id4',
+      created: '2025-09-05T09:15:22.789'
+    }, {
+      id: 'id5',
+      created: '2025-09-03T18:45:15.012'
+    }];
+    const result = groupInterpretationIdsByDate(interpretations);
+
+    // Check that dates are grouped correctly
+    expect(Object.keys(result)).toEqual(['2025-09-05', '2025-09-04', '2025-09-03']);
+
+    // Check that within each date group, items are sorted from most recent to oldest
+    expect(result['2025-09-04']).toEqual(['id2', 'id1']); // 15:30 before 07:47
+    expect(result['2025-09-03']).toEqual(['id5', 'id3']); // 18:45 before 10:20
+    expect(result['2025-09-05']).toEqual(['id4']);
+  });
+  it('should handle empty array', () => {
+    const interpretations = [];
+    const result = groupInterpretationIdsByDate(interpretations);
+    expect(result).toEqual({});
+  });
+});