From 30e9e4c938d4f6c0df4477e22487091d64b53240 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Wed, 17 Apr 2024 19:56:54 -0800 Subject: [PATCH 001/169] Initial helm chart for debugging purposes only. --- helm/.helmignore | 23 +++++ helm/Chart.yaml | 24 +++++ helm/README.md | 33 +++++++ helm/metacatui-pv.yaml | 14 +++ helm/metacatui-pvc.yaml | 14 +++ helm/templates/.ingress.yaml.swp | Bin 0 -> 12288 bytes helm/templates/NOTES.txt | 22 +++++ helm/templates/_helpers.tpl | 62 +++++++++++++ helm/templates/deployment.yaml | 72 +++++++++++++++ helm/templates/hpa.yaml | 32 +++++++ helm/templates/ingress.yaml | 61 +++++++++++++ helm/templates/service.yaml | 15 ++++ helm/templates/serviceaccount.yaml | 13 +++ helm/templates/tests/test-connection.yaml | 15 ++++ helm/values.yaml | 104 ++++++++++++++++++++++ 15 files changed, 504 insertions(+) create mode 100644 helm/.helmignore create mode 100644 helm/Chart.yaml create mode 100644 helm/README.md create mode 100644 helm/metacatui-pv.yaml create mode 100644 helm/metacatui-pvc.yaml create mode 100644 helm/templates/.ingress.yaml.swp create mode 100644 helm/templates/NOTES.txt create mode 100644 helm/templates/_helpers.tpl create mode 100644 helm/templates/deployment.yaml create mode 100644 helm/templates/hpa.yaml create mode 100644 helm/templates/ingress.yaml create mode 100644 helm/templates/service.yaml create mode 100644 helm/templates/serviceaccount.yaml create mode 100644 helm/templates/tests/test-connection.yaml create mode 100644 helm/values.yaml diff --git a/helm/.helmignore b/helm/.helmignore new file mode 100644 index 000000000..0e8a0eb36 --- /dev/null +++ b/helm/.helmignore @@ -0,0 +1,23 @@ +# Patterns to ignore when building packages. +# This supports shell glob matching, relative path matching, and +# negation (prefixed with !). Only one pattern per line. +.DS_Store +# Common VCS dirs +.git/ +.gitignore +.bzr/ +.bzrignore +.hg/ +.hgignore +.svn/ +# Common backup files +*.swp +*.bak +*.tmp +*.orig +*~ +# Various IDEs +.project +.idea/ +*.tmproj +.vscode/ diff --git a/helm/Chart.yaml b/helm/Chart.yaml new file mode 100644 index 000000000..585d738d0 --- /dev/null +++ b/helm/Chart.yaml @@ -0,0 +1,24 @@ +apiVersion: v2 +name: metacatui +description: MetacatUI, a web interface for DataONE repositories + +# A chart can be either an 'application' or a 'library' chart. +# +# Application charts are a collection of templates that can be packaged into versioned archives +# to be deployed. +# +# Library charts provide useful utilities or functions for the chart developer. They're included as +# a dependency of application charts to inject those utilities and functions into the rendering +# pipeline. Library charts do not define any templates and therefore cannot be deployed. +type: application + +# This is the chart version. This version number should be incremented each time you make changes +# to the chart and its templates, including the app version. +# Versions are expected to follow Semantic Versioning (https://semver.org/) +version: 0.4.0 + +# This is the version number of the application being deployed. This version number should be +# incremented each time you make changes to the application. Versions are not expected to +# follow Semantic Versioning. They should reflect the version the application is using. +# It is recommended to use it with quotes. +appVersion: "latest" diff --git a/helm/README.md b/helm/README.md new file mode 100644 index 000000000..5052d0fd1 --- /dev/null +++ b/helm/README.md @@ -0,0 +1,33 @@ +# MetacatUI Helm chart + +This is a simple helm chart for debugging a MetacatUI deployment. It works by: + +0. Create a namespace `mcui` for the deployment (or pick another of your liking) +1. Create a PV that is mapped to a local `hostPath` directory that contains the web files to deploy +2. Create a PVC for the PV +3. Create a nginx deployment behind an ingress that mounts the PVC where nginx expects its web files to live + +To deploy this, you need to 1) create the PV and PVC for your system layout, 2) modify the values.yaml to your hostname for the Ingress definition, and 3) install the helm chart: + +```bash +❯ helm -n mcui upgrade --install mcui ./helm +Release "mcui" has been upgraded. Happy Helming! +NAME: mcui +LAST DEPLOYED: Wed Apr 17 19:45:58 2024 +NAMESPACE: mcui +STATUS: deployed +REVISION: 11 +NOTES: +1. Get the application URL by running these commands: + http://firn.local/ +``` + +You can now edit the MetacatUI files and changes will be immediately visible in your chart. You will likely need to edit the `config.js` file to get a minimal setup working. For example, I used the `config/config.js` with these contents: + +```javascript +MetacatUI.AppConfig = { + root: "/", + baseUrl: "https://dev.nceas.ucsb.edu/knb/d1/mn" +} +``` + diff --git a/helm/metacatui-pv.yaml b/helm/metacatui-pv.yaml new file mode 100644 index 000000000..689934a4a --- /dev/null +++ b/helm/metacatui-pv.yaml @@ -0,0 +1,14 @@ +apiVersion: v1 +kind: PersistentVolume +metadata: + name: metacatui-pv +spec: + accessModes: + - ReadWriteOnce + capacity: + storage: 10Gi + hostPath: + path: /Users/jones/development/metacatui/src + type: "" + persistentVolumeReclaimPolicy: Retain + volumeMode: Filesystem diff --git a/helm/metacatui-pvc.yaml b/helm/metacatui-pvc.yaml new file mode 100644 index 000000000..a478b54b1 --- /dev/null +++ b/helm/metacatui-pvc.yaml @@ -0,0 +1,14 @@ +apiVersion: v1 +kind: PersistentVolumeClaim +metadata: + name: metacatui-pvc + namespace: mcui +spec: + accessModes: + - ReadWriteOnce + resources: + requests: + storage: 10Gi + storageClassName: "" + volumeMode: Filesystem + volumeName: metacatui-pv diff --git a/helm/templates/.ingress.yaml.swp b/helm/templates/.ingress.yaml.swp new file mode 100644 index 0000000000000000000000000000000000000000..c3a32c5bf7a659eb55c245209d05148a56e3dace GIT binary patch literal 12288 zcmeI2&yUt6r>_g#fD|AFNC8rS6d(mif&YO5HeF#ikmqA%uIuG_rExBsbRq>v0aAbzAO%PP zQh*d71xNu>fD|AFNP$OC0Wo0g*C!aecL2fT|NqtB|M#9_>|1aX909*P%h*Nm7I*{v zbBM7&z?UEdo8UEY0vrV|fd39M_BZ$$+yS?M1RsL;!2M?!`wn~qZiAcPV{ieS1TTWe z!Cy}^_8Yhhegt2G97NzF@H#jOzJH3bufSEX1rCFMpJeQJ@DsQLz5wrlSHMB=0D0dB zF8@EB26T`DqyQ;E3XlSix&l|Ow7Jv+e(f6LI2uiNYtGGu9Y$v3D3tFeneAarzG}vy zYgBIhu>PmCydYv(SPpZgTx;6Y$EM7T9ygNCy-oEu~$?CAZSw2&{TTFnv5Fa@T1*XG!)s825)_3^z<+CCIN1K!2nUKc{hUS8YP`fKQd>( zIptRFGLx{BPaokNPkv`x+EY!G#>>R@tbW3K>sWnu;Y_x+v2kY5#;x*X^6j@TU?e@S zTK#LyPydjkeE6}EFz4mY)C2XRS?J2wZ#m#T>%{w;yTdM{-tmdI$qN)xRmqkwq` l{ET`vC+|;KM$=1.18-0" .Capabilities.KubeVersion.GitVersion)) }} + {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }} + {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}} + {{- end }} +{{- end }} +{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}} +apiVersion: networking.k8s.io/v1 +{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}} +apiVersion: networking.k8s.io/v1beta1 +{{- else -}} +apiVersion: extensions/v1beta1 +{{- end }} +kind: Ingress +metadata: + name: {{ $fullName }} + labels: + {{- include "metacatui.labels" . | nindent 4 }} + {{- with .Values.ingress.annotations }} + annotations: + {{- toYaml . | nindent 4 }} + {{- end }} +spec: + {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }} + ingressClassName: {{ .Values.ingress.className }} + {{- end }} + {{- if .Values.ingress.tls }} + tls: + {{- range .Values.ingress.tls }} + - hosts: + {{- range .hosts }} + - {{ . | quote }} + {{- end }} + secretName: {{ .secretName }} + {{- end }} + {{- end }} + rules: + {{- range .Values.ingress.hosts }} + - host: {{ .host | quote }} + http: + paths: + {{- range .paths }} + - path: {{ .path }} + {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }} + pathType: {{ .pathType }} + {{- end }} + backend: + {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }} + service: + name: {{ $fullName }} + port: + number: {{ $svcPort }} + {{- else }} + serviceName: {{ $fullName }} + servicePort: {{ $svcPort }} + {{- end }} + {{- end }} + {{- end }} +{{- end }} diff --git a/helm/templates/service.yaml b/helm/templates/service.yaml new file mode 100644 index 000000000..785db5717 --- /dev/null +++ b/helm/templates/service.yaml @@ -0,0 +1,15 @@ +apiVersion: v1 +kind: Service +metadata: + name: {{ include "metacatui.fullname" . }} + labels: + {{- include "metacatui.labels" . | nindent 4 }} +spec: + type: {{ .Values.service.type }} + ports: + - port: {{ .Values.service.port }} + targetPort: http + protocol: TCP + name: http + selector: + {{- include "metacatui.selectorLabels" . | nindent 4 }} diff --git a/helm/templates/serviceaccount.yaml b/helm/templates/serviceaccount.yaml new file mode 100644 index 000000000..84f602059 --- /dev/null +++ b/helm/templates/serviceaccount.yaml @@ -0,0 +1,13 @@ +{{- if .Values.serviceAccount.create -}} +apiVersion: v1 +kind: ServiceAccount +metadata: + name: {{ include "metacatui.serviceAccountName" . }} + labels: + {{- include "metacatui.labels" . | nindent 4 }} + {{- with .Values.serviceAccount.annotations }} + annotations: + {{- toYaml . | nindent 4 }} + {{- end }} +automountServiceAccountToken: {{ .Values.serviceAccount.automount }} +{{- end }} diff --git a/helm/templates/tests/test-connection.yaml b/helm/templates/tests/test-connection.yaml new file mode 100644 index 000000000..98a51f6dc --- /dev/null +++ b/helm/templates/tests/test-connection.yaml @@ -0,0 +1,15 @@ +apiVersion: v1 +kind: Pod +metadata: + name: "{{ include "metacatui.fullname" . }}-test-connection" + labels: + {{- include "metacatui.labels" . | nindent 4 }} + annotations: + "helm.sh/hook": test +spec: + containers: + - name: wget + image: busybox + command: ['wget'] + args: ['{{ include "metacatui.fullname" . }}:{{ .Values.service.port }}'] + restartPolicy: Never diff --git a/helm/values.yaml b/helm/values.yaml new file mode 100644 index 000000000..d64486960 --- /dev/null +++ b/helm/values.yaml @@ -0,0 +1,104 @@ +# Default values for metacatui. +# This is a YAML-formatted file. +# Declare variables to be passed into your templates. + +replicaCount: 1 + +image: + repository: nginx + pullPolicy: IfNotPresent + # Overrides the image tag whose default is the chart appVersion. + tag: "latest" + +imagePullSecrets: [] +nameOverride: "" +fullnameOverride: "" + +serviceAccount: + # Specifies whether a service account should be created + create: false + # Automatically mount a ServiceAccount's API credentials? + automount: true + # Annotations to add to the service account + annotations: {} + # The name of the service account to use. + # If not set and create is true, a name is generated using the fullname template + name: "" + +podAnnotations: {} +podLabels: {} + +podSecurityContext: {} + # fsGroup: 2000 + +securityContext: {} + # capabilities: + # drop: + # - ALL + # readOnlyRootFilesystem: true + # runAsNonRoot: true + # runAsUser: 1000 + +service: + type: ClusterIP + port: 80 + +ingress: + enabled: true + className: traefik + annotations: + #traefik.ingress.kubernetes.io/router.entrypoints: web + kubernetes.io/ingress.class: traefik + # kubernetes.io/ingress.class: nginx + # kubernetes.io/tls-acme: "true" + hosts: + - host: firn.local + paths: + - path: / + pathType: Prefix + backend: + service: + name: mcui-metacatui + port: + number: 80 + tls: [] + # - secretName: chart-example-tls + # hosts: + # - chart-example.local + +resources: {} + # We usually recommend not to specify default resources and to leave this as a conscious + # choice for the user. This also increases chances charts run on environments with little + # resources, such as Minikube. If you do want to specify resources, uncomment the following + # lines, adjust them as necessary, and remove the curly braces after 'resources:'. + # limits: + # cpu: 100m + # memory: 128Mi + # requests: + # cpu: 100m + # memory: 128Mi + +autoscaling: + enabled: false + minReplicas: 1 + maxReplicas: 100 + targetCPUUtilizationPercentage: 80 + # targetMemoryUtilizationPercentage: 80 + +# Additional volumes on the output Deployment definition. +volumes: + - name: metacatui-pvc + persistentVolumeClaim: + claimName: metacatui-pvc + +# Additional volumeMounts on the output Deployment definition. +volumeMounts: + - name: metacatui-pvc + mountPath: "/usr/share/nginx/html" + readOnly: true + +nodeSelector: {} + +tolerations: [] + +affinity: {} From d2e833b2bd4c24eef1cab661f2b7bee155e62025 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Wed, 17 Apr 2024 20:58:58 -0800 Subject: [PATCH 002/169] Disable Ingress by default to avoid accidental deploys. --- helm/values.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/helm/values.yaml b/helm/values.yaml index d64486960..47ad6fce8 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -44,7 +44,7 @@ service: port: 80 ingress: - enabled: true + enabled: false className: traefik annotations: #traefik.ingress.kubernetes.io/router.entrypoints: web @@ -58,7 +58,7 @@ ingress: pathType: Prefix backend: service: - name: mcui-metacatui + name: mcui-metacatui # Assumes the service is exposed in the mcui namespace port: number: 80 tls: [] From 28f685954bff54cdb74ef74654034ba95b3430a5 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Wed, 1 May 2024 11:12:40 -0700 Subject: [PATCH 003/169] Only use inline import, remove the top level model import to avoid circular dependency Only use inline import, remove the top level model import to avoid circular dependency Reference: #2395 --- src/js/collections/Citations.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/collections/Citations.js b/src/js/collections/Citations.js index bafe747dc..66f6f4f33 100644 --- a/src/js/collections/Citations.js +++ b/src/js/collections/Citations.js @@ -1,8 +1,8 @@ /* global define */ "use strict"; -define(['jquery', 'underscore', 'backbone', 'models/CitationModel'], - function($, _, Backbone, CitationModel) { +define(['jquery', 'underscore', 'backbone'], + function($, _, Backbone) { /** * @class Citations @@ -18,7 +18,7 @@ define(['jquery', 'underscore', 'backbone', 'models/CitationModel'], /** @lends Citations.prototype */{ model: function (attrs, options) { - // We use the inline require here in addition to the define above to + // We use the inline require here to // avoid an issue caused by the circular dependency between // CitationModel and Citations var CitationModel = require('models/CitationModel'); From e2e9b7c862200ff3993ddf5f0372641f7d8b3463 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 2 May 2024 13:00:38 -0700 Subject: [PATCH 004/169] Restore dual require for Citations collection; add dual require for Citation Model Restore dual require for Citations collection; add dual require for Citation Model #2395 --- src/js/collections/Citations.js | 6 +++--- src/js/models/CitationModel.js | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/js/collections/Citations.js b/src/js/collections/Citations.js index 66f6f4f33..bafe747dc 100644 --- a/src/js/collections/Citations.js +++ b/src/js/collections/Citations.js @@ -1,8 +1,8 @@ /* global define */ "use strict"; -define(['jquery', 'underscore', 'backbone'], - function($, _, Backbone) { +define(['jquery', 'underscore', 'backbone', 'models/CitationModel'], + function($, _, Backbone, CitationModel) { /** * @class Citations @@ -18,7 +18,7 @@ define(['jquery', 'underscore', 'backbone'], /** @lends Citations.prototype */{ model: function (attrs, options) { - // We use the inline require here to + // We use the inline require here in addition to the define above to // avoid an issue caused by the circular dependency between // CitationModel and Citations var CitationModel = require('models/CitationModel'); diff --git a/src/js/models/CitationModel.js b/src/js/models/CitationModel.js index 817f44cc4..c839f946d 100644 --- a/src/js/models/CitationModel.js +++ b/src/js/models/CitationModel.js @@ -156,6 +156,11 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], function ( // Format the citation metadata = DataONE datasets cited by this // citation (external document) const cm = response.citationMetadata; + + // We use the inline require here in addition to the define above to + // avoid an issue caused by the circular dependency between + // CitationModel and Citations + var Citations = require('collections/Citations'); if (cm) { if (cm && !(cm instanceof Citations)) { const citationMetadata = Object.entries(cm).map(([pid, data]) => { From 07b12434eb2cb1a52b2dfbff2f53ffaad27ee393 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Mon, 3 Jun 2024 08:44:59 -0700 Subject: [PATCH 005/169] Use the proper packageService download URL Use the proper packageService download URL Reference: #2373 #2424 --- src/js/views/DownloadButtonView.js | 3 +-- src/js/views/MetadataView.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/js/views/DownloadButtonView.js b/src/js/views/DownloadButtonView.js index 262c3dd1a..97151d1f7 100644 --- a/src/js/views/DownloadButtonView.js +++ b/src/js/views/DownloadButtonView.js @@ -35,8 +35,7 @@ define(['jquery', 'underscore', 'backbone', 'models/SolrResult', 'models/DataONE (this.model.get("type") == "DataPackage"))) { hrefLink = this.model.getPackageURL(); } - if (this.model instanceof PackageModel && - this.nested && + if (this.model instanceof PackageModel && ((this.model.get("formatType") == "RESOURCE") || (this.model.get("type") == "DataPackage") || (this.model.get("type") == "Package"))) { diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js index 41af84291..54d1cea76 100644 --- a/src/js/views/MetadataView.js +++ b/src/js/views/MetadataView.js @@ -968,7 +968,7 @@ define(['jquery', // Add Package Download // create an instance of DownloadButtonView to handle package downloads - this.downloadButtonView = new DownloadButtonView({id: packageModel.get("id"), model: packageModel, view: "actionsView"}); + this.downloadButtonView = new DownloadButtonView({ model: packageModel, view: "actionsView"}); // render this.downloadButtonView.render(); From 753f37e47426bfcab864022956275bf05479c8c2 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Sun, 26 May 2024 12:48:15 -0700 Subject: [PATCH 006/169] Decode entity PIDs from the view service properly Decode entity PIDs from the view service properly Reference: #2403 --- src/js/views/MetadataView.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js index 41af84291..701443927 100644 --- a/src/js/views/MetadataView.js +++ b/src/js/views/MetadataView.js @@ -3156,13 +3156,24 @@ define(['jquery', }, storeEntityPIDs: function(responseEl) { - var view = this; - _.each($(responseEl).find(".entitydetails"), function (entityEl) { - var entityId = $(entityEl).data("id"); - view.entities.push(entityId.replace('urn-uuid-', 'urn:uuid:')); - }); + var view = this; + _.each($(responseEl).find(".entitydetails"), function (entityEl) { + var entityId = $(entityEl).data("id"); + + // Check and replace urn-uuid- with urn:uuid: if the string starts with urn-uuid- + if (entityId.startsWith('urn-uuid-')) { + entityId = entityId.replace('urn-uuid-', 'urn:uuid:'); + } + + // Check and replace doi-10. with doi:10. if the string starts with doi-10. + if (entityId.startsWith('doi-10.')) { + entityId = entityId.replace('doi-10.', 'doi:10.'); + } + + view.entities.push(entityId); + }); } - }); + }); return MetadataView; }); From 300e68f28a0df068069f525d06b71a30a68f01b2 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Mon, 3 Jun 2024 10:57:01 -0700 Subject: [PATCH 007/169] Use the DownloadButtonView instead of reconstructing the download URL Use the DownloadButtonView instead of reconstructing the download URL Reference: #2424 --- src/js/views/DataItemView.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/js/views/DataItemView.js b/src/js/views/DataItemView.js index 279deaca0..dfdcb3bcf 100644 --- a/src/js/views/DataItemView.js +++ b/src/js/views/DataItemView.js @@ -539,21 +539,6 @@ define([ } //Download button - attributes.downloadUrl = undefined; - if (this.model.get("dataUrl") !== undefined || - this.model.get("url") !== undefined || - this.model.url() !== undefined) { - if (this.model.get("dataUrl") !== undefined) { - attributes.downloadUrl = this.model.get("dataUrl"); - } - else if (this.model.get("url") !== undefined) { - attributes.downloadUrl = this.model.get("url"); - } - else if (this.model.url() !== undefined) { - var downloadUrl = this.model.url(); - attributes.downloadUrl = downloadUrl.replace("/meta/", "/object/"); - } - } this.downloadButtonView = new DownloadButtonView({ model: this.model, view: "actionsView" }); this.downloadButtonView.render(); From a17d85379345bc62533b8d836afeb7832d60a982 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Mon, 3 Jun 2024 10:57:51 -0700 Subject: [PATCH 008/169] Update query selector to only update the package header URL Update query selector to only update the package header URL Reference: #2424 --- src/js/templates/dataPackageHeader.html | 2 +- src/js/views/DataPackageView.js | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/js/templates/dataPackageHeader.html b/src/js/templates/dataPackageHeader.html index 11426b4bc..0ae8a8a3f 100644 --- a/src/js/templates/dataPackageHeader.html +++ b/src/js/templates/dataPackageHeader.html @@ -35,7 +35,7 @@ <% if (!disablePackageDownloads) { %> - + <% } %> diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 4b708dd2a..84496aa34 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -890,16 +890,12 @@ define([ let titleTooltip = title; title = (title.length > 150) ? title.slice(0, 75) + "..." + title.slice(title.length - 75, title.length) : title; - // Set the package URL - if (MetacatUI.appModel.get("packageServiceUrl")) - packageUrl = MetacatUI.appModel.get("packageServiceUrl") + encodeURIComponent(dataPackage.id); - /** * The HTML content for the data package header. * * @type {string} */ - tableRow = this.dataPackageHeaderTemplate({ id: dataPackage.id, title: title, titleTooltip: titleTooltip, disablePackageDownloads: false, downloadUrl: packageUrl }); + tableRow = this.dataPackageHeaderTemplate({ id: dataPackage.id, title: title, titleTooltip: titleTooltip, disablePackageDownloads: false }); this.$el.append(tableRow); // Create an instance of DownloadButtonView to handle package downloads @@ -909,7 +905,7 @@ define([ this.downloadButtonView.render(); // Add the downloadButtonView el to the span - this.$el.find('.downloadAction').html(this.downloadButtonView.el); + this.$el.find('.downloadAction[data-id="' + dataPackage.id + '"]').html(this.downloadButtonView.el); // Filter out the packages from the member list members = _.filter(members, function(m) { return (m.type != "Package") }); From 2acec17360c1626e8b4feece2ac9ed6feff35444 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Mon, 3 Jun 2024 11:44:12 -0700 Subject: [PATCH 009/169] Add link to open nested package in actionsPanel Add link to open nested package in actionsPanel Reference: #2418 --- src/css/metacatui-common.css | 4 ++++ src/js/templates/dataPackageHeader.html | 10 ++++++++++ src/js/views/DataPackageView.js | 12 ++++++++++-- 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css index 55b684fd7..4de873ab3 100644 --- a/src/css/metacatui-common.css +++ b/src/css/metacatui-common.css @@ -9189,6 +9189,10 @@ body > #extension-is-installed{ margin-left: -4px; } +.btn.btn-rounded.action.viewAction > i { + margin-left: -2px; +} + /* Data Package Item */ .data-package-item { height: 38px; diff --git a/src/js/templates/dataPackageHeader.html b/src/js/templates/dataPackageHeader.html index 0ae8a8a3f..c90cfb601 100644 --- a/src/js/templates/dataPackageHeader.html +++ b/src/js/templates/dataPackageHeader.html @@ -34,6 +34,16 @@ + + + <% if (!disablePackageUrl && packageUrl !== undefined && packageUrl) { %> + + + + + + <% } %> + <% if (!disablePackageDownloads) { %> <% } %> diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 84496aa34..f1fa7e4e3 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -443,7 +443,7 @@ define([ packageUrl = MetacatUI.appModel.get("packageServiceUrl") + encodeURIComponent(view.dataPackage.id); var disablePackageDownloads = this.disablePackageDownloads; - tableRow = this.dataPackageHeaderTemplate({id:view.dataPackage.id, title: title, titleTooltip: titleTooltip, downloadUrl: packageUrl, disablePackageDownloads: disablePackageDownloads}); + tableRow = this.dataPackageHeaderTemplate({id:view.dataPackage.id, title: title, titleTooltip: titleTooltip, downloadUrl: packageUrl, disablePackageDownloads: disablePackageDownloads, disablePackageUrl: true}); this.$el.append(tableRow); @@ -890,12 +890,20 @@ define([ let titleTooltip = title; title = (title.length > 150) ? title.slice(0, 75) + "..." + title.slice(title.length - 75, title.length) : title; + + /** + * The View URL for this nested package. + * + * @type {string} + */ + let nestedPackageUrl = MetacatUI.root + "/view/" + dataPackage.id; + /** * The HTML content for the data package header. * * @type {string} */ - tableRow = this.dataPackageHeaderTemplate({ id: dataPackage.id, title: title, titleTooltip: titleTooltip, disablePackageDownloads: false }); + tableRow = this.dataPackageHeaderTemplate({ id: dataPackage.id, title: title, titleTooltip: titleTooltip, disablePackageDownloads: false, disablePackageUrl: false, packageUrl: nestedPackageUrl }); this.$el.append(tableRow); // Create an instance of DownloadButtonView to handle package downloads From edda8943614874f39d224a2ed2eb8817aba253b2 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:25:08 -0700 Subject: [PATCH 010/169] add configmap for config.js; git checkout static content --- helm/config/config.js | 28 ++++++++++++ helm/templates/configmap.yaml | 9 ++++ helm/templates/deployment.yaml | 52 +++++++++++++++++----- helm/values.yaml | 80 +++++++++++++++++++++++++++++----- 4 files changed, 147 insertions(+), 22 deletions(-) create mode 100644 helm/config/config.js create mode 100644 helm/templates/configmap.yaml diff --git a/helm/config/config.js b/helm/config/config.js new file mode 100644 index 000000000..19ba4ed47 --- /dev/null +++ b/helm/config/config.js @@ -0,0 +1,28 @@ +MetacatUI.AppConfig = { + root: {{ .Values.appConfig.root | quote }}, + theme: {{ .Values.appConfig.theme | quote }}, + baseUrl: {{ .Values.appConfig.baseUrl | quote }} + {{- $optionalStringValues := list + "d1CNBaseUrl" + "mapKey" + "mdqBaseUrl" + "dataoneSearchUrl" + "googleAnalyticsKey" + "bioportalAPIKey" + "cesiumToken" + -}} + {{- $optionalIntValues := list + "portalLimit" + -}} + {{- range $key, $value := .Values.appConfig }} + {{- if has $key $optionalStringValues }} + {{- (printf ",") }} + {{- (printf "%s: \"%s\"" $key (toString $value)) | nindent 6 }} + {{- else }} + {{- if has $key $optionalIntValues }} + {{- (printf ",") }} + {{- (printf "%s: %s" $key (toString $value)) | nindent 6 }} + {{- end }} + {{- end }} + {{- end }} +} diff --git a/helm/templates/configmap.yaml b/helm/templates/configmap.yaml new file mode 100644 index 000000000..55948e4d0 --- /dev/null +++ b/helm/templates/configmap.yaml @@ -0,0 +1,9 @@ +# Load all files in the "config" directory into a ConfigMap +apiVersion: v1 +kind: ConfigMap +metadata: + name: {{ .Release.Name }}-metacatui-configjs + labels: + {{- include "metacatui.labels" . | nindent 4 }} +data: +{{ (tpl (.Files.Glob "config/*").AsConfig . ) | nindent 4 }} diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index 3154d3292..8002a4c4f 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -30,6 +30,19 @@ spec: serviceAccountName: {{ include "metacatui.serviceAccountName" . }} securityContext: {{- toYaml .Values.podSecurityContext | nindent 8 }} + {{- if .Values.git.enabled }} + initContainers: + - name: git-clone + image: alpine/git + command: + - sh + - -c + - > + git clone -b {{ .Values.git.revision }} --depth 1 {{ .Values.git.repoUrl }} /metacatui + volumeMounts: + - name: {{ .Release.Name }}-mcui-static-files + mountPath: /metacatui + {{- end }} containers: - name: {{ .Chart.Name }} securityContext: @@ -40,24 +53,43 @@ spec: - name: http containerPort: {{ .Values.service.port }} protocol: TCP + {{- with .Values.livenessProbe }} livenessProbe: - httpGet: - path: / - port: http + {{- toYaml . | nindent 12 }} + {{- end }} + {{- with .Values.readinessProbe }} readinessProbe: - httpGet: - path: / - port: http + {{- toYaml . | nindent 12 }} + {{- end }} resources: {{- toYaml .Values.resources | nindent 12 }} - {{- with .Values.volumeMounts }} volumeMounts: + {{- if .Values.appConfig.enabled }} + - name: {{ .Release.Name }}-mcui-config-vol + mountPath: /usr/share/nginx/html/config/config.js + subPath: config.js + {{- end }} + - name: {{ .Release.Name }}-mcui-static-files + mountPath: "/usr/share/nginx/html" + subPath: "src" + {{- with .Values.volumeMounts }} {{- toYaml . | nindent 12 }} {{- end }} - {{- with .Values.volumes }} volumes: - {{- toYaml . | nindent 8 }} - {{- end }} + {{- if .Values.appConfig.enabled }} + - name: {{ .Release.Name }}-mcui-config-vol + configMap: + name: {{ .Release.Name }}-metacatui-configjs + defaultMode: 0644 + {{- end }} + {{- if .Values.git.enabled }} + - name: {{ .Release.Name }}-mcui-static-files + emptyDir: {} + {{- else }} + {{- with .Values.volumes }} + {{- toYaml . | nindent 8 }} + {{- end }} + {{- end }} {{- with .Values.nodeSelector }} nodeSelector: {{- toYaml . | nindent 8 }} diff --git a/helm/values.yaml b/helm/values.yaml index 47ad6fce8..c005ab75c 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -4,6 +4,65 @@ replicaCount: 1 +## appConfig contains the MetacatUI.AppConfig settings that can be overridden. Uses a configMap to +## define MetacatUI.AppConfig, replacing the version of config/config.js found on the mounted drive. +## Note that changes to the configMap will not be read unless the pod is restarted, and changes to +## these values will not be reflected in the configMap unless you do a 'helm upgrade'. +## +appConfig: + ## appConfig.enabled Use a configMap to define MetacatUI.AppConfig, replacing the on-disk version + ## Typical use is "false" for development purposes, and "true" for more-permanent deployments + ## + enabled: true + + ## appConfig.root (required) The url root to be appended after the appConfig.baseUrl, below + ## + root: "/" + + ## appConfig.theme (required) Corresponds to the name of one of the directories in src/js/themes/ + ## + theme: "default" + + ## appConfig.baseUrl (required) the base url (typically defined by the ingress) + ## + baseUrl: "http://localhost:8080/" + + ## Optional configuration -- leave commented to use metacatui default values + ## +# d1CNBaseUrl: "https://cn-sandbox.test.dataone.org/cn" +# mapKey: "your-map-key-here" +# mdqBaseUrl: "https://localhost:8080:30443/quality" +# dataoneSearchUrl: "https://search-stage.test.dataone.org" +# portalLimit: 100 +# googleAnalyticsKey: "your-google-analytics-key-here" +# bioportalAPIKey: "your-bio-portal-api-key-here" +# cesiumToken: "your-cesium-token-here" + + +git: + ## git.enabled set 'true' to create an initContainer and do a git checkout of the metacatui files + ## NOTE: If you set git.enabled: 'false', then you will need to provide values for 'volumes' + ## that + enabled: true + + ## git.repoUrl the https url of the repo to be cloned + repoUrl: "https://github.com/NCEAS/metacatui.git" + + ## git.revision can be any string that makes sense after the command `git checkout`... - for + ## example: + ## git checkout tags/2.29.0 => revision: "tags/2.29.0" + ## git checkout develop => revision: "develop" + ## + revision: "main" + +## volumes Uncomment and provide values if you want to use a pre-configured PVC instead of doing a +## git checkout +#volumes: +# ## volumes.name substitute your own release name, but do NOT change the '-mcui-static-files' part +# - name: -mcui-static-files +# persistentVolumeClaim: +# claimName: + image: repository: nginx pullPolicy: IfNotPresent @@ -14,6 +73,15 @@ imagePullSecrets: [] nameOverride: "" fullnameOverride: "" +#livenessProbe: +# httpGet: +# path: / +# port: http +#readinessProbe: +# httpGet: +# path: / +# port: http + serviceAccount: # Specifies whether a service account should be created create: false @@ -85,18 +153,6 @@ autoscaling: targetCPUUtilizationPercentage: 80 # targetMemoryUtilizationPercentage: 80 -# Additional volumes on the output Deployment definition. -volumes: - - name: metacatui-pvc - persistentVolumeClaim: - claimName: metacatui-pvc - -# Additional volumeMounts on the output Deployment definition. -volumeMounts: - - name: metacatui-pvc - mountPath: "/usr/share/nginx/html" - readOnly: true - nodeSelector: {} tolerations: [] From 375646292f79dcfebb862ab2336532d527cbf3b7 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:41:35 -0700 Subject: [PATCH 011/169] doc update --- helm/README.md | 21 +++++++++++++++++---- helm/config/config.js | 1 + 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/helm/README.md b/helm/README.md index 5052d0fd1..caacac8eb 100644 --- a/helm/README.md +++ b/helm/README.md @@ -1,6 +1,20 @@ # MetacatUI Helm chart -This is a simple helm chart for debugging a MetacatUI deployment. It works by: +This is a simple helm chart for debugging a MetacatUI deployment. + +## Steps to get started for deployment in a Kubernetes cluster: + +1. modify values.yaml as appropriate +2. install the helm chart: +```shell +$ helm -n knb upgrade --install knbmcui ./helm +``` +There's no need to set up any persistent storage - the chart will automatically check out the +metacatui static content from GitHub, and install it on an "emptyDir" that is automatically +created for you. + + +## Steps to get started for development on localhost (e.g. Rancher Desktop/Docker Desktop): 0. Create a namespace `mcui` for the deployment (or pick another of your liking) 1. Create a PV that is mapped to a local `hostPath` directory that contains the web files to deploy @@ -9,8 +23,8 @@ This is a simple helm chart for debugging a MetacatUI deployment. It works by: To deploy this, you need to 1) create the PV and PVC for your system layout, 2) modify the values.yaml to your hostname for the Ingress definition, and 3) install the helm chart: -```bash -❯ helm -n mcui upgrade --install mcui ./helm +```shell +$ helm -n mcui upgrade --install --debug mcui ./helm Release "mcui" has been upgraded. Happy Helming! NAME: mcui LAST DEPLOYED: Wed Apr 17 19:45:58 2024 @@ -30,4 +44,3 @@ MetacatUI.AppConfig = { baseUrl: "https://dev.nceas.ucsb.edu/knb/d1/mn" } ``` - diff --git a/helm/config/config.js b/helm/config/config.js index 19ba4ed47..0dbaa72af 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -2,6 +2,7 @@ MetacatUI.AppConfig = { root: {{ .Values.appConfig.root | quote }}, theme: {{ .Values.appConfig.theme | quote }}, baseUrl: {{ .Values.appConfig.baseUrl | quote }} + {{/* Add any new keys to these lists, and they will be populated automatically if set */}} {{- $optionalStringValues := list "d1CNBaseUrl" "mapKey" From ea093a17726742d6fc91a0f28c21aef7c44cea65 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:54:03 -0700 Subject: [PATCH 012/169] move pv/pvc yaml and add notes --- helm/admin/metacatui-pv.yaml | 18 ++++++++++++++++++ helm/admin/metacatui-pvc.yaml | 18 ++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 helm/admin/metacatui-pv.yaml create mode 100644 helm/admin/metacatui-pvc.yaml diff --git a/helm/admin/metacatui-pv.yaml b/helm/admin/metacatui-pv.yaml new file mode 100644 index 000000000..140e47a57 --- /dev/null +++ b/helm/admin/metacatui-pv.yaml @@ -0,0 +1,18 @@ +## EXAMPLE file for manually creating a Persistent Volume to store the metacatui source code, +## typically for development purposes (so edits can be seen in realtime). +## Needed only if 'source.from:' is set to 'pvc' in values.yaml. +## +apiVersion: v1 +kind: PersistentVolume +metadata: + name: metacatui-pv +spec: + accessModes: + - ReadWriteOnce + capacity: + storage: 10Gi + hostPath: + path: /your/host/path/here # e.g. /Users/jones/development/metacatui/src + type: "" + persistentVolumeReclaimPolicy: Retain + volumeMode: Filesystem diff --git a/helm/admin/metacatui-pvc.yaml b/helm/admin/metacatui-pvc.yaml new file mode 100644 index 000000000..d0e9fa491 --- /dev/null +++ b/helm/admin/metacatui-pvc.yaml @@ -0,0 +1,18 @@ +## EXAMPLE file for manually creating a Persistent Volume Claim to access the PV containing the +## metacatui source code (see metacatui-pv.yaml), typically for development purposes. +## Needed only if 'source.from:' is set to 'pvc' in values.yaml. +## +apiVersion: v1 +kind: PersistentVolumeClaim +metadata: + name: metacatui-pvc + namespace: mcui +spec: + accessModes: + - ReadWriteOnce + resources: + requests: + storage: 10Gi + storageClassName: "" + volumeMode: Filesystem + volumeName: metacatui-pv From 11bc6b5d6922fca49f0299f1af6482b748cc7e53 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:54:50 -0700 Subject: [PATCH 013/169] final config.js --- helm/config/config.js | 40 +++++++++++++--------------------------- 1 file changed, 13 insertions(+), 27 deletions(-) diff --git a/helm/config/config.js b/helm/config/config.js index 0dbaa72af..dc05ae99d 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -1,29 +1,15 @@ MetacatUI.AppConfig = { - root: {{ .Values.appConfig.root | quote }}, - theme: {{ .Values.appConfig.theme | quote }}, - baseUrl: {{ .Values.appConfig.baseUrl | quote }} - {{/* Add any new keys to these lists, and they will be populated automatically if set */}} - {{- $optionalStringValues := list - "d1CNBaseUrl" - "mapKey" - "mdqBaseUrl" - "dataoneSearchUrl" - "googleAnalyticsKey" - "bioportalAPIKey" - "cesiumToken" - -}} - {{- $optionalIntValues := list - "portalLimit" - -}} - {{- range $key, $value := .Values.appConfig }} - {{- if has $key $optionalStringValues }} - {{- (printf ",") }} - {{- (printf "%s: \"%s\"" $key (toString $value)) | nindent 6 }} - {{- else }} - {{- if has $key $optionalIntValues }} - {{- (printf ",") }} - {{- (printf "%s: %s" $key (toString $value)) | nindent 6 }} - {{- end }} - {{- end }} - {{- end }} + {{- $ignoreList := list "enabled" "root" "baseUrl" -}} + {{- range $key, $value := .Values.appConfig }} + {{- if not (has $key $ignoreList) }} + {{- if eq (typeOf $value) "string" }} + {{- $key | nindent 4 }}: {{ $value | quote }}, + {{- else }} + {{- $key | nindent 4 }}: {{ $value }}, + {{- end }} + {{- end }} + {{- end -}} + {{/* These go last, so we can handle the trailing comma */}} + root: {{ required "root is REQUIRED" .Values.appConfig.root | quote }}, + baseUrl: {{ required "baseUrl is REQUIRED" .Values.appConfig.baseUrl | quote }} } From efa461d9137a7bd91e1b5160cb4b7f357fe3a7f2 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:55:46 -0700 Subject: [PATCH 014/169] get source from official release zip, git, or PVC --- helm/templates/deployment.yaml | 33 ++++++++-- helm/values.yaml | 116 +++++++++++++++++++-------------- 2 files changed, 92 insertions(+), 57 deletions(-) diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index 8002a4c4f..4e4a141d3 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -30,17 +30,36 @@ spec: serviceAccountName: {{ include "metacatui.serviceAccountName" . }} securityContext: {{- toYaml .Values.podSecurityContext | nindent 8 }} - {{- if .Values.git.enabled }} + {{- if not (eq .Values.source.from "pvc") }} initContainers: + {{- if (eq .Values.source.from "git") }} - name: git-clone - image: alpine/git + image: alpine/git:latest command: - sh - -c - > - git clone -b {{ .Values.git.revision }} --depth 1 {{ .Values.git.repoUrl }} /metacatui + start=$(date +%s); + git clone -b {{ .Values.source.git.revision }} --depth 1 {{ .Values.source.git.repoUrl }} /metacatui; + finish=$(date +%s); + echo "git clone -b {{ .Values.source.git.revision }} took $((finish - start)) sec"; + {{- else }} + - name: get-source + image: busybox:latest + command: + - sh + - -c + - > + start=$(date +%s); + FILENAME={{ .Values.source.package.version }}.zip; + wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; + unzip $FILENAME -d /tmp/; + mv /tmp/metacatui-{{ .Values.source.package.version }}/* /metacatui/; + finish=$(date +%s); + echo "$FILENAME download and install took $((finish - start)) sec"; + {{- end }} volumeMounts: - - name: {{ .Release.Name }}-mcui-static-files + - name: {{ .Release.Name }}-mcui-source-files mountPath: /metacatui {{- end }} containers: @@ -69,7 +88,7 @@ spec: mountPath: /usr/share/nginx/html/config/config.js subPath: config.js {{- end }} - - name: {{ .Release.Name }}-mcui-static-files + - name: {{ .Release.Name }}-mcui-source-files mountPath: "/usr/share/nginx/html" subPath: "src" {{- with .Values.volumeMounts }} @@ -82,8 +101,8 @@ spec: name: {{ .Release.Name }}-metacatui-configjs defaultMode: 0644 {{- end }} - {{- if .Values.git.enabled }} - - name: {{ .Release.Name }}-mcui-static-files + {{- if not .Values.source.pvc }} + - name: {{ .Release.Name }}-mcui-source-files emptyDir: {} {{- else }} {{- with .Values.volumes }} diff --git a/helm/values.yaml b/helm/values.yaml index c005ab75c..1891947d8 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -2,10 +2,49 @@ # This is a YAML-formatted file. # Declare variables to be passed into your templates. -replicaCount: 1 +source: + ## source.from The source for the metacatui source code. Options are "package", "git", or "pvc" + ## * "package" will download a release package from the metacatui git repository, unzip it, and + ## install the files in local pod storage (emptyDir{}) + ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the + ## files in local pod storage (emptyDir{}) + ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will + ## need to provide values for a pre-configured PVC in 'volumes', below + ## + from: package + + ## git settings ignored unless 'source.from:' is set to 'git' + git: + ## source.git.repoUrl the https url of the repo to be cloned + repoUrl: "https://github.com/NCEAS/metacatui.git" + + ## source.git.revision can be any string that makes sense after the command `git checkout`... + ## - for example: + ## git checkout tags/2.29.0 => revision: "tags/2.29.0" + ## git checkout develop => revision: "develop" + ## + revision: "develop" + + package: + ## source.package.location The remote location where the release zipfile is hosted + ## + location: "https://github.com/NCEAS/metacatui/archive" + + ## source.package.version The release version. Assumes release is a zipfile named .zip + ## example: + ## location: "https://github.com/NCEAS/metacatui/archive" + ## version: "2.29.1" + ## will download: https://github.com/NCEAS/metacatui/archive/2.29.1.zip + ## + version: "2.29.1" ## appConfig contains the MetacatUI.AppConfig settings that can be overridden. Uses a configMap to ## define MetacatUI.AppConfig, replacing the version of config/config.js found on the mounted drive. +## +## You can define any attributes here, that will be automatically inserted into config/config.js. +## For a full list of attributes that can be overridden, see AppModel.js: +## https://github.com/NCEAS/metacatui/blob/main/src/js/models/AppModel.js +## ## Note that changes to the configMap will not be read unless the pod is restarted, and changes to ## these values will not be reflected in the configMap unless you do a 'helm upgrade'. ## @@ -15,51 +54,30 @@ appConfig: ## enabled: true - ## appConfig.root (required) The url root to be appended after the appConfig.baseUrl, below + ## appConfig.root (required) The url root to be appended after the appConfig.baseUrl, below. ## root: "/" - ## appConfig.theme (required) Corresponds to the name of one of the directories in src/js/themes/ - ## - theme: "default" - - ## appConfig.baseUrl (required) the base url (typically defined by the ingress) + ## appConfig.baseUrl (required) the base url. (Typically defined by the ingress; used to contact + ## the metacat API.) ## baseUrl: "http://localhost:8080/" - ## Optional configuration -- leave commented to use metacatui default values + ## Optional configuration. Note you can define any attributes here, to override those that would + ## normally appear in config.js. See full listing in AppModel.js: + ## https://github.com/NCEAS/metacatui/blob/main/src/js/models/AppModel.js ## -# d1CNBaseUrl: "https://cn-sandbox.test.dataone.org/cn" -# mapKey: "your-map-key-here" -# mdqBaseUrl: "https://localhost:8080:30443/quality" -# dataoneSearchUrl: "https://search-stage.test.dataone.org" -# portalLimit: 100 -# googleAnalyticsKey: "your-google-analytics-key-here" -# bioportalAPIKey: "your-bio-portal-api-key-here" -# cesiumToken: "your-cesium-token-here" - - -git: - ## git.enabled set 'true' to create an initContainer and do a git checkout of the metacatui files - ## NOTE: If you set git.enabled: 'false', then you will need to provide values for 'volumes' - ## that - enabled: true - - ## git.repoUrl the https url of the repo to be cloned - repoUrl: "https://github.com/NCEAS/metacatui.git" - ## git.revision can be any string that makes sense after the command `git checkout`... - for - ## example: - ## git checkout tags/2.29.0 => revision: "tags/2.29.0" - ## git checkout develop => revision: "develop" + ## appConfig.theme Corresponds to the name of a directory in src/js/themes/. 'default' if not set ## - revision: "main" + theme: "default" + ## volumes Uncomment and provide values if you want to use a pre-configured PVC instead of doing a ## git checkout #volumes: -# ## volumes.name substitute your own release name, but do NOT change the '-mcui-static-files' part -# - name: -mcui-static-files +# ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part +# - name: -mcui-source-files # persistentVolumeClaim: # claimName: @@ -73,14 +91,14 @@ imagePullSecrets: [] nameOverride: "" fullnameOverride: "" -#livenessProbe: -# httpGet: -# path: / -# port: http -#readinessProbe: -# httpGet: -# path: / -# port: http +livenessProbe: + httpGet: + path: / + port: http +readinessProbe: + httpGet: + path: / + port: http serviceAccount: # Specifies whether a service account should be created @@ -111,16 +129,16 @@ service: type: ClusterIP port: 80 +## ingress typically disabled here and handled by metacat helm chart. Example settings below for +## local dev +## ingress: enabled: false - className: traefik + className: traefik # enable in rancher desktop annotations: - #traefik.ingress.kubernetes.io/router.entrypoints: web kubernetes.io/ingress.class: traefik - # kubernetes.io/ingress.class: nginx - # kubernetes.io/tls-acme: "true" hosts: - - host: firn.local + - host: firn.local # hostname of local machine paths: - path: / pathType: Prefix @@ -130,9 +148,6 @@ ingress: port: number: 80 tls: [] - # - secretName: chart-example-tls - # hosts: - # - chart-example.local resources: {} # We usually recommend not to specify default resources and to leave this as a conscious @@ -146,12 +161,13 @@ resources: {} # cpu: 100m # memory: 128Mi +replicaCount: 1 + autoscaling: enabled: false minReplicas: 1 maxReplicas: 100 targetCPUUtilizationPercentage: 80 - # targetMemoryUtilizationPercentage: 80 nodeSelector: {} From 8e996444d66681358b355f12ec8dd7fd7664d0d1 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:56:21 -0700 Subject: [PATCH 015/169] move pv/pvc yaml --- helm/metacatui-pv.yaml | 14 -------------- helm/metacatui-pvc.yaml | 14 -------------- 2 files changed, 28 deletions(-) delete mode 100644 helm/metacatui-pv.yaml delete mode 100644 helm/metacatui-pvc.yaml diff --git a/helm/metacatui-pv.yaml b/helm/metacatui-pv.yaml deleted file mode 100644 index 689934a4a..000000000 --- a/helm/metacatui-pv.yaml +++ /dev/null @@ -1,14 +0,0 @@ -apiVersion: v1 -kind: PersistentVolume -metadata: - name: metacatui-pv -spec: - accessModes: - - ReadWriteOnce - capacity: - storage: 10Gi - hostPath: - path: /Users/jones/development/metacatui/src - type: "" - persistentVolumeReclaimPolicy: Retain - volumeMode: Filesystem diff --git a/helm/metacatui-pvc.yaml b/helm/metacatui-pvc.yaml deleted file mode 100644 index a478b54b1..000000000 --- a/helm/metacatui-pvc.yaml +++ /dev/null @@ -1,14 +0,0 @@ -apiVersion: v1 -kind: PersistentVolumeClaim -metadata: - name: metacatui-pvc - namespace: mcui -spec: - accessModes: - - ReadWriteOnce - resources: - requests: - storage: 10Gi - storageClassName: "" - volumeMode: Filesystem - volumeName: metacatui-pv From 8a7fac5f62cabc7cbef0ab9b8caf0338b0c7f3b5 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 09:57:29 -0700 Subject: [PATCH 016/169] bump chart version --- helm/Chart.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helm/Chart.yaml b/helm/Chart.yaml index 585d738d0..c0ffd53c2f 100644 --- a/helm/Chart.yaml +++ b/helm/Chart.yaml @@ -15,7 +15,7 @@ type: application # This is the chart version. This version number should be incremented each time you make changes # to the chart and its templates, including the app version. # Versions are expected to follow Semantic Versioning (https://semver.org/) -version: 0.4.0 +version: 0.5.0 # This is the version number of the application being deployed. This version number should be # incremented each time you make changes to the application. Versions are not expected to From a09abb89e6f8e8e1ba1bc65b3b74fa8c025838b8 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 10:17:29 -0700 Subject: [PATCH 017/169] set mcui version --- helm/Chart.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helm/Chart.yaml b/helm/Chart.yaml index c0ffd53c2f..7ead3d7aa 100644 --- a/helm/Chart.yaml +++ b/helm/Chart.yaml @@ -21,4 +21,4 @@ version: 0.5.0 # incremented each time you make changes to the application. Versions are not expected to # follow Semantic Versioning. They should reflect the version the application is using. # It is recommended to use it with quotes. -appVersion: "latest" +appVersion: "2.29.1" From 23261c6a6abebca5cd426a4995b6f3d44777b04b Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 10:43:53 -0700 Subject: [PATCH 018/169] use mcui version from chart yaml --- helm/templates/deployment.yaml | 10 +- helm/values.yaml | 167 +++++++++++++++------------------ 2 files changed, 84 insertions(+), 93 deletions(-) diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index 4e4a141d3..c853d80e7 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -51,10 +51,11 @@ spec: - -c - > start=$(date +%s); - FILENAME={{ .Values.source.package.version }}.zip; + VERSION={{ .Values.source.package.version | default .Chart.AppVersion }} + FILENAME=$VERSION.zip; wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; unzip $FILENAME -d /tmp/; - mv /tmp/metacatui-{{ .Values.source.package.version }}/* /metacatui/; + mv /tmp/metacatui-$VERSION/* /metacatui/; finish=$(date +%s); echo "$FILENAME download and install took $((finish - start)) sec"; {{- end }} @@ -66,8 +67,9 @@ spec: - name: {{ .Chart.Name }} securityContext: {{- toYaml .Values.securityContext | nindent 12 }} - image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}" - imagePullPolicy: {{ .Values.image.pullPolicy }} + image: "{{ .Values.image.repository | default "nginx" }}: + {{- .Values.image.tag | default "latest" }}" + imagePullPolicy: {{ .Values.image.pullPolicy | default "IfNotPresent" }} ports: - name: http containerPort: {{ .Values.service.port }} diff --git a/helm/values.yaml b/helm/values.yaml index 1891947d8..c006a061f 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -1,42 +1,9 @@ -# Default values for metacatui. -# This is a YAML-formatted file. -# Declare variables to be passed into your templates. - -source: - ## source.from The source for the metacatui source code. Options are "package", "git", or "pvc" - ## * "package" will download a release package from the metacatui git repository, unzip it, and - ## install the files in local pod storage (emptyDir{}) - ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the - ## files in local pod storage (emptyDir{}) - ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will - ## need to provide values for a pre-configured PVC in 'volumes', below - ## - from: package - - ## git settings ignored unless 'source.from:' is set to 'git' - git: - ## source.git.repoUrl the https url of the repo to be cloned - repoUrl: "https://github.com/NCEAS/metacatui.git" - - ## source.git.revision can be any string that makes sense after the command `git checkout`... - ## - for example: - ## git checkout tags/2.29.0 => revision: "tags/2.29.0" - ## git checkout develop => revision: "develop" - ## - revision: "develop" - - package: - ## source.package.location The remote location where the release zipfile is hosted - ## - location: "https://github.com/NCEAS/metacatui/archive" - - ## source.package.version The release version. Assumes release is a zipfile named .zip - ## example: - ## location: "https://github.com/NCEAS/metacatui/archive" - ## version: "2.29.1" - ## will download: https://github.com/NCEAS/metacatui/archive/2.29.1.zip - ## - version: "2.29.1" +## Default values for metacatui. +## This is a YAML-formatted file. +## Edit values, then install and/or upgrade using: +## +## $ helm upgrade --install releasename -n mynamespace ./relative/path/to/helm/directory +## ## appConfig contains the MetacatUI.AppConfig settings that can be overridden. Uses a configMap to ## define MetacatUI.AppConfig, replacing the version of config/config.js found on the mounted drive. @@ -70,27 +37,9 @@ appConfig: ## appConfig.theme Corresponds to the name of a directory in src/js/themes/. 'default' if not set ## - theme: "default" + theme: "knb" -## volumes Uncomment and provide values if you want to use a pre-configured PVC instead of doing a -## git checkout -#volumes: -# ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part -# - name: -mcui-source-files -# persistentVolumeClaim: -# claimName: - -image: - repository: nginx - pullPolicy: IfNotPresent - # Overrides the image tag whose default is the chart appVersion. - tag: "latest" - -imagePullSecrets: [] -nameOverride: "" -fullnameOverride: "" - livenessProbe: httpGet: path: / @@ -100,37 +49,12 @@ readinessProbe: path: / port: http -serviceAccount: - # Specifies whether a service account should be created - create: false - # Automatically mount a ServiceAccount's API credentials? - automount: true - # Annotations to add to the service account - annotations: {} - # The name of the service account to use. - # If not set and create is true, a name is generated using the fullname template - name: "" - -podAnnotations: {} -podLabels: {} - -podSecurityContext: {} - # fsGroup: 2000 - -securityContext: {} - # capabilities: - # drop: - # - ALL - # readOnlyRootFilesystem: true - # runAsNonRoot: true - # runAsUser: 1000 - service: type: ClusterIP port: 80 -## ingress typically disabled here and handled by metacat helm chart. Example settings below for -## local dev +## ingress typically disabled here (enabled: false) and handled by metacat helm chart. +## Example settings below for local dev ## ingress: enabled: false @@ -138,17 +62,84 @@ ingress: annotations: kubernetes.io/ingress.class: traefik hosts: - - host: firn.local # hostname of local machine + - host: myMacbookPro.local # example hostname of local machine paths: - path: / pathType: Prefix backend: service: - name: mcui-metacatui # Assumes the service is exposed in the mcui namespace + name: mcui-metacatui # Assumes the service is exposed in the 'mcui' namespace port: number: 80 tls: [] + +## source The source from which to retrieve the metacatui code. NOTE: Changes should not be needed +## here, unless you wish to deviate from the official metacatui release version defined in the +## helm chart (see Chart.yaml) +## +source: + ## source.from Options are "package" (the default), "git", or "pvc" + ## * "package" will download a release package from the metacatui git repository, unzip it, and + ## install the files in local pod storage (emptyDir{}) + ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the + ## files in local pod storage (emptyDir{}) + ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will + ## need to provide values for a pre-configured PVC in 'volumes', below + ## + from: package + + ## source.package (default): use the package version defined in Chart.yaml, unless overridden here + ## Note these settings ignored unless 'source.from:' is set to 'package' + ## example: + ## source.package.location: "https://github.com/NCEAS/metacatui/archive" + ## source.package.version: "2.26.0" + ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip + ## + package: + ## source.package.location The remote location where the release zipfile is hosted + ## + location: "https://github.com/NCEAS/metacatui/archive" + + ## source.package.version override the release version defined in Chart.yaml + ## Assumes release is a zipfile named .zip + ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! + # version: "2.29.1" + + ## source.git clone a specific branch or tag from the metacatui git repository, and install the + ## files in local pod storage (emptyDir{}) + ## Note these settings ignored unless 'source.from:' is set to 'git' + ## +# git: +# ## source.git.repoUrl the https url of the repo to be cloned +# repoUrl: "https://github.com/NCEAS/metacatui.git" +# +# ## source.git.revision can be any string that makes sense after the command `git checkout`... +# ## - for example: +# ## git checkout tags/2.29.0 => revision: "tags/2.29.0" +# ## git checkout develop => revision: "develop" +# ## +# revision: "develop" + +## volumes Uncomment and provide values if you want to use a pre-configured PVC instead of doing a +## git checkout +#volumes: +# ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part +# - name: -mcui-source-files +# persistentVolumeClaim: +# claimName: + + +image: {} +imagePullSecrets: [] +nameOverride: "" +fullnameOverride: "" +serviceAccount: {} +podAnnotations: {} +podLabels: {} +podSecurityContext: {} +securityContext: {} + resources: {} # We usually recommend not to specify default resources and to leave this as a conscious # choice for the user. This also increases chances charts run on environments with little @@ -170,7 +161,5 @@ autoscaling: targetCPUUtilizationPercentage: 80 nodeSelector: {} - tolerations: [] - affinity: {} From d14d29e75ddcfa5992abdf66f267b3ba4cb0194d Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 5 Jun 2024 10:49:53 -0700 Subject: [PATCH 019/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index caacac8eb..3c3fb2df0 100644 --- a/helm/README.md +++ b/helm/README.md @@ -6,6 +6,7 @@ This is a simple helm chart for debugging a MetacatUI deployment. 1. modify values.yaml as appropriate 2. install the helm chart: + ```shell $ helm -n knb upgrade --install knbmcui ./helm ``` From 8306c1c2d0c665bd12e71a5d425b05eac8dab29d Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 6 Jun 2024 12:23:03 -0700 Subject: [PATCH 020/169] Restore required changes after merging develop Restore required changes after merging develop --- src/js/views/DownloadButtonView.js | 1 - src/js/views/MetadataView.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/js/views/DownloadButtonView.js b/src/js/views/DownloadButtonView.js index b22d96681..464464fd9 100644 --- a/src/js/views/DownloadButtonView.js +++ b/src/js/views/DownloadButtonView.js @@ -43,7 +43,6 @@ define([ } if ( this.model instanceof PackageModel && - this.nested && (this.model.get("formatType") == "RESOURCE" || this.model.get("type") == "DataPackage" || this.model.get("type") == "Package") diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js index 4fc208d54..793f43d1b 100644 --- a/src/js/views/MetadataView.js +++ b/src/js/views/MetadataView.js @@ -1122,7 +1122,6 @@ define([ // Add Package Download // create an instance of DownloadButtonView to handle package downloads this.downloadButtonView = new DownloadButtonView({ - id: packageModel.get("id"), model: packageModel, view: "actionsView", }); From 567570c1f2ea8d6640cbdaf1af22ed85a66e4a35 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 6 Jun 2024 12:36:33 -0700 Subject: [PATCH 021/169] Restore changes from merge conflict Restore changes from merge conflict --- src/js/views/DataPackageView.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 87f054acf..8d63917f2 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -483,6 +483,7 @@ titleTooltip: titleTooltip, downloadUrl: packageUrl, disablePackageDownloads: disablePackageDownloads, + disablePackageUrl: true }); this.$el.append(tableRow); @@ -952,6 +953,12 @@ * @type {null|string} */ packageUrl = null; + /** + * The URL of the nested data package. + * + * @type {null|string} + */ + nestedPackageUrl = null; /** * The members of the data package. @@ -989,6 +996,14 @@ MetacatUI.appModel.get("packageServiceUrl") + encodeURIComponent(dataPackage.id); + // Set the nested package URL + if ( + MetacatUI.appModel.get("viewServiceUrl") !== undefined && + MetacatUI.appModel.get("viewServiceUrl") + ) + nestedPackageUrl = + MetacatUI.appModel.get("viewServiceUrl") + encodeURIComponent(dataPackage.id); + /** * The HTML content for the data package header. * @@ -1000,6 +1015,8 @@ titleTooltip: titleTooltip, disablePackageDownloads: false, downloadUrl: packageUrl, + disablePackageUrl: false, + packageUrl: nestedPackageUrl }); this.$el.append(tableRow); From b9af7478b167f892e7baf2bf2f61aa8e5e2a1d65 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 6 Jun 2024 12:43:30 -0700 Subject: [PATCH 022/169] Restore changes from merge conflict Restore changes from merge conflict --- src/js/views/DataPackageView.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 87f054acf..241ce98ec 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -983,12 +983,6 @@ title.slice(title.length - 75, title.length) : title; - // Set the package URL - if (MetacatUI.appModel.get("packageServiceUrl")) - packageUrl = - MetacatUI.appModel.get("packageServiceUrl") + - encodeURIComponent(dataPackage.id); - /** * The HTML content for the data package header. * @@ -999,7 +993,6 @@ title: title, titleTooltip: titleTooltip, disablePackageDownloads: false, - downloadUrl: packageUrl, }); this.$el.append(tableRow); @@ -1014,7 +1007,7 @@ this.downloadButtonView.render(); // Add the downloadButtonView el to the span - this.$el.find(".downloadAction").html(this.downloadButtonView.el); + this.$el.find(".downloadAction[data-id='" + dataPackage.id + "']").html(this.downloadButtonView.el); // Filter out the packages from the member list members = _.filter(members, function (m) { From 6f30219439839aa8c461c1a4a81d9022661db07f Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Fri, 7 Jun 2024 16:15:51 -0700 Subject: [PATCH 023/169] adding global values so metacat chart can do overrides --- helm/config/config.js | 8 ++- helm/templates/_helpers.tpl | 18 +++++ helm/values.yaml | 137 +++++++++++++++++++----------------- 3 files changed, 94 insertions(+), 69 deletions(-) diff --git a/helm/config/config.js b/helm/config/config.js index dc05ae99d..349f08f84 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -1,5 +1,5 @@ MetacatUI.AppConfig = { - {{- $ignoreList := list "enabled" "root" "baseUrl" -}} + {{- $ignoreList := list "enabled" "root" "baseUrl" "metacatContext" "d1CNBaseUrl" -}} {{- range $key, $value := .Values.appConfig }} {{- if not (has $key $ignoreList) }} {{- if eq (typeOf $value) "string" }} @@ -10,6 +10,8 @@ MetacatUI.AppConfig = { {{- end }} {{- end -}} {{/* These go last, so we can handle the trailing comma */}} - root: {{ required "root is REQUIRED" .Values.appConfig.root | quote }}, - baseUrl: {{ required "baseUrl is REQUIRED" .Values.appConfig.baseUrl | quote }} + {{- include "metacatui.cn.url" . | nindent 4 }} + root: {{ required "root_is_REQUIRED" .Values.appConfig.root | quote }}, + metacatContext: {{ required "metacatAppContext_is_REQUIRED" .Values.global.metacatAppContext | quote }}, + baseUrl: {{ required "metacatExternalBaseUrl_is_REQUIRED" .Values.global.metacatExternalBaseUrl | quote }} } diff --git a/helm/templates/_helpers.tpl b/helm/templates/_helpers.tpl index 823ceb6f9..d7f0d5c79 100644 --- a/helm/templates/_helpers.tpl +++ b/helm/templates/_helpers.tpl @@ -60,3 +60,21 @@ Create the name of the service account to use {{- default "default" .Values.serviceAccount.name }} {{- end }} {{- end }} + +{{/* +Populate the dataone cn url +*/}} +{{- define "metacatui.cn.url" -}} +{{- $d1ClientCnUrl := .Values.global.d1ClientCnUrl }} +{{- if $d1ClientCnUrl }} +{{- if not (hasSuffix "/" $d1ClientCnUrl) -}} + {{- $d1ClientCnUrl = print $d1ClientCnUrl "/" -}} +{{- end -}} +{{- $baseCnURL := regexFind "http.?://[^/]*/" $d1ClientCnUrl }} +{{- if not $baseCnURL }} +d1CNBaseUrl: "ERROR_IN_URL__{{ $d1ClientCnUrl }}", +{{- else }} +d1CNBaseUrl: "{{ $baseCnURL }}", +{{- end }} +{{- end }} +{{- end }} diff --git a/helm/values.yaml b/helm/values.yaml index c006a061f..be87e960a 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -5,41 +5,58 @@ ## $ helm upgrade --install releasename -n mynamespace ./relative/path/to/helm/directory ## -## appConfig contains the MetacatUI.AppConfig settings that can be overridden. Uses a configMap to -## define MetacatUI.AppConfig, replacing the version of config/config.js found on the mounted drive. +global: + ## @param global.metacatExternalBaseUrl metacat base url, accessible from outside the cluster. + ## Include protocol and trailing slash, but not the context; e.g.: "https://test.arcticdata.io/" + ## + metacatExternalBaseUrl: "https://localhost/" + + ## @param global.metacatAppContext The directory that metacat is installed in at the `baseUrl`. + ## Used to populate metacatui's 'metacatContext'. + ## For example, if you have metacat installed in $TOMCAT/webapps/knb, then this should be set + ## to "knb". If you are using the default metacat settings, it should be 'metacat' + ## + metacatAppContext: "metacat" + + ## @param global.d1ClientCnUrl the url of the CN. Used to determine metacatui's 'd1CNBaseUrl' + ## NOTE: only the base URL is used to populate d1CNBaseUrl; anything after the third "/" will be + ## ignored - e.g. if you set d1ClientCnUrl: "https://cn.dataone.org/cn", then d1CNBaseUrl will + ## be set to "https://cn.dataone.org/" + ## + d1ClientCnUrl: "https://cn.dataone.org/cn" + + +## appConfig contains the MetacatUI.AppConfig settings that can be overridden. ## -## You can define any attributes here, that will be automatically inserted into config/config.js. -## For a full list of attributes that can be overridden, see AppModel.js: +## Optional configuration. Note you can define any attributes here, to override those that would +## normally appear in config.js. See full listing in AppModel.js: ## https://github.com/NCEAS/metacatui/blob/main/src/js/models/AppModel.js ## -## Note that changes to the configMap will not be read unless the pod is restarted, and changes to -## these values will not be reflected in the configMap unless you do a 'helm upgrade'. +## * * * IMPORTANT NOTE: * * * DO NOT SET THE FOLLOWING VALUES IN THIS SECTION! * * * +## They will be ignored here, because they are populated from the "global" section, above: +## * baseUrl: uses '.Values.global.metacatExternalBaseUrl' +## * d1CNBaseUrl: uses base URL portion of '.Values.global.d1ClientCnUrl' +## - see above for details +## * metacatContext: uses '.Values.global.metacatAppContext' ## appConfig: - ## appConfig.enabled Use a configMap to define MetacatUI.AppConfig, replacing the on-disk version - ## Typical use is "false" for development purposes, and "true" for more-permanent deployments + ## @param appConfig.enabled Define override values in MetacatUI.AppConfig + ## Since we generally want to avoid loading 2 different config.js files, this would typically be + ## set to "false" for production deployments, and "true" only for development & test environments. ## enabled: true - ## appConfig.root (required) The url root to be appended after the appConfig.baseUrl, below. + ## @param appConfig.root The url root to be appended after the metacatui baseUrl. ## root: "/" - ## appConfig.baseUrl (required) the base url. (Typically defined by the ingress; used to contact - ## the metacat API.) - ## - baseUrl: "http://localhost:8080/" - - ## Optional configuration. Note you can define any attributes here, to override those that would - ## normally appear in config.js. See full listing in AppModel.js: - ## https://github.com/NCEAS/metacatui/blob/main/src/js/models/AppModel.js - ## - - ## appConfig.theme Corresponds to the name of a directory in src/js/themes/. 'default' if not set + ## @param appConfig.theme Corresponds to the name of a directory in src/js/themes/. + ## Uses the 'default' theme if not set ## theme: "knb" - +## Probes +## livenessProbe: httpGet: path: / @@ -53,7 +70,7 @@ service: type: ClusterIP port: 80 -## ingress typically disabled here (enabled: false) and handled by metacat helm chart. +## @param ingress typically disabled here (enabled: false) and handled by metacat helm chart. ## Example settings below for local dev ## ingress: @@ -74,12 +91,12 @@ ingress: tls: [] -## source The source from which to retrieve the metacatui code. NOTE: Changes should not be needed -## here, unless you wish to deviate from the official metacatui release version defined in the -## helm chart (see Chart.yaml) +## @param source The source from which to retrieve the metacatui code. NOTE: Changes should not be +## needed here, unless you wish to deviate from the official metacatui release version defined in +## the helm chart (see Chart.yaml) ## source: - ## source.from Options are "package" (the default), "git", or "pvc" + ## @param source.from Options are "package" (the default), "git", or "pvc" ## * "package" will download a release package from the metacatui git repository, unzip it, and ## install the files in local pod storage (emptyDir{}) ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the @@ -89,7 +106,7 @@ source: ## from: package - ## source.package (default): use the package version defined in Chart.yaml, unless overridden here + ## @param source.package (default): Download the official release version defined in Chart.yaml ## Note these settings ignored unless 'source.from:' is set to 'package' ## example: ## source.package.location: "https://github.com/NCEAS/metacatui/archive" @@ -97,31 +114,31 @@ source: ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip ## package: - ## source.package.location The remote location where the release zipfile is hosted + ## @param source.package.location The remote location where the release zipfile is hosted ## location: "https://github.com/NCEAS/metacatui/archive" ## source.package.version override the release version defined in Chart.yaml ## Assumes release is a zipfile named .zip ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! - # version: "2.29.1" +# version: "2.29.1" - ## source.git clone a specific branch or tag from the metacatui git repository, and install the - ## files in local pod storage (emptyDir{}) + ## @param source.git clone a specific branch or tag from the metacatui git repository, and install + ## the files in local pod storage (emptyDir{}) ## Note these settings ignored unless 'source.from:' is set to 'git' ## -# git: -# ## source.git.repoUrl the https url of the repo to be cloned -# repoUrl: "https://github.com/NCEAS/metacatui.git" -# -# ## source.git.revision can be any string that makes sense after the command `git checkout`... -# ## - for example: -# ## git checkout tags/2.29.0 => revision: "tags/2.29.0" -# ## git checkout develop => revision: "develop" -# ## -# revision: "develop" - -## volumes Uncomment and provide values if you want to use a pre-configured PVC instead of doing a + git: + ## @param source.git.repoUrl the https url of the repo to be cloned + repoUrl: "https://github.com/NCEAS/metacatui.git" + + ## @param source.git.revision Any string that makes sense after the command `git checkout`... + ## - for example: + ## revision: "tags/2.29.0" => git checkout tags/2.29.0 + ## revision: "develop" => git checkout develop + ## + revision: "develop" + +## volumes: Uncomment and provide values if you want to use a pre-configured PVC instead of doing a ## git checkout #volumes: # ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part @@ -129,29 +146,6 @@ source: # persistentVolumeClaim: # claimName: - -image: {} -imagePullSecrets: [] -nameOverride: "" -fullnameOverride: "" -serviceAccount: {} -podAnnotations: {} -podLabels: {} -podSecurityContext: {} -securityContext: {} - -resources: {} - # We usually recommend not to specify default resources and to leave this as a conscious - # choice for the user. This also increases chances charts run on environments with little - # resources, such as Minikube. If you do want to specify resources, uncomment the following - # lines, adjust them as necessary, and remove the curly braces after 'resources:'. - # limits: - # cpu: 100m - # memory: 128Mi - # requests: - # cpu: 100m - # memory: 128Mi - replicaCount: 1 autoscaling: @@ -163,3 +157,14 @@ autoscaling: nodeSelector: {} tolerations: [] affinity: {} + +image: {} +imagePullSecrets: [] +nameOverride: "" +fullnameOverride: "" +serviceAccount: {} +podAnnotations: {} +podLabels: {} +podSecurityContext: {} +securityContext: {} +resources: {} From ccb643e4c3679a8767ed1fddcfe40adb5ac0a017 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Fri, 7 Jun 2024 18:38:52 -0700 Subject: [PATCH 024/169] mount configmap containing install script --- helm/config/install.sh | 168 +++++++++++++++++++++++++++++++++ helm/templates/deployment.yaml | 4 + 2 files changed, 172 insertions(+) create mode 100644 helm/config/install.sh diff --git a/helm/config/install.sh b/helm/config/install.sh new file mode 100644 index 000000000..dbcaed504 --- /dev/null +++ b/helm/config/install.sh @@ -0,0 +1,168 @@ +#!/bin/bash +# A script that installs MetacatUI + +# EXPECTS THESE FOLLOWING ENV VARS TO BE PRE-SET +# REQUIRED: +# * tag - MetacatUI tag/version or branch name - e.g. 2.29.1 +# * hostedRepoTheme - boolean +# * configFile +# * updateConfigPath +# * documentRootDir +# +# OPTIONAL: +# * themeLocation + +# Remove the old backup and backup the currently deployed MetacatUI +echo -e "Backing up MetacatUI...." +sudo rm -rf ~/ui-bak; +sudo cp -rf /var/www/$documentRootDir ~/ui-bak; + +# Get the latest MetacatUI release and unzip it +echo -e "Downloading MetacatUI $tag...." +curl -LO https://github.com/NCEAS/metacatui/archive/$tag.zip; +mv $tag.zip ~/; +unzip ~/$tag.zip -d ~/; + +echo -e "Deploying MetacatUI $tag...." +# Configure MetacatUI +if $updateConfigPath ; +then + # Update the config file path, for certain deployments (usually only production environment) + oldPath="\/config\/config.js" + sed "s/$oldPath/"${configFile//\//\\/}"/g" ~/metacatui-$tag/src/index.html > ~/metacatui-$tag/src/index.html.2; + mv ~/metacatui-$tag/src/index.html.2 ~/metacatui-$tag/src/index.html; + + # If a hosted repo theme is specified, retrieve it + if $hostedRepoTheme ; + then + # Clone the hosted-repositories repo + git clone https://github.nceas.ucsb.edu/dataone/hosted-repositories.git; + # Copy the theme directory to MetacatUI + cp -rf hosted-repositories/$themeLocation ~/metacatui-$tag/src/js/themes/; + #Remove the hosted-repositories git directory + rm -rf hosted-repositories + fi + +else + # Copy the config file to the MetacatUI config directory + cp ../$configFile ~/metacatui-$tag/src/config/config.js; +fi + +#Copy the MetacatUI src to the deployment location +sudo cp -rf ~/metacatui-$tag/src/* /var/www/$documentRootDir/; + + + + +#################################################################################################### +## FOR REFERENCE ONLY: +## +#case $deployment in +# +# knb) +# configFile="/js/themes/knb/config.js" +# updateConfigPath=true +# documentRootDir="org.ecoinformatics.knb/metacatui" +# echo -e "Upgrading KNB production" +# ;; +# +# arctic) +# configFile="/catalog/js/themes/arctic/config.js" +# updateConfigPath=true +# documentRootDir="arcticdata.io/htdocs/catalog" +# echo -e "Upgrading Arctic Data production" +# ;; +# +# dataone) +# configFile="/js/themes/dataone/config.js" +# updateConfigPath=true +# documentRootDir="search.dataone.org" +# echo -e "Upgrading DataONE production" +# ;; +# +# opc) +# configFile="/js/themes/opc/config.js" +# updateConfigPath=true +# documentRootDir="opc.dataone.org" +# hostedRepoTheme=true +# themeLocation="src/opc/js/themes/opc" +# echo -e "Upgrading OPC production" +# ;; +# +# cerp) +# configFile="/js/themes/cerp/config.js" +# updateConfigPath=true +# documentRootDir="cerp-sfwmd.dataone.org" +# hostedRepoTheme=true +# themeLocation="src/cerp/js/themes/cerp" +# echo -e "Upgrading CERP-SFWMD production" +# ;; +# +# drp) +# configFile="/js/themes/drp/config.js" +# updateConfigPath=true +# documentRootDir="drp.dataone.org" +# hostedRepoTheme=true +# themeLocation="src/drp/js/themes/drp" +# echo -e "Upgrading DRP production" +# ;; +# +# dev.nceas) +# configFile="dev.nceas.js" +# documentRootDir="edu.ucsb.nceas.dev" +# echo -e "Upgrading dev.nceas" +# ;; +# +# test.arcticdata) +# configFile="test.arcticdata.js" +# documentRootDir="test.arcticdata.io" +# echo -e "Upgrading test.arcticdata.io" +# ;; +# +# demo.arcticdata) +# configFile="demo.arcticdata.js" +# documentRootDir="demo.arcticdata.io" +# echo -e "Upgrading demo.arcticdata.io" +# ;; +# +# demo.nceas) +# configFile="dev.nceas.js" +# documentRootDir="demo.nceas.ucsb.edu" +# echo -e "Upgrading demo.nceas" +# ;; +# +# search-sandbox) +# configFile="search-sandbox.js" +# documentRootDir="search-sandbox.test.dataone.org" +# echo -e "Upgrading search-sandbox.test.dataone.org" +# ;; +# +# search-stage) +# configFile="search-stage.js" +# documentRootDir="search-stage.test.dataone.org" +# echo -e "Upgrading search-stage.test.dataone.org" +# ;; +# +# search.test) +# configFile="search.test.js" +# documentRootDir="search.test.dataone.org" +# echo -e "Upgrading search.test.dataone.org" +# ;; +# +# search-demo) +# configFile="search-demo.js" +# documentRootDir="search-demo.dataone.org" +# echo -e "Upgrading search-demo.dataone.org" +# ;; +# +# plus-preview-fancy-vulture) +# configFile="dataone-plus-preview.js" +# documentRootDir="fancy-vulture.nceas.ucsb.edu" +# echo -e "Upgrading Fancy Vulture to DataONE Plus Preview Production" +# ;; +# +# *) +# echo -e "Deployment unknown. Please upgrade MetacatUI manually." +# exit +# ;; +#esac diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index c853d80e7..f2ea095c5 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -51,6 +51,7 @@ spec: - -c - > start=$(date +%s); + # # # # # # TODO - RUN THE MOUNTED /TMP/SCRIPT.SH INSTEAD # # # # # # VERSION={{ .Values.source.package.version | default .Chart.AppVersion }} FILENAME=$VERSION.zip; wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; @@ -62,6 +63,9 @@ spec: volumeMounts: - name: {{ .Release.Name }}-mcui-source-files mountPath: /metacatui + - name: {{ .Release.Name }}-mcui-config-vol + subPath: install.sh + mountPath: /tmp/install.sh {{- end }} containers: - name: {{ .Chart.Name }} From 1dade31a719858e83af173a32a6d0b66b2687924 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 17 Jun 2024 13:20:02 -0700 Subject: [PATCH 025/169] last checkin before implementing script installation --- helm/config/install.sh | 2 +- helm/templates/configmap.yaml | 2 +- helm/templates/deployment.yaml | 6 +++--- helm/values.yaml | 25 ++++++++++++++----------- 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/helm/config/install.sh b/helm/config/install.sh index dbcaed504..0539ad8f4 100644 --- a/helm/config/install.sh +++ b/helm/config/install.sh @@ -1,7 +1,7 @@ #!/bin/bash # A script that installs MetacatUI -# EXPECTS THESE FOLLOWING ENV VARS TO BE PRE-SET +# EXPECTS THE FOLLOWING ENV VARS TO BE PRE-SET # REQUIRED: # * tag - MetacatUI tag/version or branch name - e.g. 2.29.1 # * hostedRepoTheme - boolean diff --git a/helm/templates/configmap.yaml b/helm/templates/configmap.yaml index 55948e4d0..965830222 100644 --- a/helm/templates/configmap.yaml +++ b/helm/templates/configmap.yaml @@ -2,7 +2,7 @@ apiVersion: v1 kind: ConfigMap metadata: - name: {{ .Release.Name }}-metacatui-configjs + name: {{ .Release.Name }}-metacatui-configfiles labels: {{- include "metacatui.labels" . | nindent 4 }} data: diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index f2ea095c5..137f71348 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -51,8 +51,8 @@ spec: - -c - > start=$(date +%s); - # # # # # # TODO - RUN THE MOUNTED /TMP/SCRIPT.SH INSTEAD # # # # # # - VERSION={{ .Values.source.package.version | default .Chart.AppVersion }} + echo "Starting at $start"; + VERSION={{ .Values.source.package.version | default .Chart.AppVersion }}; FILENAME=$VERSION.zip; wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; unzip $FILENAME -d /tmp/; @@ -104,7 +104,7 @@ spec: {{- if .Values.appConfig.enabled }} - name: {{ .Release.Name }}-mcui-config-vol configMap: - name: {{ .Release.Name }}-metacatui-configjs + name: {{ .Release.Name }}-metacatui-configfiles defaultMode: 0644 {{- end }} {{- if not .Values.source.pvc }} diff --git a/helm/values.yaml b/helm/values.yaml index be87e960a..a17db8fae 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -57,14 +57,14 @@ appConfig: ## Probes ## -livenessProbe: - httpGet: - path: / - port: http -readinessProbe: - httpGet: - path: / - port: http +#livenessProbe: +# httpGet: +# path: / +# port: http +#readinessProbe: +# httpGet: +# path: / +# port: http service: type: ClusterIP @@ -75,11 +75,11 @@ service: ## ingress: enabled: false - className: traefik # enable in rancher desktop + className: traefik # enable in rancher desktop annotations: kubernetes.io/ingress.class: traefik hosts: - - host: myMacbookPro.local # example hostname of local machine + - host: myMacbookPro.local # example hostname of local machine paths: - path: / pathType: Prefix @@ -109,6 +109,7 @@ source: ## @param source.package (default): Download the official release version defined in Chart.yaml ## Note these settings ignored unless 'source.from:' is set to 'package' ## example: + ## source.from: package ## source.package.location: "https://github.com/NCEAS/metacatui/archive" ## source.package.version: "2.26.0" ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip @@ -121,7 +122,7 @@ source: ## source.package.version override the release version defined in Chart.yaml ## Assumes release is a zipfile named .zip ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! -# version: "2.29.1" + # version: "2.29.1" ## @param source.git clone a specific branch or tag from the metacatui git repository, and install ## the files in local pod storage (emptyDir{}) @@ -140,6 +141,8 @@ source: ## volumes: Uncomment and provide values if you want to use a pre-configured PVC instead of doing a ## git checkout +## Note these settings ignored unless 'source.from:' is set to 'pvc' +## #volumes: # ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part # - name: -mcui-source-files From e7c1bd5f6ad2654eb531db7a6785fe7e392b592a Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 11:13:11 -0700 Subject: [PATCH 026/169] not used --- helm/config/install.sh | 168 ----------------------------------------- 1 file changed, 168 deletions(-) delete mode 100644 helm/config/install.sh diff --git a/helm/config/install.sh b/helm/config/install.sh deleted file mode 100644 index 0539ad8f4..000000000 --- a/helm/config/install.sh +++ /dev/null @@ -1,168 +0,0 @@ -#!/bin/bash -# A script that installs MetacatUI - -# EXPECTS THE FOLLOWING ENV VARS TO BE PRE-SET -# REQUIRED: -# * tag - MetacatUI tag/version or branch name - e.g. 2.29.1 -# * hostedRepoTheme - boolean -# * configFile -# * updateConfigPath -# * documentRootDir -# -# OPTIONAL: -# * themeLocation - -# Remove the old backup and backup the currently deployed MetacatUI -echo -e "Backing up MetacatUI...." -sudo rm -rf ~/ui-bak; -sudo cp -rf /var/www/$documentRootDir ~/ui-bak; - -# Get the latest MetacatUI release and unzip it -echo -e "Downloading MetacatUI $tag...." -curl -LO https://github.com/NCEAS/metacatui/archive/$tag.zip; -mv $tag.zip ~/; -unzip ~/$tag.zip -d ~/; - -echo -e "Deploying MetacatUI $tag...." -# Configure MetacatUI -if $updateConfigPath ; -then - # Update the config file path, for certain deployments (usually only production environment) - oldPath="\/config\/config.js" - sed "s/$oldPath/"${configFile//\//\\/}"/g" ~/metacatui-$tag/src/index.html > ~/metacatui-$tag/src/index.html.2; - mv ~/metacatui-$tag/src/index.html.2 ~/metacatui-$tag/src/index.html; - - # If a hosted repo theme is specified, retrieve it - if $hostedRepoTheme ; - then - # Clone the hosted-repositories repo - git clone https://github.nceas.ucsb.edu/dataone/hosted-repositories.git; - # Copy the theme directory to MetacatUI - cp -rf hosted-repositories/$themeLocation ~/metacatui-$tag/src/js/themes/; - #Remove the hosted-repositories git directory - rm -rf hosted-repositories - fi - -else - # Copy the config file to the MetacatUI config directory - cp ../$configFile ~/metacatui-$tag/src/config/config.js; -fi - -#Copy the MetacatUI src to the deployment location -sudo cp -rf ~/metacatui-$tag/src/* /var/www/$documentRootDir/; - - - - -#################################################################################################### -## FOR REFERENCE ONLY: -## -#case $deployment in -# -# knb) -# configFile="/js/themes/knb/config.js" -# updateConfigPath=true -# documentRootDir="org.ecoinformatics.knb/metacatui" -# echo -e "Upgrading KNB production" -# ;; -# -# arctic) -# configFile="/catalog/js/themes/arctic/config.js" -# updateConfigPath=true -# documentRootDir="arcticdata.io/htdocs/catalog" -# echo -e "Upgrading Arctic Data production" -# ;; -# -# dataone) -# configFile="/js/themes/dataone/config.js" -# updateConfigPath=true -# documentRootDir="search.dataone.org" -# echo -e "Upgrading DataONE production" -# ;; -# -# opc) -# configFile="/js/themes/opc/config.js" -# updateConfigPath=true -# documentRootDir="opc.dataone.org" -# hostedRepoTheme=true -# themeLocation="src/opc/js/themes/opc" -# echo -e "Upgrading OPC production" -# ;; -# -# cerp) -# configFile="/js/themes/cerp/config.js" -# updateConfigPath=true -# documentRootDir="cerp-sfwmd.dataone.org" -# hostedRepoTheme=true -# themeLocation="src/cerp/js/themes/cerp" -# echo -e "Upgrading CERP-SFWMD production" -# ;; -# -# drp) -# configFile="/js/themes/drp/config.js" -# updateConfigPath=true -# documentRootDir="drp.dataone.org" -# hostedRepoTheme=true -# themeLocation="src/drp/js/themes/drp" -# echo -e "Upgrading DRP production" -# ;; -# -# dev.nceas) -# configFile="dev.nceas.js" -# documentRootDir="edu.ucsb.nceas.dev" -# echo -e "Upgrading dev.nceas" -# ;; -# -# test.arcticdata) -# configFile="test.arcticdata.js" -# documentRootDir="test.arcticdata.io" -# echo -e "Upgrading test.arcticdata.io" -# ;; -# -# demo.arcticdata) -# configFile="demo.arcticdata.js" -# documentRootDir="demo.arcticdata.io" -# echo -e "Upgrading demo.arcticdata.io" -# ;; -# -# demo.nceas) -# configFile="dev.nceas.js" -# documentRootDir="demo.nceas.ucsb.edu" -# echo -e "Upgrading demo.nceas" -# ;; -# -# search-sandbox) -# configFile="search-sandbox.js" -# documentRootDir="search-sandbox.test.dataone.org" -# echo -e "Upgrading search-sandbox.test.dataone.org" -# ;; -# -# search-stage) -# configFile="search-stage.js" -# documentRootDir="search-stage.test.dataone.org" -# echo -e "Upgrading search-stage.test.dataone.org" -# ;; -# -# search.test) -# configFile="search.test.js" -# documentRootDir="search.test.dataone.org" -# echo -e "Upgrading search.test.dataone.org" -# ;; -# -# search-demo) -# configFile="search-demo.js" -# documentRootDir="search-demo.dataone.org" -# echo -e "Upgrading search-demo.dataone.org" -# ;; -# -# plus-preview-fancy-vulture) -# configFile="dataone-plus-preview.js" -# documentRootDir="fancy-vulture.nceas.ucsb.edu" -# echo -e "Upgrading Fancy Vulture to DataONE Plus Preview Production" -# ;; -# -# *) -# echo -e "Deployment unknown. Please upgrade MetacatUI manually." -# exit -# ;; -#esac From a1ba8be5db1ad7434bb9402fd0c8218414ab030c Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 11:15:38 -0700 Subject: [PATCH 027/169] require theme; make config.js optional --- helm/config/config.js | 2 +- helm/templates/configmap.yaml | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/helm/config/config.js b/helm/config/config.js index 349f08f84..a3f86477c 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -9,8 +9,8 @@ MetacatUI.AppConfig = { {{- end }} {{- end }} {{- end -}} - {{/* These go last, so we can handle the trailing comma */}} {{- include "metacatui.cn.url" . | nindent 4 }} + theme: {{ required "theme_is_REQUIRED" .Values.appConfig.theme | quote }}, root: {{ required "root_is_REQUIRED" .Values.appConfig.root | quote }}, metacatContext: {{ required "metacatAppContext_is_REQUIRED" .Values.global.metacatAppContext | quote }}, baseUrl: {{ required "metacatExternalBaseUrl_is_REQUIRED" .Values.global.metacatExternalBaseUrl | quote }} diff --git a/helm/templates/configmap.yaml b/helm/templates/configmap.yaml index 965830222..1ec251b47 100644 --- a/helm/templates/configmap.yaml +++ b/helm/templates/configmap.yaml @@ -1,9 +1,11 @@ +{{- if .Values.appConfig.enabled }} # Load all files in the "config" directory into a ConfigMap apiVersion: v1 kind: ConfigMap metadata: - name: {{ .Release.Name }}-metacatui-configfiles + name: {{ .Release.Name }}-metacatui-config-js labels: {{- include "metacatui.labels" . | nindent 4 }} data: -{{ (tpl (.Files.Glob "config/*").AsConfig . ) | nindent 4 }} + {{- (tpl (.Files.Glob "config/config.js").AsConfig . ) | nindent 2 }} +{{- end }} From 8586e63a762b3134744c6a55e9c79f387e832dbc Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 11:26:08 -0700 Subject: [PATCH 028/169] change /config/config.js to config/config.js --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index d3170845e..972d48e4c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ From 2f97b4ab29fa7456df85c2b8d7453d67169ca90c Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 11:46:36 -0700 Subject: [PATCH 029/169] handle different roots; autoconfig probes or make optional --- helm/templates/_helpers.tpl | 19 ++++++++- helm/templates/deployment.yaml | 43 ++++++++++++-------- helm/values.yaml | 72 +++++++++++++++++++++++++--------- 3 files changed, 97 insertions(+), 37 deletions(-) diff --git a/helm/templates/_helpers.tpl b/helm/templates/_helpers.tpl index d7f0d5c79..b875fbaef 100644 --- a/helm/templates/_helpers.tpl +++ b/helm/templates/_helpers.tpl @@ -71,10 +71,25 @@ Populate the dataone cn url {{- $d1ClientCnUrl = print $d1ClientCnUrl "/" -}} {{- end -}} {{- $baseCnURL := regexFind "http.?://[^/]*/" $d1ClientCnUrl }} -{{- if not $baseCnURL }} +{{- if not $baseCnURL -}} d1CNBaseUrl: "ERROR_IN_URL__{{ $d1ClientCnUrl }}", -{{- else }} +{{- else -}} d1CNBaseUrl: "{{ $baseCnURL }}", {{- end }} {{- end }} {{- end }} + +{{/* +Remove trailing slash from root, if it exists +*/}} +{{- define "metacatui.clean.root" -}} +{{- $cleanedRoot := regexReplaceAll "/$" .Values.appConfig.root "" -}} +{{- $cleanedRoot }} +{{- end }} + +{{/* +generate file path for the web root mount +*/}} +{{- define "metacatui.root.mountpath" -}} +/usr/share/nginx/html{{ include "metacatui.clean.root" . }} +{{- end }} diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index 137f71348..71911c202 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -56,16 +56,14 @@ spec: FILENAME=$VERSION.zip; wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; unzip $FILENAME -d /tmp/; - mv /tmp/metacatui-$VERSION/* /metacatui/; + mkdir -p /metacatui{{ include "metacatui.clean.root" . }}; + mv /tmp/metacatui-$VERSION/src/* /metacatui{{ include "metacatui.clean.root" . }}; finish=$(date +%s); echo "$FILENAME download and install took $((finish - start)) sec"; {{- end }} volumeMounts: - name: {{ .Release.Name }}-mcui-source-files mountPath: /metacatui - - name: {{ .Release.Name }}-mcui-config-vol - subPath: install.sh - mountPath: /tmp/install.sh {{- end }} containers: - name: {{ .Chart.Name }} @@ -78,35 +76,46 @@ spec: - name: http containerPort: {{ .Values.service.port }} protocol: TCP - {{- with .Values.livenessProbe }} + {{- if .Values.livenessProbeEnabled }} livenessProbe: + {{- if .Values.livenessProbe }} + {{- with .Values.livenessProbe }} {{- toYaml . | nindent 12 }} + {{- end }} + {{- else }} + httpGet: + path: {{ .Values.appConfig.root }} + port: http + {{- end }} {{- end }} - {{- with .Values.readinessProbe }} + {{- if .Values.readinessProbeEnabled }} readinessProbe: + {{- if .Values.readinessProbe }} + {{- with .Values.readinessProbe }} {{- toYaml . | nindent 12 }} + {{- end }} + {{- else }} + httpGet: + path: {{ .Values.appConfig.root }} + port: http + {{- end }} {{- end }} resources: {{- toYaml .Values.resources | nindent 12 }} volumeMounts: - {{- if .Values.appConfig.enabled }} - - name: {{ .Release.Name }}-mcui-config-vol - mountPath: /usr/share/nginx/html/config/config.js - subPath: config.js - {{- end }} - name: {{ .Release.Name }}-mcui-source-files - mountPath: "/usr/share/nginx/html" - subPath: "src" + mountPath: /usr/share/nginx/html + - name: {{ .Release.Name }}-mcui-config-js + mountPath: {{ include "metacatui.root.mountpath" . }}/config/config.js + subPath: config.js {{- with .Values.volumeMounts }} {{- toYaml . | nindent 12 }} {{- end }} volumes: - {{- if .Values.appConfig.enabled }} - - name: {{ .Release.Name }}-mcui-config-vol + - name: {{ .Release.Name }}-mcui-config-js configMap: - name: {{ .Release.Name }}-metacatui-configfiles + name: {{ .Release.Name }}-metacatui-config-js defaultMode: 0644 - {{- end }} {{- if not .Values.source.pvc }} - name: {{ .Release.Name }}-mcui-source-files emptyDir: {} diff --git a/helm/values.yaml b/helm/values.yaml index a17db8fae..90479ece2 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -26,45 +26,81 @@ global: d1ClientCnUrl: "https://cn.dataone.org/cn" -## appConfig contains the MetacatUI.AppConfig settings that can be overridden. +## @section MetacatUI Configuration Files ('config.js') ## -## Optional configuration. Note you can define any attributes here, to override those that would -## normally appear in config.js. See full listing in AppModel.js: +## The k8s version of Metacatui requires two 'config.js' configuration files: +## 1. the "root config" at the path {root}/config/config.js, and +## 2. the "theme config" in the theme directory itself (for example, see the knb config.js at: +## https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) +## +## The "root config" file must, at a minimum, contain the name of the theme to be used, e.g: +## +## MetacatUI.AppConfig = { +## theme: "knb" +## }; +## +## ...and metacatui will then load that theme and its "theme config". +## If any additional settings are defined in the "root config", Metacatui will use them to override +## corresponding settings in the "theme config". +## +## By default, this chart creates a simple "root config" that contains any values of the form: +## 'key: stringValue,' or 'key: intValue,' provided in the 'appConfig:' section below. If you need +## to provide more-complex overrides, set 'appConfig.enabled: false', below, and manually create +## your own configMap named 'YourReleaseName-metacatui-config-js', containing your custom config.js. +## +## Note that if you choose not to use one of the themes that are bundled with metacatui, you will +## need to provide the files for that theme (including its 'theme config' file) on a Persistent +## Volume. See the MetacatUI documentation for help with creating custom themes: +## https://nceas.github.io/metacatui/install/configuration/index.html +## + +## @param appConfig The MetacatUI.AppConfig optional override settings +## +## Optional configuration. Note you can define any attributes here, to override those that appear +## in config.js, provided they are of the form: 'key: stringValue,' or 'key: intValue,'. +## +## See full listing in AppModel.js: ## https://github.com/NCEAS/metacatui/blob/main/src/js/models/AppModel.js ## ## * * * IMPORTANT NOTE: * * * DO NOT SET THE FOLLOWING VALUES IN THIS SECTION! * * * ## They will be ignored here, because they are populated from the "global" section, above: ## * baseUrl: uses '.Values.global.metacatExternalBaseUrl' ## * d1CNBaseUrl: uses base URL portion of '.Values.global.d1ClientCnUrl' -## - see above for details ## * metacatContext: uses '.Values.global.metacatAppContext' ## appConfig: - ## @param appConfig.enabled Define override values in MetacatUI.AppConfig - ## Since we generally want to avoid loading 2 different config.js files, this would typically be - ## set to "false" for production deployments, and "true" only for development & test environments. + ## @param appConfig.enabled Define theme name and override values in MetacatUI.AppConfig + ## If you need to provide more-complex overrides, set 'appConfig.enabled: false', and manually + ## create your own configMap named 'YourReleaseName-metacatui-config-js', containing your custom + ## config.js. ## enabled: true - ## @param appConfig.root The url root to be appended after the metacatui baseUrl. + ## @param appConfig.root The url root to be appended after the metacatui baseUrl. Starts with "/" ## root: "/" ## @param appConfig.theme Corresponds to the name of a directory in src/js/themes/. - ## Uses the 'default' theme if not set ## theme: "knb" -## Probes +## @param livenessProbeEnabled Enable livenessProbe. Autoconfigured using .Values.appConfig.root +## To override autoconfig, keep 'livenessProbeEnabled: true', and define a livenessProbe; e.g: +## livenessProbe: +## httpGet: +## path: /myPath +## port: http +## +livenessProbeEnabled: true + +## @param readinessProbeEnabled Enable readinessProbe. Autoconfigured using .Values.appConfig.root +## To override autoconfig, keep 'readinessProbeEnabled: true', and define a readinessProbe; e.g: +## readinessProbe: +## httpGet: +## path: /myPath +## port: http ## -#livenessProbe: -# httpGet: -# path: / -# port: http -#readinessProbe: -# httpGet: -# path: / -# port: http +readinessProbeEnabled: true service: type: ClusterIP From 0fdc3b7d70b29eab4b8da81d32f52fcf02e20e76 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 14:39:08 -0700 Subject: [PATCH 030/169] fix initContainer --- helm/templates/_helpers.tpl | 18 +++++++ helm/templates/deployment.yaml | 53 +++++++++++++-------- helm/values.yaml | 86 +++++++++++++++++----------------- 3 files changed, 95 insertions(+), 62 deletions(-) diff --git a/helm/templates/_helpers.tpl b/helm/templates/_helpers.tpl index b875fbaef..09204bdf9 100644 --- a/helm/templates/_helpers.tpl +++ b/helm/templates/_helpers.tpl @@ -93,3 +93,21 @@ generate file path for the web root mount {{- define "metacatui.root.mountpath" -}} /usr/share/nginx/html{{ include "metacatui.clean.root" . }} {{- end }} + +{{/* +validate and clean up '.Values.source.from' +*/}} +{{- define "metacatui.source.from" -}} +{{- $source := "" }} +{{- $defaultSrc := "package" }} +{{- if not (and .Values.source .Values.source.from) }} +{{- $source = $defaultSrc }} +{{- else }} +{{- $source = .Values.source.from }} +{{- end }} +{{- $allowedSourceVals := list "package" "git" "pvc" }} +{{- if not (has $source $allowedSourceVals) }} +{{- $source = $defaultSrc }} +{{- end }} +{{- $source }} +{{- end }} diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index 71911c202..d1ce2edd0 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -30,37 +30,52 @@ spec: serviceAccountName: {{ include "metacatui.serviceAccountName" . }} securityContext: {{- toYaml .Values.podSecurityContext | nindent 8 }} - {{- if not (eq .Values.source.from "pvc") }} + {{- $source := (include "metacatui.source.from" .) }} + {{- if ne $source "pvc" }} initContainers: - {{- if (eq .Values.source.from "git") }} - - name: git-clone - image: alpine/git:latest - command: - - sh - - -c - - > - start=$(date +%s); - git clone -b {{ .Values.source.git.revision }} --depth 1 {{ .Values.source.git.repoUrl }} /metacatui; - finish=$(date +%s); - echo "git clone -b {{ .Values.source.git.revision }} took $((finish - start)) sec"; - {{- else }} - name: get-source + {{- if eq $source "git" }} + image: alpine/git:latest + {{- else }} image: busybox:latest + {{- end }} command: - sh - -c - > start=$(date +%s); echo "Starting at $start"; - VERSION={{ .Values.source.package.version | default .Chart.AppVersion }}; + DEST="/metacatui{{ include "metacatui.clean.root" . }}"; + mkdir -p $DEST; + {{- if eq $source "git" }} + {{- $repoUrl := "" }} + {{- $revision := "" }} + {{- if and .Values.source .Values.source.git }} + {{- $repoUrl = .Values.source.git.repoUrl }} + {{- $revision = .Values.source.git.revision }} + {{- end }} + REPO='{{ $repoUrl | default "https://github.com/NCEAS/metacatui.git" }}'; + REV='{{ $revision | default .Chart.AppVersion }}'; + git clone -b $REV --depth 1 $REPO /tmp/metacatui/; + mv /tmp/metacatui/src/* $DEST; + finish=$(date +%s); + echo "git clone -b {{ $revision }} --depth 1 took $((finish - start)) sec"; + {{- else }} + {{- $version := "" }} + {{- $location := "" }} + {{- if and .Values.source .Values.source.package }} + {{- $version = .Values.source.package.version }} + {{- $location = .Values.source.package.location }} + {{- end }} + VERSION={{ $version | default .Chart.AppVersion }}; FILENAME=$VERSION.zip; - wget -O ./$FILENAME {{ .Values.source.package.location }}/$FILENAME; + LOC='{{ $location | default "https://github.com/NCEAS/metacatui/archive" }}'; + wget -O ./$FILENAME $LOC/$FILENAME; unzip $FILENAME -d /tmp/; - mkdir -p /metacatui{{ include "metacatui.clean.root" . }}; - mv /tmp/metacatui-$VERSION/src/* /metacatui{{ include "metacatui.clean.root" . }}; + mv /tmp/metacatui-$VERSION/src/* $DEST; finish=$(date +%s); echo "$FILENAME download and install took $((finish - start)) sec"; - {{- end }} + {{- end }} volumeMounts: - name: {{ .Release.Name }}-mcui-source-files mountPath: /metacatui @@ -116,7 +131,7 @@ spec: configMap: name: {{ .Release.Name }}-metacatui-config-js defaultMode: 0644 - {{- if not .Values.source.pvc }} + {{- if ne $source "pvc" }} - name: {{ .Release.Name }}-mcui-source-files emptyDir: {} {{- else }} diff --git a/helm/values.yaml b/helm/values.yaml index 90479ece2..4feb57d13 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -131,49 +131,49 @@ ingress: ## needed here, unless you wish to deviate from the official metacatui release version defined in ## the helm chart (see Chart.yaml) ## -source: - ## @param source.from Options are "package" (the default), "git", or "pvc" - ## * "package" will download a release package from the metacatui git repository, unzip it, and - ## install the files in local pod storage (emptyDir{}) - ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the - ## files in local pod storage (emptyDir{}) - ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will - ## need to provide values for a pre-configured PVC in 'volumes', below - ## - from: package - - ## @param source.package (default): Download the official release version defined in Chart.yaml - ## Note these settings ignored unless 'source.from:' is set to 'package' - ## example: - ## source.from: package - ## source.package.location: "https://github.com/NCEAS/metacatui/archive" - ## source.package.version: "2.26.0" - ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip - ## - package: - ## @param source.package.location The remote location where the release zipfile is hosted - ## - location: "https://github.com/NCEAS/metacatui/archive" - - ## source.package.version override the release version defined in Chart.yaml - ## Assumes release is a zipfile named .zip - ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! - # version: "2.29.1" - - ## @param source.git clone a specific branch or tag from the metacatui git repository, and install - ## the files in local pod storage (emptyDir{}) - ## Note these settings ignored unless 'source.from:' is set to 'git' - ## - git: - ## @param source.git.repoUrl the https url of the repo to be cloned - repoUrl: "https://github.com/NCEAS/metacatui.git" - - ## @param source.git.revision Any string that makes sense after the command `git checkout`... - ## - for example: - ## revision: "tags/2.29.0" => git checkout tags/2.29.0 - ## revision: "develop" => git checkout develop - ## - revision: "develop" +#source: +# ## @param source.from Options are "package" (the default), "git", or "pvc" +# ## * "package" will download a release package from the metacatui git repository, unzip it, and +# ## install the files in local pod storage (emptyDir{}) +# ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the +# ## files in local pod storage (emptyDir{}) +# ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will +# ## need to provide values for a pre-configured PVC in 'volumes', below +# ## +# from: package +# +# ## @param source.package (default): Download the official release version defined in Chart.yaml +# ## Note these settings ignored unless 'source.from:' is set to 'package' +# ## example: +# ## source.from: package +# ## source.package.location: "https://github.com/NCEAS/metacatui/archive" +# ## source.package.version: "2.26.0" +# ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip +# ## +# package: +# ## @param source.package.location The remote location where the release zipfile is hosted +# ## +# location: "https://github.com/NCEAS/metacatui/archive" +# +# ## source.package.version override the release version defined in Chart.yaml +# ## Assumes release is a zipfile named .zip +# ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! +# # version: "2.29.1" +# +# ## @param source.git clone a specific branch or tag from the metacatui git repository, and install +# ## the files in local pod storage (emptyDir{}) +# ## Note these settings ignored unless 'source.from:' is set to 'git' +# ## +# git: +# ## @param source.git.repoUrl the https url of the repo to be cloned +# repoUrl: "https://github.com/NCEAS/metacatui.git" +# +# ## @param source.git.revision Any string that makes sense after the command `git checkout`... +# ## - for example: +# ## revision: "tags/2.29.0" => git checkout tags/2.29.0 +# ## revision: "develop" => git checkout develop +# ## +# revision: "develop" ## volumes: Uncomment and provide values if you want to use a pre-configured PVC instead of doing a ## git checkout From 93fc1423ef816b411192b7469f16f15f7c00d18d Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 16:15:55 -0700 Subject: [PATCH 031/169] rename for clarity --- helm/admin/{metacatui-pv.yaml => metacatui-sourcecode-pv.yaml} | 0 helm/admin/{metacatui-pvc.yaml => metacatui-sourcecode-pvc.yaml} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename helm/admin/{metacatui-pv.yaml => metacatui-sourcecode-pv.yaml} (100%) rename helm/admin/{metacatui-pvc.yaml => metacatui-sourcecode-pvc.yaml} (100%) diff --git a/helm/admin/metacatui-pv.yaml b/helm/admin/metacatui-sourcecode-pv.yaml similarity index 100% rename from helm/admin/metacatui-pv.yaml rename to helm/admin/metacatui-sourcecode-pv.yaml diff --git a/helm/admin/metacatui-pvc.yaml b/helm/admin/metacatui-sourcecode-pvc.yaml similarity index 100% rename from helm/admin/metacatui-pvc.yaml rename to helm/admin/metacatui-sourcecode-pvc.yaml From da202304dc7d9403edb59f0e35e5b792bb81e4f5 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 18:55:27 -0700 Subject: [PATCH 032/169] enable pvc for custom theme --- helm/README.md | 111 +++++++++++++++++------ helm/config/config.js | 4 +- helm/templates/deployment.yaml | 36 +++++--- helm/values.yaml | 160 +++++++++++++++++++++------------ 4 files changed, 215 insertions(+), 96 deletions(-) diff --git a/helm/README.md b/helm/README.md index 3c3fb2df0..4c7aa125c 100644 --- a/helm/README.md +++ b/helm/README.md @@ -1,43 +1,102 @@ # MetacatUI Helm chart -This is a simple helm chart for debugging a MetacatUI deployment. +This is a helm chart for deploying MetacatUI. -## Steps to get started for deployment in a Kubernetes cluster: +--- +## Deployment in a Kubernetes cluster: -1. modify values.yaml as appropriate +1. Modify values.yaml as appropriate 2. install the helm chart: + ```shell + $ helm -n knb upgrade --install knbmcui ./helm + ``` -```shell -$ helm -n knb upgrade --install knbmcui ./helm -``` -There's no need to set up any persistent storage - the chart will automatically check out the -metacatui static content from GitHub, and install it on an "emptyDir" that is automatically -created for you. +There's no need to set up any persistent storage, unless you wish to add your own theme. The chart +ships with [a few pre-defined themes](https://github.com/NCEAS/metacatui/tree/main/src/js/themes), +which can be selected in values.yaml. +--- +## MetacatUI Configuration Files ('config.js') -## Steps to get started for development on localhost (e.g. Rancher Desktop/Docker Desktop): +The k8s version of Metacatui requires two 'config.js' configuration files: +1. the "root config" at the path `{root}/config/config.js`, and +2. the "theme config" in the theme directory itself (for example, see the knb `config.js` at: + https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) -0. Create a namespace `mcui` for the deployment (or pick another of your liking) -1. Create a PV that is mapped to a local `hostPath` directory that contains the web files to deploy -2. Create a PVC for the PV -3. Create a nginx deployment behind an ingress that mounts the PVC where nginx expects its web files to live +The "root config" file must, at an absolute minimum, contain the name of the theme to be used; e.g: +```javascript + MetacatUI.AppConfig = { + theme: "knb" + }; +``` +...and metacatui will then load that theme and the corresponding "theme config". -To deploy this, you need to 1) create the PV and PVC for your system layout, 2) modify the values.yaml to your hostname for the Ingress definition, and 3) install the helm chart: +If any additional settings are defined in the "root config", Metacatui will use them to override +corresponding settings in the "theme config". +By default, this chart creates a simple "root config", which will contain any values of the form: +`key: stringValue,` or `key: intValue,` that are provided in the `appConfig:` section of +[values.yaml](./values.yaml). + +If you need to provide more-complex overrides, set `appConfig.enabled: false`, and manually +create your own configMap named `-metacatui-config-js`, containing your custom +config.js: ```shell -$ helm -n mcui upgrade --install --debug mcui ./helm -Release "mcui" has been upgraded. Happy Helming! -NAME: mcui -LAST DEPLOYED: Wed Apr 17 19:45:58 2024 -NAMESPACE: mcui -STATUS: deployed -REVISION: 11 -NOTES: -1. Get the application URL by running these commands: - http://firn.local/ +kubectl create configmap -metacatui-config-js \ + --from-file=config.js= ``` +--- + +## Using a Custom Theme + +See [the MetacatUI +documentation](https://nceas.github.io/metacatui/install/configuration/index.html) for help with +creating custom themes. + +If you wish to deploy MetacatUI with your own custom theme, instead of using one of the themes that +are bundled with metacatui, you will need to provide the files for that theme (including its +"theme config" file) on shared filesystem, accessed via a manually-created Persistent Volume (PV) +mount and a Persistent Volume Claim (PVC). Example files for creating PVs and PVCs are provided +in the [admin](./admin) directory. + +Once you've got the chart deployed (see above), next steps are: +1. Copy your theme files to a directory on a filesystem that is accessible from your Kubernetes + cluster +2. Create a Persistent Volume (PV) pointing to the correct directory on the filesystem +3. Create a PVC for the PV, and edit the `customTheme:` section in values.yaml +4. upgrade the helm chart + ```shell + $ helm -n knb upgrade --install knbmcui ./helm + ``` + +--- + +## Development on Localhost +(e.g. Rancher Desktop/Docker Desktop) + +1. Create a namespace for the deployment (e.g. `mcui`) +2. Create a PV that is mapped to a local `hostPath` directory containing the source code +3. Create a PVC for the PV +4. Modify values.yaml: + 1. Add the name of the PVC, so MetacatUI can find the files + 2. Set your hostname for the Ingress definition +5. install the helm chart: + ```shell + $ helm -n mcui upgrade --install --debug mcui ./helm + Release "mcui" has been upgraded. Happy Helming! + NAME: mcui + LAST DEPLOYED: Wed Apr 17 19:45:58 2024 + NAMESPACE: mcui + STATUS: deployed + REVISION: 11 + ...etc + ``` + +You can now edit the MetacatUI source files, and changes will be immediately visible in your k8s +deployment. -You can now edit the MetacatUI files and changes will be immediately visible in your chart. You will likely need to edit the `config.js` file to get a minimal setup working. For example, I used the `config/config.js` with these contents: +You will likely need to edit the `config.js` file to get a minimal setup working. Example contents +for `config/config.js`: ```javascript MetacatUI.AppConfig = { diff --git a/helm/config/config.js b/helm/config/config.js index a3f86477c..dc5e7db48 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -1,5 +1,5 @@ MetacatUI.AppConfig = { - {{- $ignoreList := list "enabled" "root" "baseUrl" "metacatContext" "d1CNBaseUrl" -}} + {{- $ignoreList := list "enabled" "theme" "root" "baseUrl" "metacatContext" "d1CNBaseUrl" -}} {{- range $key, $value := .Values.appConfig }} {{- if not (has $key $ignoreList) }} {{- if eq (typeOf $value) "string" }} @@ -10,7 +10,7 @@ MetacatUI.AppConfig = { {{- end }} {{- end -}} {{- include "metacatui.cn.url" . | nindent 4 }} - theme: {{ required "theme_is_REQUIRED" .Values.appConfig.theme | quote }}, + theme: {{ required "metacatUiThemeName_is_REQUIRED" .Values.global.metacatUiThemeName | quote }}, root: {{ required "root_is_REQUIRED" .Values.appConfig.root | quote }}, metacatContext: {{ required "metacatAppContext_is_REQUIRED" .Values.global.metacatAppContext | quote }}, baseUrl: {{ required "metacatExternalBaseUrl_is_REQUIRED" .Values.global.metacatExternalBaseUrl | quote }} diff --git a/helm/templates/deployment.yaml b/helm/templates/deployment.yaml index d1ce2edd0..69b4e0a2f 100644 --- a/helm/templates/deployment.yaml +++ b/helm/templates/deployment.yaml @@ -99,7 +99,7 @@ spec: {{- end }} {{- else }} httpGet: - path: {{ .Values.appConfig.root }} + path: {{ .Values.global.metacatUiWebRoot }} port: http {{- end }} {{- end }} @@ -111,34 +111,48 @@ spec: {{- end }} {{- else }} httpGet: - path: {{ .Values.appConfig.root }} + path: {{ .Values.global.metacatUiWebRoot }} port: http {{- end }} {{- end }} resources: {{- toYaml .Values.resources | nindent 12 }} volumeMounts: + {{- with .Values.volumeMounts }} + {{- toYaml . | nindent 12 }} + {{- end }} - name: {{ .Release.Name }}-mcui-source-files mountPath: /usr/share/nginx/html + {{- if .Values.customTheme.enabled }} + - name: {{ .Release.Name }}-mcui-custom-theme-files + mountPath: {{ include "metacatui.root.mountpath" . }}/js/themes/{{ .Values.global.metacatUiThemeName }} + {{- if .Values.customTheme.subPath }} + subPath: {{ .Values.customTheme.subPath }} + {{- end }} + {{- end }} - name: {{ .Release.Name }}-mcui-config-js mountPath: {{ include "metacatui.root.mountpath" . }}/config/config.js subPath: config.js - {{- with .Values.volumeMounts }} - {{- toYaml . | nindent 12 }} - {{- end }} volumes: - name: {{ .Release.Name }}-mcui-config-js configMap: name: {{ .Release.Name }}-metacatui-config-js defaultMode: 0644 - {{- if ne $source "pvc" }} - name: {{ .Release.Name }}-mcui-source-files + {{- if eq $source "pvc" }} + persistentVolumeClaim: + claimName: {{ required "claimName_REQUIRED" .Values.source.pvc.sourceCodeClaimName }} + {{- else }} emptyDir: {} - {{- else }} - {{- with .Values.volumes }} - {{- toYaml . | nindent 8 }} - {{- end }} - {{- end }} + {{- end }} + {{- if .Values.customTheme.enabled }} + - name: {{ .Release.Name }}-mcui-custom-theme-files + persistentVolumeClaim: + claimName: {{ required "claimName_REQUIRED" .Values.customTheme.claimName }} + {{- end }} + {{- with .Values.volumes }} + {{- toYaml . | nindent 8 }} + {{- end }} {{- with .Values.nodeSelector }} nodeSelector: {{- toYaml . | nindent 8 }} diff --git a/helm/values.yaml b/helm/values.yaml index 4feb57d13..f158a365a 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -6,6 +6,15 @@ ## global: + ## @param global.metacatUiThemeName The theme name to use. Required, even if overriding config.js + ## + metacatUiThemeName: "knb" + + ## @param global.metacatUiWebRoot The url root to be appended after the metacatui baseUrl. + ## Starts with "/". Required, even if overriding config.js + ## + metacatUiWebRoot: "/" + ## @param global.metacatExternalBaseUrl metacat base url, accessible from outside the cluster. ## Include protocol and trailing slash, but not the context; e.g.: "https://test.arcticdata.io/" ## @@ -64,6 +73,8 @@ global: ## ## * * * IMPORTANT NOTE: * * * DO NOT SET THE FOLLOWING VALUES IN THIS SECTION! * * * ## They will be ignored here, because they are populated from the "global" section, above: +## * theme: uses '.Values.global.metacatUiThemeName' +## * root: uses '.Values.global.metacatUiWebRoot' ## * baseUrl: uses '.Values.global.metacatExternalBaseUrl' ## * d1CNBaseUrl: uses base URL portion of '.Values.global.d1ClientCnUrl' ## * metacatContext: uses '.Values.global.metacatAppContext' @@ -74,15 +85,49 @@ appConfig: ## create your own configMap named 'YourReleaseName-metacatui-config-js', containing your custom ## config.js. ## + ## IMPORTANT: global.metacatUiThemeName MUST be set to your theme name, even if you are disabling + ## appConfig and providing a custom config.js in a configMap. + ## enabled: true - ## @param appConfig.root The url root to be appended after the metacatui baseUrl. Starts with "/" +## @param themeFilesClaimName Provide source files for a custom Theme (also see 'appConfig.theme'). +## NOTE that global.metacatUiThemeName MUST match the theme of your custom theme +## +customTheme: + ## @param customTheme.enabled Provide custom Theme files on a pre-configured PVC ## - root: "/" + enabled: true - ## @param appConfig.theme Corresponds to the name of a directory in src/js/themes/. + ## @param customTheme.themeClaimName substitute your own PVC name ## - theme: "knb" + claimName: "Your-Pre-Configured-pvc-name" + + ## @param customTheme.subPath path to theme directory, within mounted filesystem + ## For example, if you cloned https://github.com/NCEAS/metacatui-themes to the root of your + ## shared drive, it would look like this: + ## + ## /metacatui-themes + ## └── src + ## ├── cerp + ## │ └── js + ## │ └── themes + ## │ └── cerp + ## │ ├── config.js + ## │ ├── css + ## │ ├── ...etc + ## ├── drp + ## │ └── js + ## │ └── themes + ## │ └── drp + ## │ ├── config.js + ## │ ├── css + ## ...etc ├── ...etc + ## + ## ...so to use the drp theme, you would set the subPath to: + ## subPath: "metacatui-themes/src/drp/js/themes/drp" + ## + subPath: "" + ## @param livenessProbeEnabled Enable livenessProbe. Autoconfigured using .Values.appConfig.root ## To override autoconfig, keep 'livenessProbeEnabled: true', and define a livenessProbe; e.g: @@ -131,59 +176,60 @@ ingress: ## needed here, unless you wish to deviate from the official metacatui release version defined in ## the helm chart (see Chart.yaml) ## -#source: -# ## @param source.from Options are "package" (the default), "git", or "pvc" -# ## * "package" will download a release package from the metacatui git repository, unzip it, and -# ## install the files in local pod storage (emptyDir{}) -# ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the -# ## files in local pod storage (emptyDir{}) -# ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will -# ## need to provide values for a pre-configured PVC in 'volumes', below -# ## -# from: package -# -# ## @param source.package (default): Download the official release version defined in Chart.yaml -# ## Note these settings ignored unless 'source.from:' is set to 'package' -# ## example: -# ## source.from: package -# ## source.package.location: "https://github.com/NCEAS/metacatui/archive" -# ## source.package.version: "2.26.0" -# ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip -# ## -# package: -# ## @param source.package.location The remote location where the release zipfile is hosted -# ## -# location: "https://github.com/NCEAS/metacatui/archive" -# -# ## source.package.version override the release version defined in Chart.yaml -# ## Assumes release is a zipfile named .zip -# ## LEAVE COMMENTED UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! -# # version: "2.29.1" -# -# ## @param source.git clone a specific branch or tag from the metacatui git repository, and install -# ## the files in local pod storage (emptyDir{}) -# ## Note these settings ignored unless 'source.from:' is set to 'git' -# ## -# git: -# ## @param source.git.repoUrl the https url of the repo to be cloned -# repoUrl: "https://github.com/NCEAS/metacatui.git" -# -# ## @param source.git.revision Any string that makes sense after the command `git checkout`... -# ## - for example: -# ## revision: "tags/2.29.0" => git checkout tags/2.29.0 -# ## revision: "develop" => git checkout develop -# ## -# revision: "develop" - -## volumes: Uncomment and provide values if you want to use a pre-configured PVC instead of doing a -## git checkout -## Note these settings ignored unless 'source.from:' is set to 'pvc' -## -#volumes: -# ## volumes.name substitute your own release name, but do NOT change the '-mcui-source-files' part -# - name: -mcui-source-files -# persistentVolumeClaim: -# claimName: +source: + ## @param source.from Options are "package" (the default), "git", or "pvc" + ## * "package" will download a release package from the metacatui git repository, unzip it, and + ## install the files in local pod storage (emptyDir{}) + ## * "git" will clone a specific branch or tag from the metacatui git repository, and install the + ## files in local pod storage (emptyDir{}) + ## * "pvc" expects to find a pre-configured PVC containing the files to be used. Note you will + ## need to provide values for a pre-configured PVC in 'volumes', below + ## + from: package + + ## @param source.package (default): Download the official release version defined in Chart.yaml + ## example: + ## source.from: package + ## source.package.location: "https://github.com/NCEAS/metacatui/archive" + ## source.package.version: "2.26.0" + ## ...will download: https://github.com/NCEAS/metacatui/archive/2.26.0.zip + ## + ## Note these settings ignored unless 'source.from:' is set to 'package' + ## + package: + ## @param source.package.location The remote location where the release zipfile is hosted + ## + location: "https://github.com/NCEAS/metacatui/archive" + + ## source.package.version override the release version defined in Chart.yaml + ## Assumes release is a zipfile named .zip + ## LEAVE UNSET, UNLESS YOU NEED TO OVERRIDE THE CHART SETTING! + version: "" + + ## @param source.git clone a specific branch or tag from the metacatui git repository, and install + ## the files in local pod storage (emptyDir{}) + ## + ## Note these settings ignored unless 'source.from:' is set to 'git' + ## + git: + ## @param source.git.repoUrl the https url of the repo to be cloned + repoUrl: "https://github.com/NCEAS/metacatui.git" + + ## @param source.git.revision Any string that makes sense after the command `git checkout`... + ## - for example: + ## revision: "tags/2.29.0" => git checkout tags/2.29.0 + ## revision: "develop" => git checkout develop + ## + revision: "develop" + + ## @param source.pvc Provide custom source files on a pre-configured PVC (typ. for development) + ## + ## Note these settings ignored unless 'source.from:' is set to 'pvc' + ## + pvc: + ## @param volumes.name substitute your own PVC name + ## + sourceCodeClaimName: "Your-Pre-Configured-pvc-name" replicaCount: 1 From cb1f3e2c4a01c181c457a5ef6c539a9e1a462503 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Wed, 19 Jun 2024 19:00:31 -0700 Subject: [PATCH 033/169] example pv/pvc files --- helm/admin/metacatui-customtheme-pv.yaml | 30 +++++++++++++++++++++++ helm/admin/metacatui-customtheme-pvc.yaml | 20 +++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 helm/admin/metacatui-customtheme-pv.yaml create mode 100644 helm/admin/metacatui-customtheme-pvc.yaml diff --git a/helm/admin/metacatui-customtheme-pv.yaml b/helm/admin/metacatui-customtheme-pv.yaml new file mode 100644 index 000000000..77abf14d2 --- /dev/null +++ b/helm/admin/metacatui-customtheme-pv.yaml @@ -0,0 +1,30 @@ +## EXAMPLE file for manually creating a Persistent Volume to store a metacatui custom theme. +## Needed only if 'customTheme.enabled:' is set to 'true' in values.yaml. +## EDIT this file to replace "$RELEASENAME", "$YOUR-CLUSTER-ID" and the "rootPath" +apiVersion: v1 +kind: PersistentVolume +metadata: + # See https://github.com/DataONEorg/k8s-cluster/blob/main/storage/storage.md#dataone-volume-naming-conventions + # cephs-{release}-{function}-{instance}, where {release} usually = {namespace} + name: &pv-name cephfs-$RELEASENAME-metacatui-customtheme +spec: + accessModes: + - ReadOnlyMany + capacity: + storage: 100Mi + csi: + driver: cephfs.csi.ceph.com + nodeStageSecretRef: + # node stage secret name + name: csi-cephfs-$RELEASENAME-secret + # node stage secret namespace where above secret is created + namespace: ceph-csi-cephfs + volumeAttributes: + clusterID: $YOUR-CLUSTER-ID + fsName: cephfs + rootPath: /volumes/YOUR-subvol-group/YOUR-subvol/YOUR-ID/repos/YOUR_REPO/metacatui + staticVolume: "true" + volumeHandle: *pv-name + persistentVolumeReclaimPolicy: Retain + storageClassName: csi-cephfs-sc + volumeMode: Filesystem diff --git a/helm/admin/metacatui-customtheme-pvc.yaml b/helm/admin/metacatui-customtheme-pvc.yaml new file mode 100644 index 000000000..16c30ca4b --- /dev/null +++ b/helm/admin/metacatui-customtheme-pvc.yaml @@ -0,0 +1,20 @@ +## EXAMPLE file for manually creating a Persistent Volume Claim to access the PV containing a +## metacatui custom theme. +## Needed only if 'customTheme.enabled:' is set to 'true' in values.yaml. +## EDIT this file to replace "$RELEASENAME" and "$NAMESPACE" +## +apiVersion: v1 +kind: PersistentVolumeClaim +metadata: + name: $RELEASENAME-metacatui-customtheme + ## NOTE: namespace must match the deployment namespace + namespace: $NAMESPACE +spec: + accessModes: + - ReadWriteOnce + resources: + requests: + storage: 100Mi + storageClassName: csi-cephfs-sc + volumeMode: Filesystem + volumeName: cephfs-RELEASENAME-metacatui-customtheme From d46df5914d783e3b6e3e23d32a12eb0efd258319 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 11:56:32 -0700 Subject: [PATCH 034/169] update app version --- helm/Chart.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/helm/Chart.yaml b/helm/Chart.yaml index 7ead3d7aa..54f9fdf34 100644 --- a/helm/Chart.yaml +++ b/helm/Chart.yaml @@ -15,10 +15,10 @@ type: application # This is the chart version. This version number should be incremented each time you make changes # to the chart and its templates, including the app version. # Versions are expected to follow Semantic Versioning (https://semver.org/) -version: 0.5.0 +version: 0.6.0 # This is the version number of the application being deployed. This version number should be # incremented each time you make changes to the application. Versions are not expected to # follow Semantic Versioning. They should reflect the version the application is using. # It is recommended to use it with quotes. -appVersion: "2.29.1" +appVersion: "2.30.0" From 4049866cbaa297f4ec3f8c77a7dbf68306b61567 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 16:40:52 -0700 Subject: [PATCH 035/169] move root to global --- helm/config/config.js | 2 +- helm/templates/_helpers.tpl | 2 +- helm/values.yaml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/helm/config/config.js b/helm/config/config.js index dc5e7db48..fff3cae0d 100644 --- a/helm/config/config.js +++ b/helm/config/config.js @@ -11,7 +11,7 @@ MetacatUI.AppConfig = { {{- end -}} {{- include "metacatui.cn.url" . | nindent 4 }} theme: {{ required "metacatUiThemeName_is_REQUIRED" .Values.global.metacatUiThemeName | quote }}, - root: {{ required "root_is_REQUIRED" .Values.appConfig.root | quote }}, + root: {{ required "root_is_REQUIRED" .Values.global.metacatUiWebRoot | quote }}, metacatContext: {{ required "metacatAppContext_is_REQUIRED" .Values.global.metacatAppContext | quote }}, baseUrl: {{ required "metacatExternalBaseUrl_is_REQUIRED" .Values.global.metacatExternalBaseUrl | quote }} } diff --git a/helm/templates/_helpers.tpl b/helm/templates/_helpers.tpl index 09204bdf9..da142bcc9 100644 --- a/helm/templates/_helpers.tpl +++ b/helm/templates/_helpers.tpl @@ -83,7 +83,7 @@ d1CNBaseUrl: "{{ $baseCnURL }}", Remove trailing slash from root, if it exists */}} {{- define "metacatui.clean.root" -}} -{{- $cleanedRoot := regexReplaceAll "/$" .Values.appConfig.root "" -}} +{{- $cleanedRoot := regexReplaceAll "/$" .Values.global.metacatUiWebRoot "" -}} {{- $cleanedRoot }} {{- end }} diff --git a/helm/values.yaml b/helm/values.yaml index f158a365a..f57b90f90 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -96,7 +96,7 @@ appConfig: customTheme: ## @param customTheme.enabled Provide custom Theme files on a pre-configured PVC ## - enabled: true + enabled: false ## @param customTheme.themeClaimName substitute your own PVC name ## From b7f1b4fccbfde799df12b1e15237f8b6a3325f6f Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:20:23 -0700 Subject: [PATCH 036/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 4c7aa125c..3341133c4 100644 --- a/helm/README.md +++ b/helm/README.md @@ -60,6 +60,7 @@ mount and a Persistent Volume Claim (PVC). Example files for creating PVs and PV in the [admin](./admin) directory. Once you've got the chart deployed (see above), next steps are: + 1. Copy your theme files to a directory on a filesystem that is accessible from your Kubernetes cluster 2. Create a Persistent Volume (PV) pointing to the correct directory on the filesystem From 3d7a4e021dda9d882673203fe6a967da9ccd9365 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:21:03 -0700 Subject: [PATCH 037/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/helm/README.md b/helm/README.md index 3341133c4..1308796fe 100644 --- a/helm/README.md +++ b/helm/README.md @@ -66,9 +66,8 @@ Once you've got the chart deployed (see above), next steps are: 2. Create a Persistent Volume (PV) pointing to the correct directory on the filesystem 3. Create a PVC for the PV, and edit the `customTheme:` section in values.yaml 4. upgrade the helm chart - ```shell - $ helm -n knb upgrade --install knbmcui ./helm - ``` + ```shell + $ helm -n knb upgrade --install knbmcui ./helm --- From e26dcef253ba6f57af5aba0764ddc1ec316de1b8 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:21:36 -0700 Subject: [PATCH 038/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 1308796fe..c4766f66e 100644 --- a/helm/README.md +++ b/helm/README.md @@ -72,6 +72,7 @@ Once you've got the chart deployed (see above), next steps are: --- ## Development on Localhost + (e.g. Rancher Desktop/Docker Desktop) 1. Create a namespace for the deployment (e.g. `mcui`) From 9e9d3f78dc646bb97ec0c3ee50445c3d87607a7e Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:21:59 -0700 Subject: [PATCH 039/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index c4766f66e..44cba8faf 100644 --- a/helm/README.md +++ b/helm/README.md @@ -24,6 +24,7 @@ The k8s version of Metacatui requires two 'config.js' configuration files: https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) The "root config" file must, at an absolute minimum, contain the name of the theme to be used; e.g: + ```javascript MetacatUI.AppConfig = { theme: "knb" From 65183d0498d019e34d2069956bc9540115533168 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:22:15 -0700 Subject: [PATCH 040/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/helm/README.md b/helm/README.md index 44cba8faf..256a31d5e 100644 --- a/helm/README.md +++ b/helm/README.md @@ -83,16 +83,15 @@ Once you've got the chart deployed (see above), next steps are: 1. Add the name of the PVC, so MetacatUI can find the files 2. Set your hostname for the Ingress definition 5. install the helm chart: - ```shell - $ helm -n mcui upgrade --install --debug mcui ./helm - Release "mcui" has been upgraded. Happy Helming! - NAME: mcui - LAST DEPLOYED: Wed Apr 17 19:45:58 2024 - NAMESPACE: mcui - STATUS: deployed - REVISION: 11 - ...etc - ``` + ```shell + $ helm -n mcui upgrade --install --debug mcui ./helm + Release "mcui" has been upgraded. Happy Helming! + NAME: mcui + LAST DEPLOYED: Wed Apr 17 19:45:58 2024 + NAMESPACE: mcui + STATUS: deployed + REVISION: 11 + ...etc You can now edit the MetacatUI source files, and changes will be immediately visible in your k8s deployment. From 60c34780c9a373142762ffa2001cd445432b878b Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:22:38 -0700 Subject: [PATCH 041/169] Update helm/admin/metacatui-customtheme-pvc.yaml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/admin/metacatui-customtheme-pvc.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helm/admin/metacatui-customtheme-pvc.yaml b/helm/admin/metacatui-customtheme-pvc.yaml index 16c30ca4b..df6ea6303 100644 --- a/helm/admin/metacatui-customtheme-pvc.yaml +++ b/helm/admin/metacatui-customtheme-pvc.yaml @@ -6,7 +6,7 @@ apiVersion: v1 kind: PersistentVolumeClaim metadata: - name: $RELEASENAME-metacatui-customtheme + name: $RELEASENAME-metacatui-customtheme ## NOTE: namespace must match the deployment namespace namespace: $NAMESPACE spec: From 817a12eea8ed3b4913a57515292b4cb5b5dfae73 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:22:58 -0700 Subject: [PATCH 042/169] Update helm/values.yaml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/values.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/helm/values.yaml b/helm/values.yaml index f57b90f90..8d17f1c38 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -128,7 +128,6 @@ customTheme: ## subPath: "" - ## @param livenessProbeEnabled Enable livenessProbe. Autoconfigured using .Values.appConfig.root ## To override autoconfig, keep 'livenessProbeEnabled: true', and define a livenessProbe; e.g: ## livenessProbe: From 5e66f5fe07a9de2c6882235dd8b75719f517e74f Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:23:37 -0700 Subject: [PATCH 043/169] Update helm/admin/metacatui-customtheme-pvc.yaml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/admin/metacatui-customtheme-pvc.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helm/admin/metacatui-customtheme-pvc.yaml b/helm/admin/metacatui-customtheme-pvc.yaml index df6ea6303..67a3c6048 100644 --- a/helm/admin/metacatui-customtheme-pvc.yaml +++ b/helm/admin/metacatui-customtheme-pvc.yaml @@ -11,7 +11,7 @@ metadata: namespace: $NAMESPACE spec: accessModes: - - ReadWriteOnce + - ReadWriteOnce resources: requests: storage: 100Mi From c998b374d5512c71b917ec691004f88d3ca8b586 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:24:09 -0700 Subject: [PATCH 044/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/helm/README.md b/helm/README.md index 256a31d5e..1eb77d5c9 100644 --- a/helm/README.md +++ b/helm/README.md @@ -26,9 +26,9 @@ The k8s version of Metacatui requires two 'config.js' configuration files: The "root config" file must, at an absolute minimum, contain the name of the theme to be used; e.g: ```javascript - MetacatUI.AppConfig = { - theme: "knb" - }; +MetacatUI.AppConfig = { + theme: "knb", +}; ``` ...and metacatui will then load that theme and the corresponding "theme config". From 2b6f427975743228ed10e6004f5a04c33708315d Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:24:36 -0700 Subject: [PATCH 045/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 1eb77d5c9..eea2e6c9a 100644 --- a/helm/README.md +++ b/helm/README.md @@ -3,6 +3,7 @@ This is a helm chart for deploying MetacatUI. --- + ## Deployment in a Kubernetes cluster: 1. Modify values.yaml as appropriate From becc7dfbcb45408dab6cbeef9f592e789cab7617 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:25:31 -0700 Subject: [PATCH 046/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/helm/README.md b/helm/README.md index eea2e6c9a..36e0f645c 100644 --- a/helm/README.md +++ b/helm/README.md @@ -102,7 +102,7 @@ for `config/config.js`: ```javascript MetacatUI.AppConfig = { - root: "/", - baseUrl: "https://dev.nceas.ucsb.edu/knb/d1/mn" -} + root: "/", + baseUrl: "https://dev.nceas.ucsb.edu/knb/d1/mn", +}; ``` From bfaf760174df0475781a328a9d2a3549f2ac4362 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:26:08 -0700 Subject: [PATCH 047/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 36e0f645c..4afc112a3 100644 --- a/helm/README.md +++ b/helm/README.md @@ -31,6 +31,7 @@ MetacatUI.AppConfig = { theme: "knb", }; ``` + ...and metacatui will then load that theme and the corresponding "theme config". If any additional settings are defined in the "root config", Metacatui will use them to override From 9304885b0be9c261ff7fd84b507216c7f300fcd1 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:26:31 -0700 Subject: [PATCH 048/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/helm/README.md b/helm/README.md index 4afc112a3..b7dac3415 100644 --- a/helm/README.md +++ b/helm/README.md @@ -8,9 +8,8 @@ This is a helm chart for deploying MetacatUI. 1. Modify values.yaml as appropriate 2. install the helm chart: - ```shell - $ helm -n knb upgrade --install knbmcui ./helm - ``` + ```shell + $ helm -n knb upgrade --install knbmcui ./helm There's no need to set up any persistent storage, unless you wish to add your own theme. The chart ships with [a few pre-defined themes](https://github.com/NCEAS/metacatui/tree/main/src/js/themes), From 588f9a3578ed74ea109610b98708ae5923c41c15 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:26:56 -0700 Subject: [PATCH 049/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index b7dac3415..76e9f69b0 100644 --- a/helm/README.md +++ b/helm/README.md @@ -16,6 +16,7 @@ ships with [a few pre-defined themes](https://github.com/NCEAS/metacatui/tree/ma which can be selected in values.yaml. --- + ## MetacatUI Configuration Files ('config.js') The k8s version of Metacatui requires two 'config.js' configuration files: From 991c99938d8565ca2bf16064815eb2d382467824 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:27:22 -0700 Subject: [PATCH 050/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helm/README.md b/helm/README.md index 76e9f69b0..8626fc595 100644 --- a/helm/README.md +++ b/helm/README.md @@ -22,7 +22,7 @@ which can be selected in values.yaml. The k8s version of Metacatui requires two 'config.js' configuration files: 1. the "root config" at the path `{root}/config/config.js`, and 2. the "theme config" in the theme directory itself (for example, see the knb `config.js` at: - https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) + https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) The "root config" file must, at an absolute minimum, contain the name of the theme to be used; e.g: From 1101da0c2d4dec539ee4b2a297e60d63549be893 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:27:56 -0700 Subject: [PATCH 051/169] Update helm/values.yaml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/values.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/helm/values.yaml b/helm/values.yaml index 8d17f1c38..eaaa4246a 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -34,7 +34,6 @@ global: ## d1ClientCnUrl: "https://cn.dataone.org/cn" - ## @section MetacatUI Configuration Files ('config.js') ## ## The k8s version of Metacatui requires two 'config.js' configuration files: From 5ea7d7605e88343c1883f54db68002455a225480 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:28:38 -0700 Subject: [PATCH 052/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 8626fc595..9385d903b 100644 --- a/helm/README.md +++ b/helm/README.md @@ -44,6 +44,7 @@ By default, this chart creates a simple "root config", which will contain any va If you need to provide more-complex overrides, set `appConfig.enabled: false`, and manually create your own configMap named `-metacatui-config-js`, containing your custom config.js: + ```shell kubectl create configmap -metacatui-config-js \ --from-file=config.js= From 2b95d2558f4ef11ff5ffa2c104e59b94e311e490 Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:29:08 -0700 Subject: [PATCH 053/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index 9385d903b..b3b1d3ec8 100644 --- a/helm/README.md +++ b/helm/README.md @@ -49,6 +49,7 @@ config.js: kubectl create configmap -metacatui-config-js \ --from-file=config.js= ``` + --- ## Using a Custom Theme From 44b7a9328e058550e5479c7bfd512042b3ef1a9e Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:29:51 -0700 Subject: [PATCH 054/169] Update helm/README.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- helm/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/helm/README.md b/helm/README.md index b3b1d3ec8..6fce58401 100644 --- a/helm/README.md +++ b/helm/README.md @@ -20,6 +20,7 @@ which can be selected in values.yaml. ## MetacatUI Configuration Files ('config.js') The k8s version of Metacatui requires two 'config.js' configuration files: + 1. the "root config" at the path `{root}/config/config.js`, and 2. the "theme config" in the theme directory itself (for example, see the knb `config.js` at: https://github.com/NCEAS/metacatui/blob/main/src/js/themes/knb/config.js) From 0d6ea3b96584b9970a75b8ba51c3fddaa7b5c38a Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:35:21 -0700 Subject: [PATCH 055/169] linting errors --- helm/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/helm/README.md b/helm/README.md index 6fce58401..a1d3443b5 100644 --- a/helm/README.md +++ b/helm/README.md @@ -8,8 +8,10 @@ This is a helm chart for deploying MetacatUI. 1. Modify values.yaml as appropriate 2. install the helm chart: + ```shell $ helm -n knb upgrade --install knbmcui ./helm + ``` There's no need to set up any persistent storage, unless you wish to add your own theme. The chart ships with [a few pre-defined themes](https://github.com/NCEAS/metacatui/tree/main/src/js/themes), @@ -72,8 +74,10 @@ Once you've got the chart deployed (see above), next steps are: 2. Create a Persistent Volume (PV) pointing to the correct directory on the filesystem 3. Create a PVC for the PV, and edit the `customTheme:` section in values.yaml 4. upgrade the helm chart + ```shell $ helm -n knb upgrade --install knbmcui ./helm + ``` --- @@ -88,6 +92,7 @@ Once you've got the chart deployed (see above), next steps are: 1. Add the name of the PVC, so MetacatUI can find the files 2. Set your hostname for the Ingress definition 5. install the helm chart: + ```shell $ helm -n mcui upgrade --install --debug mcui ./helm Release "mcui" has been upgraded. Happy Helming! @@ -97,7 +102,8 @@ Once you've got the chart deployed (see above), next steps are: STATUS: deployed REVISION: 11 ...etc - + ``` + You can now edit the MetacatUI source files, and changes will be immediately visible in your k8s deployment. From 7beedf334208412695f312849fa3ec4bb4b03830 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 2 Jul 2024 16:07:00 -0400 Subject: [PATCH 056/169] Syntax fix to commit d49b1471b01 --- eslint.config.mjs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index a02156544..8d6f81b4b 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -32,12 +32,10 @@ const airbnbRulesOverrides = { // We are using RequireJS "import/no-unresolved": "off", // Allow unused variables if they start with an underscore - "variables/no-unused-vars": [ + "no-unused-vars": [ "error", { - vars: "all", - args: "after-used", - ignoreRestSiblings: true, + argsIgnorePattern: "^_", varsIgnorePattern: "^_", }, ], From eff556bc30a0061303334745b12c51d14d6a4480 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 2 Jul 2024 15:20:21 -0400 Subject: [PATCH 057/169] Fix linting errors in QueryFields collection Issue #2253 --- src/js/collections/queryFields/QueryFields.js | 149 +++++++----------- 1 file changed, 58 insertions(+), 91 deletions(-) diff --git a/src/js/collections/queryFields/QueryFields.js b/src/js/collections/queryFields/QueryFields.js index e1746692d..3efc6dfe8 100644 --- a/src/js/collections/queryFields/QueryFields.js +++ b/src/js/collections/queryFields/QueryFields.js @@ -1,10 +1,9 @@ -define([ - "jquery", - "underscore", - "backbone", - "x2js", - "models/queryFields/QueryField", -], function ($, _, Backbone, X2JS, QueryField) { +define(["underscore", "backbone", "x2js", "models/queryFields/QueryField"], ( + _, + Backbone, + X2JS, + QueryField, +) => { "use strict"; /** @@ -16,11 +15,11 @@ define([ * https://dataone-architecture-documentation.readthedocs.io/en/latest/design/SearchMetadata.html * @classcategory Collections/QueryFields * @name QueryFields - * @extends Backbone.Collection + * @augments Backbone.Collection * @since 2.14.0 - * @constructor + * @class */ - var QueryFields = Backbone.Collection.extend( + const QueryFields = Backbone.Collection.extend( /** @lends QueryFields.prototype */ { /** @@ -28,52 +27,31 @@ define([ */ model: QueryField, - /** - * initialize - Creates a new QueryFields collection - */ - initialize: function (models, options) { - try { - if (typeof options === "undefined") { - var options = {}; - } - } catch (e) { - console.log( - "Failed to initialize a Query Fields collection, error message: " + - e, - ); - } - }, - /** * comparator - A sortBy function that returns the order of each Query * Filter model based on its position in the categoriesMap object. - * * @param {QueryFilter} model The individual Query Filter model - * @return {number} A numeric value by which the model should be ordered relative to others. + * @returns {number} A numeric value by which the model should be ordered relative to others. */ - comparator: function (model) { + comparator(model) { try { - var categoriesMap = model.categoriesMap(); - var order = _(categoriesMap) + const categoriesMap = model.categoriesMap(); + const order = _(categoriesMap) .chain() .pluck("queryFields") .flatten() .value(); return order.indexOf(model.get("name")); - } catch (e) { - console.log( - "Failed to sort the Query Fields Collection, error message: " + e, - ); + } catch { return 0; } }, /** * The constructed URL of the collection - * * @returns {string} - The URL to use during fetch */ - url: function () { + url() { try { return MetacatUI.appModel.get("queryServiceUrl").replace(/\/\?$/, ""); } catch (e) { @@ -83,39 +61,31 @@ define([ /** * Retrieve the fields from the Coordinating Node - * @extends Backbone.Collection#fetch + * @param {object} options Options to pass to the fetch method + * @augments Backbone.Collection#fetch + * @returns {Array} The array of Query Field attributes to be added to the collection. */ - fetch: function (options) { - try { - var fetchOptions = _.extend({ dataType: "text" }, options); - return Backbone.Model.prototype.fetch.call(this, fetchOptions); - } catch (e) { - console.log("Failed to fetch Query Fields, error message: " + e); - } + fetch(options) { + const fetchOptions = _.extend({ dataType: "text" }, options); + return Backbone.Model.prototype.fetch.call(this, fetchOptions); }, /** * parse - Parse the XML response from the CN - * * @param {string} response The queryEngineDescription XML as a string - * @return {Array} the Array of Query Field attributes to be added to the collection. + * @returns {Array} the Array of Query Field attributes to be added to the collection. */ - parse: function (response) { - try { - // If the collection is already parsed, just return it - if (typeof response === "object") { - return response; - } - var x2js = new X2JS(); - var responseJSON = x2js.xml_str2json(response); - if (responseJSON && responseJSON.queryEngineDescription) { - return responseJSON.queryEngineDescription.queryField; - } - } catch (e) { - console.log( - "Failed to parse Query Fields response, error message: " + e, - ); + parse(response) { + // If the collection is already parsed, just return it + if (typeof response === "object") { + return response; + } + const x2js = new X2JS(); + const responseJSON = x2js.xml_str2json(response); + if (responseJSON && responseJSON.queryEngineDescription) { + return responseJSON.queryEngineDescription.queryField; } + return []; }, /** @@ -124,44 +94,41 @@ define([ * type text, use a regular filter model. If the fields are tdate, use a * dateFilter. If the field types are mixed, then returns the filterType default * value in QueryField models. - * * @param {string[]} fields The list of Query Field names - * @return {string} The nodeName of the filter model to use (one of the four types + * @returns {string} The nodeName of the filter model to use (one of the four types * of fields that are set in {@link QueryField#filterTypesMap}) */ - getRequiredFilterType: function (fields) { - try { - var types = [], - // When fields is empty or are different types - defaultFilterType = - MetacatUI.queryFields.models[0].defaults().filterType; + getRequiredFilterType(fields) { + const defaultFilterType = + MetacatUI.queryFields.models[0].defaults().filterType; - if (!fields || fields.length === 0 || fields[0] === "") { - return defaultFilterType; - } + const types = []; + // When fields is empty or are different types - fields.forEach((newField, i) => { - var fieldModel = MetacatUI.queryFields.findWhere({ - name: newField, - }); - types.push(fieldModel.get("filterType")); - }); - - // Test of all the fields are of the same type - var allEqual = types.every((val, i, arr) => val === arr[0]); + if (!fields || fields.length === 0 || fields[0] === "") { + return defaultFilterType; + } - if (allEqual) { - return types[0]; + fields.forEach((newField) => { + const fieldModel = MetacatUI.queryFields.findWhere({ + name: newField, + }); + const newType = fieldModel?.get("filterType"); + if (newType) { + types.push(newType); } else { - return defaultFilterType; + // TODO: + // console.log("ERROR! No filter type found for field", newField); } - } catch (e) { - console.log( - "Failed to detect the required filter type in a Query Fields" + - " Collection, error message: " + - e, - ); + }); + + // Test of all the fields are of the same type + const allEqual = types.every((val, i, arr) => val === arr[0]); + + if (allEqual) { + return types[0]; } + return defaultFilterType; }, }, ); From e90a552584500b0a6005bd700f50c7559d0e2af9 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 2 Jul 2024 16:09:48 -0400 Subject: [PATCH 058/169] Fix linting errors in QueryRuleView Issue #2253 --- src/js/views/queryBuilder/QueryRuleView.js | 1735 ++++++++------------ 1 file changed, 729 insertions(+), 1006 deletions(-) diff --git a/src/js/views/queryBuilder/QueryRuleView.js b/src/js/views/queryBuilder/QueryRuleView.js index f56243d4c..249c19af7 100644 --- a/src/js/views/queryBuilder/QueryRuleView.js +++ b/src/js/views/queryBuilder/QueryRuleView.js @@ -10,11 +10,7 @@ define([ "views/filters/DateFilterView", "views/searchSelect/ObjectFormatSelectView", "views/searchSelect/AnnotationFilterView", - "models/filters/Filter", - "models/filters/BooleanFilter", - "models/filters/NumericFilter", - "models/filters/DateFilter", -], function ( +], ( $, _, Backbone, @@ -26,22 +22,18 @@ define([ DateFilterView, ObjectFormatSelect, AnnotationFilter, - Filter, - BooleanFilter, - NumericFilter, - DateFilter, -) { +) => /** * @class QueryRuleView * @classdesc A view that provides an UI for a user to construct a single filter that * is part of a complex query * @classcategory Views/QueryBuilder * @screenshot views/QueryRuleView.png - * @extends Backbone.View - * @constructor + * @augments Backbone.View + * @class * @since 2.14.0 */ - return Backbone.View.extend( + Backbone.View.extend( /** @lends QueryRuleView.prototype */ { /** @@ -146,14 +138,14 @@ define([ /** * A function that creates and returns the Backbone events object. - * @return {Object} Returns a Backbone events object + * @returns {object} Returns a Backbone events object */ - events: function () { - var events = {}; - var removeID = "#" + this.removeRuleID + this.cid; - events["click " + removeID] = "removeSelf"; - events["mouseover " + removeID] = "previewRemove"; - events["mouseout " + removeID] = "previewRemove"; + events() { + const events = {}; + const removeID = `#${this.removeRuleID}${this.cid}`; + events[`click ${removeID}`] = "removeSelf"; + events[`mouseover ${removeID}`] = "previewRemove"; + events[`mouseout ${removeID}`] = "previewRemove"; return events; }, @@ -163,9 +155,7 @@ define([ * abstracted fields which are a combination of multiple query fields, or to add a * duplicate field that has a different label. These special fields are passed on * to {@link QueryFieldSelectView#addFields}. - * * @type {SpecialField[]} - * * @since 2.15.0 */ specialFields: [ @@ -198,8 +188,7 @@ define([ * when a user selects a new operator. Operators can set the exclude and * matchSubstring properties of the model, and sometimes the values as well. * Either the types property OR the fields property must be set, not both. - * - * @typedef {Object} OperatorOption + * @typedef {object} OperatorOption * @property {string} label - The label to display to the user * @property {string} icon - An icon that represents the operator * @property {boolean} matchSubstring - Whether the matchSubstring attribute is @@ -225,7 +214,6 @@ define([ /** * The list of operators that will be available in the dropdown list that connects * the query fields to the values. Each operator must be unique. - * * @type {OperatorOption[]} */ operatorOptions: [ @@ -390,8 +378,7 @@ define([ * different solr query fields, and so we display different interfaces depending * on the type and category of the selected query fields. A Value Input Option * object defines a of interface to show for a given type and category. - * - * @typedef {Object} ValueInputOption + * @typedef {object} ValueInputOption * @property {string[]} filterTypes - An array of one or more filter types that * are allowed for this interface. If none are provided then any filter type is * allowed. Filter types are one of the four keys defined in @@ -407,7 +394,7 @@ define([ * the special field, not the actual query fields that it represents. * @property {string} label - If the interface does not include a label (e.g. * number filter), include a string to display here. - * @property {function} uiFunction - A function that returns the UI view to use + * @property {Function} uiFunction - A function that returns the UI view to use * with all appropriate options set. The function will be called with this view as * the context. */ @@ -424,7 +411,7 @@ define([ // serviceCoupling field { queryFields: ["serviceCoupling"], - uiFunction: function () { + uiFunction() { return new SearchableSelect({ options: [ { @@ -456,7 +443,7 @@ define([ // Metadata format IDs { queryFields: ["formatId"], - uiFunction: function () { + uiFunction() { return new ObjectFormatSelect({ selected: this.model.get("values"), separatorText: this.model.get("operator"), @@ -466,7 +453,7 @@ define([ // Semantic annotation picker { queryFields: ["sem_annotation"], - uiFunction: function () { + uiFunction() { // A bioportalAPIKey is required for the Annotation Filter UI if (MetacatUI.appModel.get("bioportalAPIKey")) { return new AnnotationFilter({ @@ -476,9 +463,8 @@ define([ inputLabel: "Type a value", }); // If there's no API key, render the default UI (the last in this list) - } else { - return this.valueSelectUImap.slice(-1)[0].uiFunction.call(this); } + return this.valueSelectUImap.slice(-1)[0].uiFunction.call(this); }, }, // User/Organization account ID lookup @@ -490,7 +476,7 @@ define([ "rightsHolder", "submitter", ], - uiFunction: function () { + uiFunction() { return new AccountSelect({ selected: this.model.get("values"), separatorText: this.model.get("operator"), @@ -507,7 +493,7 @@ define([ "authoritativeMN", "datasource", ], - uiFunction: function () { + uiFunction() { return new NodeSelect({ selected: this.model.get("values"), separatorText: this.model.get("operator"), @@ -518,7 +504,7 @@ define([ { filterTypes: ["numericFilter"], label: "Choose a value", - uiFunction: function () { + uiFunction() { return new NumericFilterView({ model: this.model, showButton: false, @@ -530,7 +516,7 @@ define([ { filterTypes: ["dateFilter"], label: "Choose a year", - uiFunction: function () { + uiFunction() { return new DateFilterView({ model: this.model, separatorText: this.model.get("operator"), @@ -539,7 +525,7 @@ define([ }, // The last is the default value selection UI { - uiFunction: function () { + uiFunction() { return new SearchableSelect({ options: [], allowMulti: true, @@ -554,191 +540,153 @@ define([ /** * Creates a new QueryRuleView - * @param {Object} options - A literal object with options to pass to the view + * @param {object} options - A literal object with options to pass to the view */ - initialize: function (options) { - try { - // Get all the options and apply them to this view - if (typeof options == "object") { - var optionKeys = Object.keys(options); - _.each( - optionKeys, - function (key, i) { - this[key] = options[key]; - }, - this, - ); - } - - // If no model is provided in the options, we cannot render this view. A - // filter model cannot be created, because it must be part of a collection. - if (!this.model || !this.model.collection) { - console.error( - "error: A Filter model that's part of a Filters collection" + - " is required to initialize a Query Rule view.", - ); - return; - } + initialize(options) { + // Apply all the options to this view + if (typeof options === "object") { + Object.assign(this, options); + } - // The model may be removed during the save process if it's empty. Remove this - // Rule Group view when that happens. - this.stopListening(this.model, "remove"); - this.listenTo(this.model, "remove", function () { - this.removeSelf(); - }); - } catch (e) { - console.log( - "Failed to initialize a Query Builder View, error message:", - e, + // If no model is provided in the options, we cannot render this view. A + // filter model cannot be created, because it must be part of a collection. + if (!this.model || !this.model.collection) { + throw new Error( + "A Filter model that's part of a Filters collection is required to initialize a Query Rule view.", ); } + + // The model may be removed during the save process if it's empty. Remove this + // Rule Group view when that happens. + this.stopListening(this.model, "remove"); + this.listenTo(this.model, "remove", () => { + this.removeSelf(); + }); }, /** * render - Render the view - * - * @return {QueryRule} Returns the view + * @returns {QueryRule} Returns the view */ - render: function () { - try { - // Add the Rule number. - // TODO: Also add the number of datasets related to rule - this.addRuleInfo(); - this.stopListening(this.model.collection, "remove"); - this.listenTo(this.model.collection, "remove", this.updateRuleInfo); - // Nested rules should also listen for changes in Filters of their parent Rule - if (this.parentRule) { - this.stopListening(this.parentRule.model.collection, "remove"); - this.listenTo( - this.parentRule.model.collection, - "remove", - this.updateRuleInfo, - ); - } - - // The remove button is needed for both FilterGroups and other Filter models - this.addRemoveButton(); - - // Render nested filter group views as another Query Builder. - if (this.model.type == "FilterGroup") { - this.$el.addClass("rule-group"); - - // We must initialize a QueryBuilderView using the inline require syntax to - // avoid the problem of circular dependencies. QueryRuleView requires - // QueryBuilderView, and QueryBuilderView requires QueryRuleView. For more - // info, see https://requirejs.org/docs/api.html#circular - var QueryBuilderView = require("views/queryBuilder/QueryBuilderView"); - - // The default - nestedLevelsAllowed = 1; - // If we are adding a query builer, then it is a nested level. Subtract one - // from the total levels allowed. - if (typeof this.nestedLevelsAllowed == "number") { - nestedLevelsAllowed = this.nestedLevelsAllowed - 1; - } + render() { + // Add the Rule number. + // TODO: Also add the number of datasets related to rule + this.addRuleInfo(); + this.stopListening(this.model.collection, "remove"); + this.listenTo(this.model.collection, "remove", this.updateRuleInfo); + // Nested rules should also listen for changes in Filters of their parent Rule + if (this.parentRule) { + this.stopListening(this.parentRule.model.collection, "remove"); + this.listenTo( + this.parentRule.model.collection, + "remove", + this.updateRuleInfo, + ); + } - // If there is a special list of fields to exclude in nested Query Builders - // (i.e. in nested FilterGroup models), then pass this list on as the - // excludeFields list in the child QueryBuilder - var excludeFields = this.excludeFields; - if ( - this.nestedExcludeFields && - Array.isArray(this.nestedExcludeFields) - ) { - excludeFields = this.nestedExcludeFields; - } + // The remove button is needed for both FilterGroups and other Filter models + this.addRemoveButton(); + + // Render nested filter group views as another Query Builder. + if (this.model.type === "FilterGroup") { + this.$el.addClass("rule-group"); + + // We must initialize a QueryBuilderView using the inline require syntax to + // avoid the problem of circular dependencies. QueryRuleView requires + // QueryBuilderView, and QueryBuilderView requires QueryRuleView. For more + // info, see https://requirejs.org/docs/api.html#circular + const QueryBuilderView = require("views/queryBuilder/QueryBuilderView"); + + // The default + let nestedLevelsAllowed = 1; + // If we are adding a query builer, then it is a nested level. Subtract one + // from the total levels allowed. + if (typeof this.nestedLevelsAllowed === "number") { + nestedLevelsAllowed = this.nestedLevelsAllowed - 1; + } - // Insert QueryRuleView - var ruleGroup = new QueryBuilderView({ - filterGroup: this.model, - // Nested Query Rules have the same color as their parent rule - ruleColorPalette: "inherit", - excludeFields: excludeFields, - specialFields: this.specialFields, - parentRule: this, - nestedLevelsAllowed: nestedLevelsAllowed, - }); - this.el.append(ruleGroup.el); - ruleGroup.render(); - } else { - // For any other filter type... Add a metadata selector field whether the - // rule is new or has already been created - this.addFieldSelect(); - - // Operator field and value field Add an operator input only for already - // existing filters (For new filters, a metadata field needs to be selected - // first) - if (this.model.get("fields") && this.model.get("fields").length) { - this.addOperatorSelect(); - this.addValueSelect(); - } + // If there is a special list of fields to exclude in nested Query Builders + // (i.e. in nested FilterGroup models), then pass this list on as the + // excludeFields list in the child QueryBuilder + let { excludeFields } = this; + if ( + this.nestedExcludeFields && + Array.isArray(this.nestedExcludeFields) + ) { + excludeFields = this.nestedExcludeFields; } - return this; - } catch (e) { - console.error( - "Error rendering the query Rule View, error message: ", - e, - ); + // Insert QueryRuleView + const ruleGroup = new QueryBuilderView({ + filterGroup: this.model, + // Nested Query Rules have the same color as their parent rule + ruleColorPalette: "inherit", + excludeFields, + specialFields: this.specialFields, + parentRule: this, + nestedLevelsAllowed, + }); + this.el.append(ruleGroup.el); + ruleGroup.render(); + } else { + // For any other filter type... Add a metadata selector field whether the + // rule is new or has already been created + this.addFieldSelect(); + + // Operator field and value field Add an operator input only for already + // existing filters (For new filters, a metadata field needs to be selected + // first) + if (this.model.get("fields") && this.model.get("fields").length) { + this.addOperatorSelect(); + this.addValueSelect(); + } } + + return this; }, /** * Insert container for the color-coded rule numbering. */ - addRuleInfo: function () { - try { - this.$indexEl = $(document.createElement("span")); - this.$ruleInfoEl = $(document.createElement("div")).addClass( - this.ruleInfoClass, - ); - this.$ruleInfoEl.append(this.$indexEl); + addRuleInfo() { + this.$indexEl = $(document.createElement("span")); + this.$ruleInfoEl = $(document.createElement("div")).addClass( + this.ruleInfoClass, + ); + this.$ruleInfoEl.append(this.$indexEl); - this.$el.append(this.$ruleInfoEl); - this.updateRuleInfo(); - } catch (error) { - console.log( - "Error adding rule info container for a Query Rule, details: " + - error, - ); - } + this.$el.append(this.$ruleInfoEl); + this.updateRuleInfo(); }, /** - * Selects a color from the - * {@link QueryRuleView#ruleColorPalette rule colour palette array}, given an + * Selects a color from the {@link QueryRuleView#ruleColorPalette}, given an * index. If the index is greater than the length of the palette, then the palette * is effectively repeated until long enough (i.e. colours will be recycled). If * no index in provided, the first colour in the palette will be selected. - * - * @param {number} [index=0] - The position of the rule within the Filters + * @param {number} [index] - The position of the rule within the Filters * collection. - * @param {string} [defaultColor="#57b39c"] - A default colour to use in case + * @param {string} [defaultColor] - A default colour to use in case * there is problem with this function (hex color code beginning with '#'). - * @return {string} - Returns a hex color code string + * @returns {string} - Returns a hex color code string */ - getPaletteColor: function (index = 0, defaultColor = "#57b39c") { + getPaletteColor(index = 0, defaultColor = "#57b39c") { try { - // Allow the rule to inherit it's color from the parent rule within which it's + // Allow the rule to inherit its color from the parent rule within which it's // nested - if (this.ruleColorPalette == "inherit") { + if (this.ruleColorPalette === "inherit") { return null; } + if (!this.ruleColorPalette || !this.ruleColorPalette.length) { return defaultColor; } - var numCols = this.ruleColorPalette.length; - if (index + 1 > numCols) { - var n = Math.floor(index / numCols); - index = index - numCols * n; - } - return this.ruleColorPalette[index]; - } catch (error) { - console.log( - "Error getting a color for a Query Rule, using the default colour" + - " instead. Error details: " + - error, - ); + + const numCols = this.ruleColorPalette.length; + const adjustedIndex = index % numCols; + + return this.ruleColorPalette[adjustedIndex]; + } catch { return defaultColor; } }, @@ -749,74 +697,55 @@ define([ * the rule number, but may one day also display information such as the number of * results that there are for this individual rule. */ - updateRuleInfo: function () { - try { - // Rules are numbered in the order in which they appear in the Filters - // collection, excluding any invisible filter models. Rules nested in Rule - // Groups (within Filter Models) get numbered 3A, 3B, etc. - var letter = ""; - var index = ""; - // If this is a filter model nested in a filter group - if (this.parentRule) { - index = this.parentRule.ruleNumber; - var letterIndex = this.model.collection.visibleIndexOf(this.model); - if (typeof letterIndex === "number") { - letter = String.fromCharCode(94 + letterIndex + 3).toUpperCase(); - } - // For top-level filter models - } else { - index = this.model.collection.visibleIndexOf(this.model); + updateRuleInfo() { + // Rules are numbered in the order in which they appear in the Filters + // collection, excluding any invisible filter models. Rules nested in Rule + // Groups (within Filter Models) get numbered 3A, 3B, etc. + let letter = ""; + let index = ""; + // If this is a filter model nested in a filter group + if (this.parentRule) { + index = this.parentRule.ruleNumber; + const letterIndex = this.model.collection.visibleIndexOf(this.model); + if (typeof letterIndex === "number") { + letter = String.fromCharCode(94 + letterIndex + 3).toUpperCase(); } + // For top-level filter models + } else { + index = this.model.collection.visibleIndexOf(this.model); + } - if (typeof index == "number") { - index = index + 1; - } + if (typeof index === "number") { + index += 1; + } - var ruleNumber = index + letter; + const ruleNumber = index + letter; - // Set the rule number of the parent view to be accessed by any nested child - // rules - this.ruleNumber = ruleNumber; + // Set the rule number of the parent view to be accessed by any nested child + // rules + this.ruleNumber = ruleNumber; - // if(this.model.type == "FilterGroup") - if (ruleNumber && ruleNumber.length) { - this.$indexEl.text("Rule " + ruleNumber); - } else { - this.$indexEl.text(""); - return; - } - var color = this.getPaletteColor(index); - if (color) { - this.el.style.setProperty("--rule-color", color); - } - } catch (error) { - console.log( - "Error updating the rule numbering for a Query Rule. Details: " + - error, - ); + // if(this.model.type == "FilterGroup") + if (ruleNumber && ruleNumber.length) { + this.$indexEl.text(`Rule ${ruleNumber}`); + } else { + this.$indexEl.text(""); + return; + } + const color = this.getPaletteColor(index); + if (color) { + this.el.style.setProperty("--rule-color", color); } }, /** * addRemoveButton - Create and insert the button to remove the Query Rule */ - addRemoveButton: function () { - try { - var removeButton = $( - "", - ); - this.el.append(removeButton[0]); - } catch (e) { - console.error( - "Failed to create a remove button for a Query Rule, error details: " + - e, - ); - } + addRemoveButton() { + const removeButton = $( + ``, + ); + this.el.append(removeButton[0]); }, /** @@ -827,36 +756,34 @@ define([ * in the special field's "fields" property. If the special field has an array set * for "values", then the model's values must also exactly match the special * field's values. - * * @param {string[]} [fields] - Optionally set a list of query fields to search * with. If not set, then the fields that are set on the view's filter model are * used. * @returns {SpecialField|null} - The matching special field, or null if no match * was found. - * * @since 2.15.0 */ - getSpecialField: function (fields) { + getSpecialField(fields) { // Get information about the filter model (or used the fields passed to this // function) - var selectedFields = fields || this.model.get("fields"); - var selectedFields = _.clone(selectedFields); - var selectedValues = this.model.get("values"); + const originalSelectedFields = fields || this.model.get("fields"); + const selectedFields = _.clone(originalSelectedFields); + const selectedValues = this.model.get("values"); if (!this.specialFields || !Array.isArray(this.specialFields)) { return null; } - var matchingSpecialField = _.find( + const matchingSpecialField = _.find( this.specialFields, - function (specialField) { - var fieldsMatch = false, - mustMatchValues = false, - valuesMatch = false; + (specialField) => { + let fieldsMatch = false; + let mustMatchValues = false; + let valuesMatch = false; // If *all* the fields in the fields array are present in the list // of fields that the special field represents, then count this as a match. - var commonFields = _.intersection( + const commonFields = _.intersection( specialField.fields, selectedFields, ); @@ -882,73 +809,50 @@ define([ // If this model matches one of the special fields, render it differently return matchingSpecialField || null; }, - /** - * Takes a list of query field names, checks if the model matches any of the - * special fields, and if it does, returns the list of fields with the actual - * field names replaced with the - * {@link QueryRuleView#specialFields special field name}. This function is the - * opposite of {@link QueryRuleView#convertFromSpecialFields} - * @param {string[]} fields - The list of field names to convert - * @returns {string[]} - The converted list of field names. If there were no - * special fields detected, or if there's an error, then then the field names are - * returned unchanged. - * - * @param {string[]} fields - The list of fields to convert to special fields, if - * the model matches any of the special field objects - * @returns {string[]} - Returns the list of fields with actual query field names - * replaced with special field names, if any match - * - * @since 2.15.0 + * Converts a list of query field names to special field names based on matches + * from the special fields defined. If a field matches a special field's subfields, + * it is replaced by the special field name. + * @param {string[]} fields - The list of field names to convert + * @returns {string[]} - The converted list of field names. If no special fields are + * detected, then the field names are returned unchanged. */ - convertToSpecialFields: function (fields) { - try { - var fields = _.clone(fields); - - // Insert the special field name at the same position as the associated - // query fields that we will remove - var replaceWithSpecialField = function (fields, specialField) { - if (specialField) { - position = _.findIndex( - fields, - function (selectedField) { - return specialField.fields.includes(selectedField); - }, - this, - ); - fields.splice(position, 0, specialField.name); - fields = _.difference(fields, specialField.fields); - } - return fields; - }; + convertToSpecialFields(fields) { + let fieldsCopy = [...fields]; - // If the user selected a special field, make sure we convert those first - if (this.selectedSpecialFields && this.selectedSpecialFields.length) { - this.selectedSpecialFields.forEach(function (specialFiend) { - fields = replaceWithSpecialField(fields, specialFiend); - }, this); + // Helper function to replace fields with a special field name + const replaceWithSpecialField = (originalFields, specialField) => { + const position = originalFields.findIndex((field) => + specialField.fields.includes(field), + ); + if (position !== -1) { + originalFields.splice( + position, + specialField.fields.length, + specialField.name, + ); } + return originalFields; + }; - // Search for remaining special fields given the fields and model values - var matchingSpecialField = this.getSpecialField(fields); - - // There may be more than one special field in the list of fields... - while (matchingSpecialField !== null) { - fields = replaceWithSpecialField(fields, matchingSpecialField); - // Check if there are more special fields remaining - matchingSpecialField = this.getSpecialField(fields); - } + // Iterate over each selected special field to transform the fields array + if (this.selectedSpecialFields && this.selectedSpecialFields.length) { + this.selectedSpecialFields.forEach((specialField) => { + fieldsCopy = replaceWithSpecialField(fieldsCopy, specialField); + }); + } - return fields; - } catch (error) { - console.log( - "Error converting query field names to special field names in" + - " a Query Rule View. Returning the list of fields unchanged." + - " Error details : " + - error, + // Replace any remaining matches + let matchingSpecialField = this.getSpecialField(fieldsCopy); + while (matchingSpecialField) { + fieldsCopy = replaceWithSpecialField( + fieldsCopy, + matchingSpecialField, ); - return fields; + matchingSpecialField = this.getSpecialField(fieldsCopy); } + + return fieldsCopy; }, /** @@ -959,43 +863,30 @@ define([ * array set on the view's selectedSpecialFields property. selectedSpecialFields * is cleared each time this function runs. This function is the opposite of * {@link QueryRuleView#convertToSpecialFields} - * @param {string[]} fields] - The list of field names to convert - * @returns {string[]} - The converted list of field names. If there were no - * special fields detected, or if there's an error, then then the field names are - * returned unchanged. - * * @param {string[]} fields - The list of fields to convert to actual query * service index fields * @returns {string[]} - Returns the list of fields with any special field - * replaced with real fields from the query service index - * + * replaced with real fields from the query service index. If there were no + * special fields detected, or if there's an error, then then the field names are + * returned unchanged. * @since 2.15.0 */ - convertFromSpecialFields: function (fields) { + convertFromSpecialFields(fields) { try { this.selectedSpecialFields = []; if (this.specialFields) { - this.specialFields.forEach(function (specialField) { - var index = fields.indexOf(specialField.name); + this.specialFields.forEach((specialField) => { + const index = fields.indexOf(specialField.name); if (index >= 0) { // Keep a record that the user selected a special field (useful in the // case that the special field is just a duplicate of another field) this.selectedSpecialFields.push(specialField); - fields.splice.apply( - fields, - [index, 1].concat(specialField.fields), - ); + fields.splice(index, 1, ...specialField.fields); } }, this); } return fields; } catch (error) { - console.log( - "Error converting special query fields to query fields that" + - " exist in the index in a Query Rule View. Returning the fields" + - " unchanged. Error details: " + - error, - ); return fields; } }, @@ -1004,793 +895,630 @@ define([ * Create and insert an input that allows the user to select a metadata field to * query */ - addFieldSelect: function () { - try { - // Check whether the filter model set on this view contains query fields - // and values that match one of the special rules. If it does, - // convert the list of field names to special field to pass on to the - // Query Field Select View. - var selectedFields = _.clone(this.model.get("fields")); - var selectedFields = this.convertToSpecialFields(selectedFields); - - this.fieldSelect = new QueryFieldSelect({ - selected: selectedFields, - excludeFields: this.excludeFields, - addFields: this.specialFields, - separatorText: this.model.get("fieldsOperator"), - }); - this.fieldSelect.$el.addClass(this.fieldsClass); - this.el.append(this.fieldSelect.el); - this.fieldSelect.render(); - - // Update the model when the fieldsOperator changes - this.stopListening(this.fieldSelect, "separatorChanged"); - this.listenTo( - this.fieldSelect, - "separatorChanged", - function (newOperator) { - this.model.set("fieldsOperator", newOperator); - }, - ); - // Update model when the selected fields change - this.stopListening(this.fieldSelect, "changeSelection"); - this.listenTo( - this.fieldSelect, - "changeSelection", - this.handleFieldChange, - ); - } catch (e) { - console.error( - "Error adding a metadata selector input in the Query Rule" + - " View, error message:", - e, - ); - } + addFieldSelect() { + // Check whether the filter model set on this view contains query fields + // and values that match one of the special rules. If it does, + // convert the list of field names to special field to pass on to the + // Query Field Select View. + let selectedFields = _.clone(this.model.get("fields")); + selectedFields = this.convertToSpecialFields(selectedFields); + + this.fieldSelect = new QueryFieldSelect({ + selected: selectedFields, + excludeFields: this.excludeFields, + addFields: this.specialFields, + separatorText: this.model.get("fieldsOperator"), + }); + this.fieldSelect.$el.addClass(this.fieldsClass); + this.el.append(this.fieldSelect.el); + this.fieldSelect.render(); + + // Update the model when the fieldsOperator changes + this.stopListening(this.fieldSelect, "separatorChanged"); + this.listenTo(this.fieldSelect, "separatorChanged", (newOperator) => { + this.model.set("fieldsOperator", newOperator); + }); + // Update model when the selected fields change + this.stopListening(this.fieldSelect, "changeSelection"); + this.listenTo( + this.fieldSelect, + "changeSelection", + this.handleFieldChange, + ); }, /** * handleFieldChange - Called when the Query Field Select View triggers a change * event. Updates the model with the new fields, and if required, * 1) converts the filter model to a different type based on the types of fields - * selected, 2) updates the operator select and the value select - * - * @param {string[]} newFields The list of new query fields that were selected + * selected, 2) updates the operator select and the value select + * @param {string[]} fields The list of new query fields that were selected */ - handleFieldChange: function (newFields) { - try { - // Uncomment the following chunk to clear operator & values when the field - // input is cleared. - // if(!newFields || newFields.length === 0 || newFields[0] === ""){ - // if(this.operatorSelect){ - // this.operatorSelect.changeSelection([""]); - // } - // this.model.set("fields", this.model.defaults().fields); - // return - // } - - // Get the selected operator before the field changed - var opBefore = this.getSelectedOperator(); - - // If any of the new fields are special fields, replace them with the - // actual query fields before setting them in the model... - newFields = this.convertFromSpecialFields(newFields); - - // Get the current type of filter and required type given the newly selected - // fields - var typeBefore = this.model.get("nodeName"), - typeAfter = MetacatUI.queryFields.getRequiredFilterType(newFields); - - // If the type has changed, then replace the model with one of the correct - // type, update the value and operator inputs, and do nothing else - if (typeBefore != typeAfter) { - this.model = this.model.collection.replaceModel(this.model, { - filterType: typeAfter, - fields: newFields, - }); - this.removeInput("value"); - this.removeInput("operator"); - this.addOperatorSelect(""); - return; - } + handleFieldChange(fields) { + // Get the selected operator before the field changed + const opBefore = this.getSelectedOperator(); + + // If any of the new fields are special fields, replace them with the + // actual query fields before setting them in the model... + const newFields = this.convertFromSpecialFields(fields); + + // Get the current type of filter and required type given the newly selected + // fields + const typeBefore = this.model.get("nodeName"); + const typeAfter = + MetacatUI.queryFields.getRequiredFilterType(newFields); + + // If the type has changed, then replace the model with one of the correct + // type, update the value and operator inputs, and do nothing else + if (typeBefore !== typeAfter) { + this.model = this.model.collection.replaceModel(this.model, { + filterType: typeAfter, + fields: newFields, + }); + this.removeInput("value"); + this.removeInput("operator"); + this.addOperatorSelect(""); + return; + } - // If the filter model type is the same, and the operator options are the same - // for the selected fields, then update the model - this.model.set("fields", newFields); - - // Get the selected operator now that we've updated the model with new fields - var opAfter = this.getSelectedOperator(); - - // Add an empty operator input field, if there isn't one - if (!this.operatorSelect) { - this.addOperatorSelect(""); - // If the operator options have changed, refresh the operator input - } else if (opAfter !== opBefore) { - this.removeInput("operator"); - // Make sure that we overwrite any values that don't apply to the new options. - this.handleOperatorChange([""]); - this.addOperatorSelect(""); - return; - } + // If the filter model type is the same, and the operator options are the same + // for the selected fields, then update the model + this.model.set("fields", newFields); + + // Get the selected operator now that we've updated the model with new fields + const opAfter = this.getSelectedOperator(); + + // Add an empty operator input field, if there isn't one + if (!this.operatorSelect) { + this.addOperatorSelect(""); + // If the operator options have changed, refresh the operator input + } else if (opAfter !== opBefore) { + this.removeInput("operator"); + // Make sure that we overwrite any values that don't apply to the new options. + this.handleOperatorChange([""]); + this.addOperatorSelect(""); + return; + } - // Refresh the value select in case a different value input is required for - // the new fields - if (this.valueSelect) { - this.removeInput("value"); - this.addValueSelect(); - } - } catch (e) { - console.error( - "Failed to handle query field change in the Query Rule View," + - " error message: " + - e, - ); + // Refresh the value select in case a different value input is required for + // the new fields + if (this.valueSelect) { + this.removeInput("value"); + this.addValueSelect(); } }, /** * Create and insert an input field where the user can select an operator for the * given rule. Operators will vary depending on filter model type. - * - * @param {string} selectedOperator - optional. The label of an operator to + * @param {string} operator - optional. The label of an operator to * pre-select. Set to an empty string to render an empty operator selector. */ - addOperatorSelect: function (selectedOperator) { - try { - var view = this; - var operatorError = false; - - var options = this.getOperatorOptions(); - - // Identify the selected operator for existing models - if (typeof selectedOperator !== "string") { - selectedOperator = this.getSelectedOperator(); - // If there was no operator found, then this is probably an unsupported - // combination of exclude + matchSubstring + filterType - if (selectedOperator === "") { - operatorError = true; - } - } - + addOperatorSelect(operator) { + const view = this; + const options = this.getOperatorOptions(); + let operatorError = false; + let selectedOperator = operator; + + // Identify the selected operator for existing models + if (typeof selectedOperator !== "string") { + selectedOperator = this.getSelectedOperator(); + // If there was no operator found, then this is probably an unsupported + // combination of exclude + matchSubstring + filterType if (selectedOperator === "") { - selectedOperator = []; - } else { - selectedOperator = [selectedOperator]; + operatorError = true; } + } + + if (selectedOperator === "") { + selectedOperator = []; + } else { + selectedOperator = [selectedOperator]; + } - this.operatorSelect = new SearchableSelect({ - options: options, - allowMulti: false, - inputLabel: "Select an operator", - clearable: false, - placeholderText: "Select an operator", - selected: selectedOperator, + this.operatorSelect = new SearchableSelect({ + options, + allowMulti: false, + inputLabel: "Select an operator", + clearable: false, + placeholderText: "Select an operator", + selected: selectedOperator, + }); + this.operatorSelect.$el.addClass(this.operatorClass); + this.el.append(this.operatorSelect.el); + + if (operatorError) { + view.listenToOnce(view.operatorSelect, "postRender", () => { + view.operatorSelect.showMessage( + "Please select a valid operator", + "error", + true, + ); }); - this.operatorSelect.$el.addClass(this.operatorClass); - this.el.append(this.operatorSelect.el); - - if (operatorError) { - view.listenToOnce(view.operatorSelect, "postRender", function () { - view.operatorSelect.showMessage( - "Please select a valid operator", - "error", - true, - ); - }); - } + } - this.operatorSelect.render(); + this.operatorSelect.render(); - // Update model when the values change - this.stopListening(this.operatorSelect, "changeSelection"); - this.listenTo( - this.operatorSelect, - "changeSelection", - this.handleOperatorChange, - ); - } catch (e) { - console.error( - "Error adding an operator selector input in the Query Rule " + - "View, error message:", - e, - ); - } + // Update model when the values change + this.stopListening(this.operatorSelect, "changeSelection"); + this.listenTo( + this.operatorSelect, + "changeSelection", + this.handleOperatorChange, + ); }, /** * handleOperatorChange - When the operator selection is changed, update the model * and re-set the value UI when required - * * @param {string[]} newOperatorLabel The new operator label within an array, * e.g. ["is greater than"] */ - handleOperatorChange: function (newOperatorLabel) { - try { - var view = this; - - if (!newOperatorLabel || newOperatorLabel[0] == "") { - var modelDefaults = this.model.defaults(); - this.model.set({ - min: modelDefaults.min, - max: modelDefaults.max, - values: modelDefaults.values, - }); - this.removeInput("value"); - return; - } - - // Get the properties of the newly selected operator. The newOperatorLabel - // will be an array with one value. Select only from the available options, - // since there may be multiple options with the same label in - // this.operatorOptions. - var options = this.getOperatorOptions(); - var operator = _.findWhere(options, { label: newOperatorLabel[0] }); - - // Gather information about which values are currently set on the model, and - // which are required - var // Type - type = view.model.get("nodeName"), - isNumeric = ["dateFilter", "numericFilter"].includes(type), - isRange = operator.hasMin && operator.hasMax, - // Values - modelValues = this.model.get("values"), - modelHasValues = modelValues - ? modelValues && modelValues.length - : false, - modelFirstValue = modelHasValues ? modelValues[0] : null, - modelValueInt = parseInt(modelFirstValue) - ? parseInt(modelFirstValue) - : null, - needsValue = - isNumeric && - !modelValueInt && - !operator.hasMin && - !operator.hasMax, - // Min - modelMin = this.model.get("min"), - modelHasMin = modelMin === 0 || modelMin, - needsMin = operator.hasMin && !modelHasMin, - // Max - modelMax = this.model.get("max"), - modelHasMax = modelMax === 0 || modelMax, - needsMax = operator.hasMax && !modelHasMax; - - // Some operator options include a specific value to be set on the model. For - // example, "is not empty", should set the model value to the "*" wildcard. - // For operators with these specific value requirements, update the filter - // model value and remove the value select input. - if (operator.values && operator.values.length) { - this.removeInput("value"); - this.model.set("values", operator.values); - // If the operator does not have a default value, then ensure that there is - // a value select available. - } else { - if (!this.valueSelect) { - this.model.set("values", view.model.defaults().values); - this.addValueSelect(); - } - } - - // Update the model with true or false for matchSubstring and exclude - ["matchSubstring", "exclude"].forEach((prop, i) => { - if (typeof operator[prop] !== "undefined") { - view.model.set(prop, operator[prop]); - } else { - view.model.set(prop, view.model.defaults()[prop]); - } + handleOperatorChange(newOperatorLabel) { + const view = this; + + if (!newOperatorLabel || newOperatorLabel[0] === "") { + const modelDefaults = this.model.defaults(); + this.model.set({ + min: modelDefaults.min, + max: modelDefaults.max, + values: modelDefaults.values, }); + this.removeInput("value"); + return; + } - // Set min & max values as required by the operator - // TODO - test this strategy with dates... - - // Add a minimum value if one is needed - if (needsMin) { - // Search for the min in the values, then in the max - if (modelValueInt || modelValueInt === 0) { - this.model.set("min", modelValueInt); - } else if (modelHasMax) { - this.model.set("min", modelMax); - } else { - this.model.set("min", 0); - } - } + // Get the properties of the newly selected operator. The newOperatorLabel + // will be an array with one value. Select only from the available options, + // since there may be multiple options with the same label in + // this.operatorOptions. + const options = this.getOperatorOptions(); + const operator = _.findWhere(options, { label: newOperatorLabel[0] }); + + // Gather information about which values are currently set on the model, and + // which are required + const // Type + type = view.model.get("nodeName"); + const isNumeric = ["dateFilter", "numericFilter"].includes(type); + const isRange = operator.hasMin && operator.hasMax; + // Values + const modelValues = this.model.get("values"); + const modelHasValues = modelValues + ? modelValues && modelValues.length + : false; + const modelFirstValue = modelHasValues ? modelValues[0] : null; + const modelValueInt = parseInt(modelFirstValue, 10) + ? parseInt(modelFirstValue, 10) + : null; + const needsValue = + isNumeric && !modelValueInt && !operator.hasMin && !operator.hasMax; + // Min + const modelMin = this.model.get("min"); + const modelHasMin = modelMin === 0 || modelMin; + const needsMin = operator.hasMin && !modelHasMin; + // Max + const modelMax = this.model.get("max"); + const modelHasMax = modelMax === 0 || modelMax; + const needsMax = operator.hasMax && !modelHasMax; + + // Some operator options include a specific value to be set on the model. For + // example, "is not empty", should set the model value to the "*" wildcard. + // For operators with these specific value requirements, update the filter + // model value and remove the value select input. + if (operator.values && operator.values.length) { + this.removeInput("value"); + this.model.set("values", operator.values); + // If the operator does not have a default value, then ensure that there is + // a value select available. + } else if (!this.valueSelect) { + this.model.set("values", view.model.defaults().values); + this.addValueSelect(); + } - // Add a maximum value if one is needed - if (needsMax) { - // Search for the min in the values, then in the max - if (modelValueInt || modelValueInt === 0) { - this.model.set("max", modelValueInt); - } else if (modelHasMin) { - this.model.set("max", modelMin); - } else { - this.model.set("max", 0); - } + // Update the model with true or false for matchSubstring and exclude + ["matchSubstring", "exclude"].forEach((prop) => { + if (typeof operator[prop] !== "undefined") { + view.model.set(prop, operator[prop]); + } else { + view.model.set(prop, view.model.defaults()[prop]); } - - // Add a value if one is needed - if (needsValue) { - if (modelHasMin) { - this.model.set("values", [modelMin]); - } else if (modelHasMax) { - this.model.set("values", [modelMax]); - } else { - this.model.set("values", [0]); - } + }); + + // Set min & max values as required by the operator + // TODO - test this strategy with dates... + + // Add a minimum value if one is needed + if (needsMin) { + // Search for the min in the values, then in the max + if (modelValueInt || modelValueInt === 0) { + this.model.set("min", modelValueInt); + } else if (modelHasMax) { + this.model.set("min", modelMax); + } else { + this.model.set("min", 0); } + } - // Remove the minimum and max if they should not be included in the filter - if (modelHasMax && !operator.hasMax) { - this.model.set("max", this.model.defaults().max); - } - if (modelHasMin && !operator.hasMin) { - this.model.set("min", this.model.defaults().min); + // Add a maximum value if one is needed + if (needsMax) { + // Search for the min in the values, then in the max + if (modelValueInt || modelValueInt === 0) { + this.model.set("max", modelValueInt); + } else if (modelHasMin) { + this.model.set("max", modelMin); + } else { + this.model.set("max", 0); } + } - if (isRange) { - this.model.set("range", true); + // Add a value if one is needed + if (needsValue) { + if (modelHasMin) { + this.model.set("values", [modelMin]); + } else if (modelHasMax) { + this.model.set("values", [modelMax]); } else { - if (isNumeric) { - this.model.set("range", false); - } else { - this.model.unset("range"); - } + this.model.set("values", [0]); } + } - // If the operator changed for a numeric or date field, reset the value - // select. This way it can change from a range to a single value input if - // needed. - if (isNumeric) { - this.removeInput("value"); - this.addValueSelect(); - } - } catch (e) { - console.error( - "Failed to handle the operator selection in a Query Rule " + - "view, error message: " + - e, - ); + // Remove the minimum and max if they should not be included in the filter + if (modelHasMax && !operator.hasMax) { + this.model.set("max", this.model.defaults().max); + } + if (modelHasMin && !operator.hasMin) { + this.model.set("min", this.model.defaults().min); + } + + if (isRange) { + this.model.set("range", true); + } else if (isNumeric) { + this.model.set("range", false); + } else { + this.model.unset("range"); + } + + // If the operator changed for a numeric or date field, reset the value + // select. This way it can change from a range to a single value input if + // needed. + if (isNumeric) { + this.removeInput("value"); + this.addValueSelect(); } }, /** * Get a list of {@link QueryRuleView#operatorOptions operatorOptions} that are * allowed for this view's filter model - * - * @param {string[]} [fields] - Optional list of fields to use instead of the + * @param {string[]} [inputFields] - Optional list of fields to use instead of the * fields set on this view's Filter model - * + * @returns {object[]} - Returns an array of operator options that are allowed for + * this view's filter model * @since 2.15.0 */ - getOperatorOptions: function (fields) { - try { - // Check which type of rule this is (boolean, numeric, text, date) - var type = this.model.get("nodeName"); - - // If this rule contains a special field, replace the real query field names - // with the special field names for the purpose of selecting operator options - var fields = fields || this.model.get("fields"); - var fields = _.clone(fields); - var fields = this.convertToSpecialFields(fields); - - // Get the list of options for a user to select from based on field name. - // All of the rule's fields must be contained within the operator option's - // list of allowed fields for it to be a match. - var options = _.filter(this.operatorOptions, function (option) { - if (option.fields) { - return _.every(fields, function (fieldName) { - return option.fields.includes(fieldName); - }); - } - }); - - // Get the list of options for a user to select from based on type, if there - // were none that matched based on field names - if (!options || !options.length) { - options = _.filter( - this.operatorOptions, - function (option) { - if (option.types) { - return option.types.includes(type); - } - }, - this, + getOperatorOptions(inputFields) { + // Check which type of rule this is (boolean, numeric, text, date) + const type = this.model.get("nodeName"); + + // If this rule contains a special field, replace the real query field names + // with the special field names for the purpose of selecting operator options + let fields = inputFields || this.model.get("fields"); + fields = _.clone(fields); + fields = this.convertToSpecialFields(fields); + + // Get the list of options for a user to select from based on field name. + // All of the rule's fields must be contained within the operator option's + // list of allowed fields for it to be a match. + let options = _.filter(this.operatorOptions, (option) => { + if (option.fields) { + return _.every(fields, (fieldName) => + option.fields.includes(fieldName), ); } + return false; + }); - return options; - } catch (error) { - console.log( - "Error getting operator options in a Query Rule View, " + - "Error details: " + - error, - ); + // Function to check if option types include the specified type + const includesType = (option) => + option.types && option.types.includes(type); + + // Get the list of options for a user to select from based on type, if there + // were none that matched based on field names + if (!options || !options.length) { + options = this.operatorOptions.filter(includesType); } + + return options; }, /** * getSelectedOperator - Based on values set on the model, get the label to show * in the "operator" filed of the Query Rule - * - * @return {string} The operator label + * @returns {string} The operator label */ - getSelectedOperator: function () { - try { - // This view - var view = this, - // The options that we will filter down - options = this.operatorOptions, - // The user-facing operator label that we will return - selectedOperator = ""; - - // --- Filter 1 - Filter options by type --- // - - // Reduce list of options to only those that apply to the current filter type - var type = view.model.get("nodeName"); - var options = this.getOperatorOptions(); - - // --- Filter 2 - filter by 'matchSubstring', 'exclude', 'min', 'max' --- // - - // Create the conditions based on the model - var conditions = _.pick( - this.model.attributes, - "matchSubstring", - "exclude", - "min", - "max", - ); + getSelectedOperator() { + // This view + const view = this; + // The user-facing operator label that we will return + let selectedOperator = ""; + + // --- Filter 1 - Filter options by type --- // + + // Reduce list of options to only those that apply to the current filter type + const type = view.model.get("nodeName"); + let operatorOptions = this.getOperatorOptions(); + + // --- Filter 2 - filter by 'matchSubstring', 'exclude', 'min', 'max' --- // + + // Create the conditions based on the model + const conditions = _.pick( + this.model.attributes, + "matchSubstring", + "exclude", + "min", + "max", + ); - var isNumeric = ["dateFilter", "numericFilter"].includes(type); + const isNumeric = ["dateFilter", "numericFilter"].includes(type); - if (!conditions.min && conditions.min !== 0) { - if (isNumeric) { - conditions.hasMin = false; - } - } else if (isNumeric) { - conditions.hasMin = true; + if (!conditions.min && conditions.min !== 0) { + if (isNumeric) { + conditions.hasMin = false; } - if (!conditions.max && conditions.max !== 0) { - if (isNumeric) { - conditions.hasMax = false; - } - } else if (isNumeric) { - conditions.hasMax = true; + } else if (isNumeric) { + conditions.hasMin = true; + } + if (!conditions.max && conditions.max !== 0) { + if (isNumeric) { + conditions.hasMax = false; } + } else if (isNumeric) { + conditions.hasMax = true; + } - delete conditions.min; - delete conditions.max; + delete conditions.min; + delete conditions.max; - var options = _.where(options, conditions); + operatorOptions = _.where(operatorOptions, conditions); - // --- Filter 3 - filter based on the value, if there's > 1 option --- // + // --- Filter 3 - filter based on the value, if there's > 1 option --- // - if (options.length > 1) { - // Model values that determine the user-facing operator eg ["*"], [true], - // [false] - var specialValues = _.compact( - _.pluck(this.operatorOptions, "values"), - ), - specialValues = specialValues.map((val) => JSON.stringify(val)), - specialValues = _.uniq(specialValues); + if (operatorOptions.length > 1) { + // Model values that determine the user-facing operator eg ["*"], [true], + // [false] + let specialValues = _.compact( + _.pluck(this.operatorOptions, "values"), + ); + specialValues = specialValues.map((val) => JSON.stringify(val)); + specialValues = _.uniq(specialValues); - options = options.filter(function (option) { - var modelValsStringified = JSON.stringify( - view.model.get("values"), - ); - if (specialValues.includes(modelValsStringified)) { - if (JSON.stringify(option.values) === modelValsStringified) { - return true; - } - } else { - if (!option.values) { - return true; - } - } - }); - } - // --- Return value --- // + const modelValues = view.model.get("values"); + const modelValuesString = JSON.stringify(modelValues); - if (options.length === 1) { - selectedOperator = options[0].label; - } + operatorOptions = operatorOptions.filter((option) => { + if (!option.values) return true; // Filter in options without values + if (!specialValues.includes(modelValuesString)) return false; // If model values not special, filter out + return JSON.stringify(option.values) === modelValuesString; // Check exact match for special values + }); + } + // --- Return value --- // - return selectedOperator; - } catch (e) { - console.error( - "Failed to select an operator in the Query Rule View, error" + - " message: " + - e, - ); + if (operatorOptions.length === 1) { + selectedOperator = operatorOptions[0].label; } + + return selectedOperator; }, /** * getCategory - Given an array of query fields, get the user-facing category that * these fields belong to. If there are fields from multiple categories, then a * default "Text" category is returned. - * * @param {string[]} fields An array of query (Solr) fields - * @return {string} The label for the category that the given fields belong to + * @returns {string} The label for the category that the given fields belong to */ - getCategory: function (fields) { - try { - var categories = [], - // When fields is empty or are different types - defaultCategory = "Text"; + getCategory(fields) { + const categories = []; + // When fields is empty or are different types + const defaultCategory = "Text"; - if (!fields || fields.length === 0 || fields[0] === "") { - return defaultCategory; - } + if (!fields || fields.length === 0 || fields[0] === "") { + return defaultCategory; + } - fields.forEach((field, i) => { - // Get the category of the field from the matching filter model in the Query - // Fields Collection - var fieldModel = MetacatUI.queryFields.findWhere({ name: field }); - categories.push(fieldModel.get("category")); - }); + fields.forEach((field) => { + // Get the category of the field from the matching filter model in the Query + // Fields Collection + const fieldModel = MetacatUI.queryFields.findWhere({ name: field }); + categories.push(fieldModel.get("category")); + }); - // Test of all the fields are of the same type - var allEqual = categories.every((val, i, arr) => val === arr[0]); + // Test of all the fields are of the same type + const allEqual = categories.every((val, i, arr) => val === arr[0]); - if (allEqual) { - return categories[0]; - } else { - return defaultCategory; - } - } catch (e) { - console.log( - "Failed to detect the category for a group of filters in the" + - " Query Rule View, error message: " + - e, - ); + if (allEqual) { + return categories[0]; } + return defaultCategory; }, /** * Create and insert an input field where the user can provide a search value */ - addValueSelect: function () { - try { - var view = this; - (fields = this.model.get("fields")), - (filterType = MetacatUI.queryFields.getRequiredFilterType(fields)), - (category = this.getCategory(fields)), - (interfaces = this.valueSelectUImap), - (label = ""); - - // To help guide users to create valid queries, the type of value field will - // vary based on the type of field (i.e. filter nodeName), and the operator - // selected. - - // Some user-facing operators (e.g. "is true") don't require a value to be set - var selectedOperator = _.findWhere(this.operatorOptions, { - label: this.getSelectedOperator(), - }); - if (selectedOperator) { - if (selectedOperator.values && selectedOperator.values.length) { - return; - } + addValueSelect() { + const view = this; + const fields = this.model.get("fields"); + const filterType = MetacatUI.queryFields.getRequiredFilterType(fields); + const category = this.getCategory(fields); + const interfaces = this.valueSelectUImap; + let label = ""; + + // To help guide users to create valid queries, the type of value field will + // vary based on the type of field (i.e. filter nodeName), and the operator + // selected. + + // Some user-facing operators (e.g. "is true") don't require a value to be set + const selectedOperator = _.findWhere(this.operatorOptions, { + label: this.getSelectedOperator(), + }); + if (selectedOperator) { + if (selectedOperator.values && selectedOperator.values.length) { + return; } + } - // Find the appropriate UI to use the the value select field. Find the first - // match in the valueSelectUImap according to the filter type and the - // categories associated with the metadata field. - var interfaceProperties = _.find( - interfaces, - function (thisInterface) { - var typesMatch = true, - categoriesMatch = true, - namesMatch = true; - if ( - thisInterface.queryFields && - thisInterface.queryFields.length - ) { - fields.forEach((field, i) => { - if (thisInterface.queryFields.includes(field) === false) { - namesMatch = false; - } - }); - } - if ( - thisInterface.filterTypes && - thisInterface.filterTypes.length - ) { - typesMatch = thisInterface.filterTypes.includes(filterType); + // Find the appropriate UI to use the the value select field. Find the first + // match in the valueSelectUImap according to the filter type and the + // categories associated with the metadata field. + const interfaceProperties = _.find(interfaces, (thisInterface) => { + let typesMatch = true; + let categoriesMatch = true; + let namesMatch = true; + if (thisInterface.queryFields && thisInterface.queryFields.length) { + fields.forEach((field) => { + if (thisInterface.queryFields.includes(field) === false) { + namesMatch = false; } - if (thisInterface.categories && thisInterface.categories.length) { - categoriesMatch = thisInterface.categories.includes(category); - } - return typesMatch && categoriesMatch && namesMatch; - }, - ); - - this.valueSelect = interfaceProperties.uiFunction.call(this); - if (interfaceProperties.label && interfaceProperties.label.length) { - label = $( - "

" + - interfaceProperties.label + - "

", - ); + }); } - - // Append and render the chosen value selector - this.el.append(view.valueSelect.el); - this.valueSelect.$el.addClass(this.valuesClass); - view.valueSelect.render(); - if (label) { - view.valueSelect.$el.prepend(label); + if (thisInterface.filterTypes && thisInterface.filterTypes.length) { + typesMatch = thisInterface.filterTypes.includes(filterType); } + if (thisInterface.categories && thisInterface.categories.length) { + categoriesMatch = thisInterface.categories.includes(category); + } + return typesMatch && categoriesMatch && namesMatch; + }); - // Make sure the listeners set below are not set multiple times - this.stopListening( - view.valueSelect, - "changeSelection inputFocus separatorChanged", + this.valueSelect = interfaceProperties.uiFunction.call(this); + if (interfaceProperties.label && interfaceProperties.label.length) { + label = $( + `

${interfaceProperties.label}

`, ); + } - // Update model when the values change - note that the date & numeric filter - // views do not trigger a 'changeSelection' event, (because they are not based - // on a SearchSelect View) but update the models directly - this.listenTo( - view.valueSelect, - "changeSelection", - this.handleValueChange, - ); + // Append and render the chosen value selector + this.el.append(view.valueSelect.el); + this.valueSelect.$el.addClass(this.valuesClass); + view.valueSelect.render(); + if (label) { + view.valueSelect.$el.prepend(label); + } - // Update the model when the operator changes - this.listenTo( - view.valueSelect, - "separatorChanged", - function (newOperator) { - this.model.set("operator", newOperator); - }, + // Make sure the listeners set below are not set multiple times + this.stopListening( + view.valueSelect, + "changeSelection inputFocus separatorChanged", + ); + + // Update model when the values change - note that the date & numeric filter + // views do not trigger a 'changeSelection' event, (because they are not based + // on a SearchSelect View) but update the models directly + this.listenTo( + view.valueSelect, + "changeSelection", + this.handleValueChange, + ); + + // Update the model when the operator changes + this.listenTo(view.valueSelect, "separatorChanged", (newOperator) => { + this.model.set("operator", newOperator); + }); + + // Show a message that reminds the user that capitalization matters when they + // are typing a value for a field that is case-sensitive. + this.listenTo(view.valueSelect, "inputFocus", () => { + const currentFields = this.model.get("fields"); + const isCaseSensitive = _.some(currentFields, (field) => + MetacatUI.queryFields.findWhere({ + name: field, + caseSensitive: true, + }), ); - // Show a message that reminds the user that capitalization matters when they - // are typing a value for a field that is case-sensitive. - this.listenTo(view.valueSelect, "inputFocus", function (event) { - var fields = this.model.get("fields"); - var isCaseSensitive = _.some(fields, function (field) { - return MetacatUI.queryFields.findWhere({ - name: field, - caseSensitive: true, - }); - }); - if (isCaseSensitive) { - var fieldsText = "The field"; - if (fields.length > 1) { - fieldsText = "At least one of the fields"; - } - var message = - " Hint: " + - fieldsText + - " you selected is case-sensitive. Capitalization matters here."; - view.valueSelect.showMessage( - message, - (type = "info"), - (removeOnChange = false), - ); - } else { - view.valueSelect.removeMessages(); + if (isCaseSensitive) { + let fieldsText = "The field"; + if (currentFields.length > 1) { + fieldsText = "At least one of the fields"; } - }); - // Set the value to the value provided if there was one. Then validateValue() - } catch (e) { - console.error( - "Error adding a search value input in the Query Rule View," + - " error message:", - e, - ); - } + const message = ` Hint: ${fieldsText} you selected is case-sensitive. Capitalization matters here.`; + view.valueSelect.showMessage(message, "info", false); + } else { + view.valueSelect.removeMessages(); + } + }); }, /** * handleValueChange - Called when the select values for rule are changed. Updates * the model. - * * @param {string[]} newValues The new values that were selected */ - handleValueChange: function (newValues) { - try { - // TODO: validate values - - // Don't add empty values to the model - newValues = _.reject(newValues, function (val) { - return val === ""; - }); - this.model.set("values", newValues); - } catch (e) { - console.error( - "Failed to handle a change in select values in the Query Ryle" + - " View, error message: " + - e, - ); - } + handleValueChange(newValues) { + // TODO: validate values + // Don't add empty values to the model + const filteredValues = _.reject(newValues, (val) => val === ""); + this.model.set("values", filteredValues); }, - // /** - // * Ensure the value entered is valid, given the metadata field selected. - // * If it's not, show an error. If it is, remove the error if there was one. - // * - // * @return {type} description - // */ - // validateValue: function() {// TODO - // }, - /** * Remove one of the three input fields from the rule - * * @param {string} inputType Which of the inputs to remove? "field", "operator", * or "value" */ - removeInput: function (inputType) { - try { - // TODO - what, if any, model updates should happen here? - switch (inputType) { - case "value": - if (this.valueSelect) { - this.stopListening( - this.valueSelect, - "changeSelection inputFocus", - ); - this.valueSelect.remove(); - this.valueSelect = null; - } - break; - case "operator": - if (this.operatorSelect) { - this.stopListening(this.operatorSelect, "changeSelection"); - this.operatorSelect.remove(); - this.operatorSelect = null; - } - break; - case "field": - if (this.fieldSelect) { - this.stopListening(this.fieldSelect, "changeSelection"); - this.fieldSelect.remove(); - this.fieldSelect = null; - } - break; - default: - console.error( - "Must specify either value, operator, or field in the" + - " removeInput function in the Query Rule View", + removeInput(inputType) { + // TODO - what, if any, model updates should happen here? + switch (inputType) { + case "value": + if (this.valueSelect) { + this.stopListening( + this.valueSelect, + "changeSelection inputFocus", ); - } - } catch (e) { - console.error( - "Error removing an input from the Query Rule View, error" + - " message:", - e, - ); + this.valueSelect.remove(); + this.valueSelect = null; + } + break; + case "operator": + if (this.operatorSelect) { + this.stopListening(this.operatorSelect, "changeSelection"); + this.operatorSelect.remove(); + this.operatorSelect = null; + } + break; + case "field": + if (this.fieldSelect) { + this.stopListening(this.fieldSelect, "changeSelection"); + this.fieldSelect.remove(); + this.fieldSelect = null; + } + break; + default: + break; } }, /** * Indicate to the user that the rule will be removed when they hover over the * remove button. + * @param {Event} e The mouseover or mouseout event */ - previewRemove: function (e) { - try { - var normalOpacity = 1.0, - previewOpacity = 0.2, - speed = 175; + previewRemove(e) { + const normalOpacity = 1.0; + const previewOpacity = 0.2; + const speed = 175; - var removeEl = e.target; - var subElements = this.$el.children().not(removeEl); + const removeEl = e.target; + const subElements = this.$el.children().not(removeEl); - if (e.type === "mouseover") { - subElements.fadeTo(speed, previewOpacity); - $(removeEl).fadeTo(speed, normalOpacity); - } - if (e.type === "mouseout") { - subElements.fadeTo(speed, normalOpacity); - $(removeEl).fadeTo(speed, previewOpacity); - } - } catch (error) { - console.log( - "Error showing a preview of the removal of a Query Rule View," + - " details: " + - error, - ); + if (e.type === "mouseover") { + subElements.fadeTo(speed, previewOpacity); + $(removeEl).fadeTo(speed, normalOpacity); + } + if (e.type === "mouseout") { + subElements.fadeTo(speed, normalOpacity); + $(removeEl).fadeTo(speed, previewOpacity); } }, @@ -1798,18 +1526,13 @@ define([ * removeSelf - When the delete button is clicked, remove this entire View and * associated model */ - removeSelf: function () { - try { - $("body .popover").remove(); - $("body .tooltip").remove(); - if (this.model && this.model.collection) { - this.model.collection.remove(this.model); - } - this.remove(); - } catch (error) { - console.log("Error removing a Query Rule View, details: " + error); + removeSelf() { + $("body .popover").remove(); + $("body .tooltip").remove(); + if (this.model && this.model.collection) { + this.model.collection.remove(this.model); } + this.remove(); }, }, - ); -}); + )); From 53b6611082d60beca4d63de3348c0a3a9efb220b Mon Sep 17 00:00:00 2001 From: Matthew B <106352182+artntek@users.noreply.github.com> Date: Tue, 2 Jul 2024 16:36:11 -0700 Subject: [PATCH 059/169] add metadata to enable helm push to ghcr --- helm/Chart.yaml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/helm/Chart.yaml b/helm/Chart.yaml index 54f9fdf34..5a72c91b6 100644 --- a/helm/Chart.yaml +++ b/helm/Chart.yaml @@ -1,6 +1,12 @@ apiVersion: v2 name: metacatui -description: MetacatUI, a web interface for DataONE repositories +description: | + Helm chart for Kubernetes Deployment of MetacatUI, a web interface for DataONE repositories + (https://github.com/NCEAS/metacatui) + +# OCI Annotations - see https://github.com/helm/helm/pull/11204 +sources: + - https://github.com/NCEAS/metacatui # A chart can be either an 'application' or a 'library' chart. # From 1bd8bb8d7ad762ab562465cf27ef2bf0d6a25ea9 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 3 Jul 2024 10:52:27 -0400 Subject: [PATCH 060/169] Fix linting errors in SearchableSelectView Issue #2253 --- src/js/app.js | 1 + .../searchSelect/SearchableSelectView.js | 1391 ++++++++--------- 2 files changed, 612 insertions(+), 780 deletions(-) diff --git a/src/js/app.js b/src/js/app.js index 45cd25287..324b55c68 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -94,6 +94,7 @@ require.config({ semanticUItransition: MetacatUI.root + "/components/semanticUI/transition.min", semanticUIdropdown: MetacatUI.root + "/components/semanticUI/dropdown.min", + semanticAPI: `${MetacatUI.root}/components/semanticUI/api.min`, // To make elements drag and drop, sortable sortable: MetacatUI.root + "/components/sortable.min", //Cesium diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 955d99a85..37eaba067 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -3,11 +3,11 @@ define([ "underscore", "backbone", "semanticUItransition", - "text!" + MetacatUI.root + "/components/semanticUI/transition.min.css", + `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, "semanticUIdropdown", - "text!" + MetacatUI.root + "/components/semanticUI/dropdown.min.css", + `text!${MetacatUI.root}/components/semanticUI/dropdown.min.css`, "text!templates/selectUI/searchableSelect.html", -], function ( +], ( $, _, Backbone, @@ -16,19 +16,19 @@ define([ Dropdown, DropdownCSS, Template, -) { +) => /** * @class SearchableSelectView * @classdesc A select interface that allows the user to search from within * the options, and optionally select multiple items. Also allows the items * to be grouped, and to display an icon or image for each item. * @classcategory Views/SearchSelect - * @extends Backbone.View - * @constructor + * @augments Backbone.View + * @class * @since 2.14.0 * @screenshot views/searchSelect/SearchableSelectView.png */ - return Backbone.View.extend( + Backbone.View.extend( /** @lends SearchableSelectView.prototype */ { /** @@ -173,8 +173,7 @@ define([ * single option. To create category headings, provide an object containing named * objects, where the key for each object is the category title to display, and * the value of each object comprises the option properties. - * @name SearchableSelectView#options - * @type {Object[]|Object} + * @typedef {object[] | object} SearchableSelectOptions * @property {string} icon - The name of a Font Awesome 3.2.1 icon to display to * the left of the label (e.g. "lemon", "heart") * @property {string} image - The complete path to an image to use instead of an @@ -229,6 +228,11 @@ define([ * ] * } */ + + /** + * The options that a user can select from in the dropdown menu. + * @type {SearchableSelectOptions} + */ options: [], /** @@ -244,7 +248,7 @@ define([ * menu content from an API endpoint. Details of what can be set here are * specified by the Semantic-UI / Fomantic-UI package. Set to false if not * retrieving remote content. - * @type {Object|booealn} + * @type {object | booealn} * @default false * @since 2.15.0 * @see {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} @@ -262,212 +266,192 @@ define([ /** * Creates a new SearchableSelectView - * @param {Object} options - A literal object with options to pass to the view + * @param {object} opts - A literal object with options to pass to the view */ - initialize: function (options) { - try { - // Add CSS required for this view - MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); - MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); - - // If pre-selected values that are passed to this view are also attached to a - // model (e.g. when they were passed to this view as {selected: - // parentView.model.get("values")}), then it's important that we use a clone - // instead. Otherwise this view may silently update the model, and important - // events may not be triggered. - if (options.selected) { - options.selected = _.clone(options.selected); - } - - // If pre-selected values that are passed to this view are also attached to a - // model (e.g. when they were passed to this view as {selected: - // parentView.model.get("values")}), then it's important that we use a clone - // instead. Otherwise this view may silently update the model, and important - // events may not be triggered. - if (options.selected) { - options.selected = _.clone(options.selected); - } + initialize(opts) { + const options = opts || {}; + + // Add CSS required for this view + MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); + MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); + + // If pre-selected values that are passed to this view are also attached to a + // model (e.g. when they were passed to this view as {selected: + // parentView.model.get("values")}), then it's important that we use a clone + // instead. Otherwise this view may silently update the model, and important + // events may not be triggered. + if (options.selected) { + options.selected = _.clone(options.selected); + } - // Get all the options and apply them to this view - if (typeof options == "object") { - var optionKeys = Object.keys(options); - _.each( - optionKeys, - function (key, i) { - this[key] = options[key]; - }, - this, - ); - } - } catch (e) { - console.log( - "Failed to initialize a Searchable Select view, error message:", - e, - ); + // If pre-selected values that are passed to this view are also attached to a + // model (e.g. when they were passed to this view as {selected: + // parentView.model.get("values")}), then it's important that we use a clone + // instead. Otherwise this view may silently update the model, and important + // events may not be triggered. + if (options.selected) { + options.selected = _.clone(options.selected); } + + // Get all the options and apply them to this view + _.extend(this, options); }, /** * Render the view - * - * @return {SearchableSelect} Returns the view + * @returns {SearchableSelect} Returns the view */ - render: function () { - try { - var view = this; - - if (view.apiSettings && !view.semanticAPILoaded) { - require([ - MetacatUI.root + "/components/semanticUI/api.min.js", - ], function (SemanticAPI) { - view.semanticAPILoaded = true; - view.render(); - }); - return; - } + render() { + const view = this; + + if (view.apiSettings && !view.semanticAPILoaded) { + // eslint-disable-next-line import/no-dynamic-require + require(["semanticAPI"], (_SemanticAPI) => { + view.semanticAPILoaded = true; + view.render(); + }); + return this; + } - // Render the template using the view attributes - this.$el.html(this.template(this)); - - // Start the dropdown in a disabled state. - // This allows us to pre-select values without triggering a change - // event. - this.disable(); - this.showLoading(); - - // Initialize the dropdown interface - // For explanations of settings, see: - // https://semantic-ui.com/modules/dropdown.html#/settings - this.$selectUI = this.$el.find(".ui.dropdown").dropdown({ - keys: { - // So that a user may enter search text using a comma - delimiter: false, - }, - apiSettings: this.apiSettings, - fullTextSearch: true, - duration: 90, - forceSelection: false, - ignoreDiacritics: true, - clearable: view.clearable, - allowAdditions: view.allowAdditions, - hideAdditions: false, - allowReselection: true, - onRemove: function (removedValue) { - // Callback when a value is removed *for multi-select inputs only* - // Remove the value from the selected array - view.selected = view.selected.filter(function (value) { - return value !== removedValue; - }); - }, - onLabelCreate: function (value, text) { - // Callback when a label is created *for multi-select inputs only* - - // Add the value to the selected array (but don't add twice). Do this in - // the onLabelCreate callback instead of in the onAdd callback because - // we would like to update the selected array before we create the - // separator element (below). - if (!view.selected.includes(value)) { - view.selected.push(value); - } - // Add a separator between labels if required. - var label = this; - if (view.separatorRequired.call(view)) { - // Create the separator element. - var separator = view.createSeparator.call(view); - if (separator) { - // Attach the separator to the label so that we can easily remove it - // when the label is removed. - label.data("separator", separator); - // Add it before the label element. - label = separator.add(label); - } - } - return label; - }, - onLabelRemove(value) { - // Call back when a user deletes a label *for multi-select inputs only* - var label = this; - // Remove the separator before this label if there is one. - var sep = label.data("separator"); - if (sep) { - sep.remove(); - } - // If this is the first label in an input of at least two, then delete - // the separator directly *after* this label - The label that's second - // will become first, and should not have an separator before it. - var allLabels = view.$selectUI.find(".label"); - if (allLabels.index(label) === 0) { - var separatorAfter = label.next("." + view.separatorClass); - if (separatorAfter) { - separatorAfter.remove(); - } + // Render the template using the view attributes + this.$el.html(this.template(this)); + + // Start the dropdown in a disabled state. + // This allows us to pre-select values without triggering a change + // event. + this.disable(); + this.showLoading(); + + // Initialize the dropdown interface + // For explanations of settings, see: + // https://semantic-ui.com/modules/dropdown.html#/settings + this.$selectUI = this.$el.find(".ui.dropdown").dropdown({ + keys: { + // So that a user may enter search text using a comma + delimiter: false, + }, + apiSettings: this.apiSettings, + fullTextSearch: true, + duration: 90, + forceSelection: false, + ignoreDiacritics: true, + clearable: view.clearable, + allowAdditions: view.allowAdditions, + hideAdditions: false, + allowReselection: true, + onRemove(removedValue) { + // Callback when a value is removed *for multi-select inputs only* + // Remove the value from the selected array + view.selected = view.selected.filter( + (value) => value !== removedValue, + ); + }, + onLabelCreate(value, _text) { + // Callback when a label is created *for multi-select inputs only* + + // Add the value to the selected array (but don't add twice). Do this in + // the onLabelCreate callback instead of in the onAdd callback because + // we would like to update the selected array before we create the + // separator element (below). + if (!view.selected.includes(value)) { + view.selected.push(value); + } + // Add a separator between labels if required. + let label = this; + if (view.separatorRequired.call(view)) { + // Create the separator element. + const separator = view.createSeparator.call(view); + if (separator) { + // Attach the separator to the label so that we can easily remove it + // when the label is removed. + label.data("separator", separator); + // Add it before the label element. + label = separator.add(label); } - }, - onChange: function (values, text, $choice) { - // Callback when values change for any type of input. - - // NOTE: The "values" argument is a string that contains all the - // selected values separated by commas. We updated the view.selected - // array with the onLabelCreate and onRemove callbacks instead of using - // the values argument passed to this function in order to allow commas - // within individual values. For example, if the user selected the value - // "x" and the value "y,z", the values string would be "x,y,z" and it - // would be difficult to see that two values were selected instead of - // three. - - // Update values for single-select inputs (multi-select are updated - // using the onLabelCreate and onRemove callbacks) - if (!view.allowMulti) { - view.selected = [values]; + } + return label; + }, + onLabelRemove(_value) { + // Call back when a user deletes a label *for multi-select inputs only* + const label = this; + // Remove the separator before this label if there is one. + const sep = label.data("separator"); + if (sep) { + sep.remove(); + } + // If this is the first label in an input of at least two, then delete + // the separator directly *after* this label - The label that's second + // will become first, and should not have an separator before it. + const allLabels = view.$selectUI.find(".label"); + if (allLabels.index(label) === 0) { + const separatorAfter = label.next(`.${view.separatorClass}`); + if (separatorAfter) { + separatorAfter.remove(); } + } + }, + onChange(values, _text, _$choice) { + // Callback when values change for any type of input. + + // NOTE: The "values" argument is a string that contains all the + // selected values separated by commas. We updated the view.selected + // array with the onLabelCreate and onRemove callbacks instead of using + // the values argument passed to this function in order to allow commas + // within individual values. For example, if the user selected the value + // "x" and the value "y,z", the values string would be "x,y,z" and it + // would be difficult to see that two values were selected instead of + // three. + + // Update values for single-select inputs (multi-select are updated + // using the onLabelCreate and onRemove callbacks) + if (!view.allowMulti) { + view.selected = [values]; + } - // Trigger an event if items are selected after the UI has been rendered - // (It is set as disabled until fully rendered). - if (!$(this).hasClass("disabled")) { - var newValues = _.clone(view.selected); - view.trigger("changeSelection", newValues); - } + // Trigger an event if items are selected after the UI has been rendered + // (It is set as disabled until fully rendered). + if (!$(this).hasClass("disabled")) { + const newValues = _.clone(view.selected); + view.trigger("changeSelection", newValues); + } - // Refresh the tooltips on the labels/text + // Refresh the tooltips on the labels/text - // Ensure tooltips for labels are removed - $(".search-select-tooltip").remove(); + // Ensure tooltips for labels are removed + $(".search-select-tooltip").remove(); - // Add a tooltip for single select elements (.text) or multi-select - // elements (.label). Delay so that to give time for DOM elements to be - // added or removed. - setTimeout(function (params) { - var textEl = view.$selectUI.find(".text:not(.default),.label"); - // Single select text element will not have the value attribute, add - // it so that we can find the matching description for the tooltip - if (!textEl.data("value") && !view.allowMulti) { - textEl.data("value", values); - } - if (textEl) { - textEl.each(function (i, el) { - view.addTooltip.call(view, el, "top"); - }); - } - }, 50); - }, - }); + // Add a tooltip for single select elements (.text) or multi-select + // elements (.label). Delay so that to give time for DOM elements to be + // added or removed. + setTimeout(() => { + const textEl = view.$selectUI.find(".text:not(.default),.label"); + // Single select text element will not have the value attribute, add + // it so that we can find the matching description for the tooltip + if (!textEl.data("value") && !view.allowMulti) { + textEl.data("value", values); + } + if (textEl) { + textEl.each((i, el) => { + view.addTooltip.call(view, el, "top"); + }); + } + }, 50); + }, + }); - view.$selectUI.data("view", view); + view.$selectUI.data("view", view); - view.postRender(); + view.postRender(); - return this; - } catch (e) { - console.log("Error rendering the search select, error message: ", e); - } + return this; }, /** * Change the options available in the dropdown menu and re-render. - * @param {SearchableSelectView#options} options - The new options + * @param {SearchableSelectOptions} options - The new options * @since 2.24.0 */ - updateOptions: function (options) { + updateOptions(options) { this.options = options; this.render(); }, @@ -475,110 +459,92 @@ define([ /** * Checks whether a separator should be created for the label that was just * created, but not yet attached to the DOM - * @return {boolean} - Returns true if a separator should be created, false + * @returns {boolean} - Returns true if a separator should be created, false * otherwise. * @since 2.15.0 */ - separatorRequired: function () { - try { - if ( - // Separators not required if only one selection is allowed - !this.allowMulti || - // Need separator text to create a separator element - !this.separatorText || - // Need the list of selected values to determine the value's position - !this.selected || - // Separator is only required between two or more values - this.selected.length <= 1 || - // Separator is only required after the first element has been added - this.$selectUI.find(".label").length === 0 - ) { - return false; - } else { - return true; - } - } catch (error) { - console.log( - "Error checking if a label in a searchable select input " + - "requires a separator. Assuming that it does not need one. Error details: " + - error, - ); + separatorRequired() { + if ( + // Separators not required if only one selection is allowed + !this.allowMulti || + // Need separator text to create a separator element + !this.separatorText || + // Need the list of selected values to determine the value's position + !this.selected || + // Separator is only required between two or more values + this.selected.length <= 1 || + // Separator is only required after the first element has been added + this.$selectUI.find(".label").length === 0 + ) { return false; } + return true; }, /** * Create the HTML for a separator element to insert between two labels. The * view.separatorClass is added to the separator element. - * @return {JQuery} Returns the separator as a jQuery element + * @returns {JQuery} Returns the separator as a jQuery element * @since 2.15.0 */ - createSeparator: function () { - try { - var view = this; - var separatorText = this.separatorText; - // Text is required to create a separator. - if (!separatorText) { - return null; - } - var separator = $("" + separatorText + ""); - separator.addClass(this.separatorClass); - - // Set a listener to change the text to one of the separatorText - // options on click, and to highlight all the separators when one is hovered - var separatorElHovered = false; - if (view.separatorTextOptions && view.separatorTextOptions.length) { - // Indicate that the separator is clickable - separator.css("cursor", "pointer"); - // Make sure the listeners set below are only set once - separator.off("click mouseenter mouseout"); - // Change all the separator text when one is clicked - separator.on("click", function () { - view.changeSeparator(); - }); - // Create the tooltip - if (view.changeableSeparatorTooltip) { - $(separator).tooltip("destroy"); - $(separator).tooltip({ - title: view.changeableSeparatorTooltip, - trigger: "manual", - }); - } - // Highlight all of the separator elements when one is hovered - separator.on("mouseenter", function () { - var separatorEls = view.$el.find("." + view.separatorClass); - separatorElHovered = true; - // Add a delay before the highlight class is added - setTimeout(function () { - if (separatorElHovered) { - separatorEls.addClass(view.changeableSeparatorClass); - if (view.changeableSeparatorTooltip) { - // Add an even longer delay before the tooltip is shown - setTimeout(function () { - if (separatorElHovered) { - $(separator).tooltip("show"); - } - }, 600); - } - } - }, 285); - }); - // Hide all the tooltips and remove the highlight class on mouse out - separator.on("mouseout", function () { - separatorElHovered = false; - var separatorEls = view.$el.find("." + view.separatorClass); - separatorEls.removeClass(view.changeableSeparatorClass); - separatorEls.tooltip("hide"); + createSeparator() { + const view = this; + const { separatorText } = this; + // Text is required to create a separator. + if (!separatorText) { + return null; + } + const separator = $(`${separatorText}`); + separator.addClass(this.separatorClass); + + // Set a listener to change the text to one of the separatorText + // options on click, and to highlight all the separators when one is hovered + let separatorElHovered = false; + if (view.separatorTextOptions && view.separatorTextOptions.length) { + // Indicate that the separator is clickable + separator.css("cursor", "pointer"); + // Make sure the listeners set below are only set once + separator.off("click mouseenter mouseout"); + // Change all the separator text when one is clicked + separator.on("click", () => { + view.changeSeparator(); + }); + // Create the tooltip + if (view.changeableSeparatorTooltip) { + $(separator).tooltip("destroy"); + $(separator).tooltip({ + title: view.changeableSeparatorTooltip, + trigger: "manual", }); } - return separator; - } catch (error) { - console.log( - "There was an error creating a separator element in a " + - "Searchable Select View. Error details: " + - error, - ); + // Highlight all of the separator elements when one is hovered + separator.on("mouseenter", () => { + const separatorEls = view.$el.find(`.${view.separatorClass}`); + separatorElHovered = true; + // Add a delay before the highlight class is added + setTimeout(() => { + if (separatorElHovered) { + separatorEls.addClass(view.changeableSeparatorClass); + if (view.changeableSeparatorTooltip) { + // Add an even longer delay before the tooltip is shown + setTimeout(() => { + if (separatorElHovered) { + $(separator).tooltip("show"); + } + }, 600); + } + } + }, 285); + }); + // Hide all the tooltips and remove the highlight class on mouse out + separator.on("mouseout", () => { + separatorElHovered = false; + const separatorEls = view.$el.find(`.${view.separatorClass}`); + separatorEls.removeClass(view.changeableSeparatorClass); + separatorEls.tooltip("hide"); + }); } + return separator; }, /** @@ -586,581 +552,471 @@ define([ * set in the {@link SearchableSelectView#separatorTextOptions}. Triggers a * "separatorChanged" event that passes on the new separator value. */ - changeSeparator: function () { - try { - var view = this; - if ( - !view.separatorTextOptions || - !view.separatorTextOptions.length || - !view.separatorText - ) { - return; - } - // Get the next separator text option - var currentIndex = view.separatorTextOptions.indexOf( - view.separatorText, - ), - nextIndex = currentIndex + 1; - if (currentIndex === -1 || !view.separatorTextOptions[nextIndex]) { - nextIndex = 0; - } - // Update the current separator text on the view - view.separatorText = view.separatorTextOptions[nextIndex]; - // Change the separator text for all of the separators in the view with an - // animation - var separatorEls = view.$el.find("." + view.separatorClass); - separatorEls.transition({ - animation: "pulse", - displayType: "inline-block", - duration: "250ms", - onComplete: function () { - $(this).text(view.separatorText); - }, - }); - // Trigger an event for parent views - view.trigger("separatorChanged", view.separatorText); - } catch (error) { - console.log( - "There was an error switching the separator text in a SearchableSelectView" + - ". Error details: " + - error, - ); + changeSeparator() { + const view = this; + if ( + !view.separatorTextOptions || + !view.separatorTextOptions.length || + !view.separatorText + ) { + return; } + // Get the next separator text option + const currentIndex = view.separatorTextOptions.indexOf( + view.separatorText, + ); + let nextIndex = currentIndex + 1; + if (currentIndex === -1 || !view.separatorTextOptions[nextIndex]) { + nextIndex = 0; + } + // Update the current separator text on the view + view.separatorText = view.separatorTextOptions[nextIndex]; + // Change the separator text for all of the separators in the view with an + // animation + const separatorEls = view.$el.find(`.${view.separatorClass}`); + separatorEls.transition({ + animation: "pulse", + displayType: "inline-block", + duration: "250ms", + onComplete() { + $(this).text(view.separatorText); + }, + }); + // Trigger an event for parent views + view.trigger("separatorChanged", view.separatorText); }, /** * updateMenu - Re-render the menu of options. Useful after changing * the options that are set on the view. */ - updateMenu: function () { - try { - var menu = $(this.template(this).trim()).find(".menu")[0].innerHTML; - this.$el.find(".menu").html(menu); - } catch (e) { - console.log( - "Failed to update a searchable select menu, error message: " + e, - ); - } + updateMenu() { + const menu = $(this.template(this).trim()).find(".menu")[0].innerHTML; + this.$el.find(".menu").html(menu); }, /** * postRender - Updates to the view once the dropdown UI has loaded */ - postRender: function () { - try { - var view = this; - view.trigger("postRender"); - - // Add tool tips for the description - this.$el.find(".item").each(function () { - view.addTooltip(this); - }); - - // Show an error message if the pre-selected options are not in the - // list of available options (only if user additions are not allowed) - if (!view.allowAdditions) { - if (view.selected && view.selected.length) { - var invalidOptions = []; - view.selected.forEach(function (item) { - if (!view.isValidOption(item)) { - invalidOptions.push(item); - } - }); - if (invalidOptions.length) { - var optionsString = '"' + invalidOptions.join(", ") + '"'; - var phrase = - invalidOptions.length === 1 - ? "is not a valid option" - : "are not valid options"; - var ending = ". Please change selection."; - var message = optionsString + " " + phrase + ending; - view.showMessage(message, "error", true); + postRender() { + const view = this; + view.trigger("postRender"); + + // Add tool tips for the description + this.$el.find(".item").each((_i, item) => { + view.addTooltip(item); + }); + + // Show an error message if the pre-selected options are not in the + // list of available options (only if user additions are not allowed) + if (!view.allowAdditions) { + if (view.selected && view.selected.length) { + const invalidOptions = []; + view.selected.forEach((item) => { + if (!view.isValidOption(item)) { + invalidOptions.push(item); } + }); + if (invalidOptions.length) { + const optionsString = `"${invalidOptions.join(", ")}"`; + const phrase = + invalidOptions.length === 1 + ? "is not a valid option" + : "are not valid options"; + const ending = ". Please change selection."; + const message = `${optionsString} ${phrase}${ending}`; + view.showMessage(message, "error", true); } } + } - // Set the selected values in the dropdown - this.$selectUI.dropdown("set exactly", view.selected); - this.$selectUI.dropdown("save defaults"); - this.enable(); - this.hideLoading(); - - // Make sub-menus if the option is configured in this view - if (this.submenuStyle === "popout") { - this.convertToPopout(); - } else if (this.submenuStyle === "accordion") { - this.convertToAccordion(); - } + // Set the selected values in the dropdown + this.$selectUI.dropdown("set exactly", view.selected); + this.$selectUI.dropdown("save defaults"); + this.enable(); + this.hideLoading(); + + // Make sub-menus if the option is configured in this view + if (this.submenuStyle === "popout") { + this.convertToPopout(); + } else if (this.submenuStyle === "accordion") { + this.convertToAccordion(); + } - // Convert interactive submenus to lists and hide empty categories - // when the user is searching for a term - if ( - ["popout", "accordion"].includes(view.submenuStyle) || - view.hideEmptyCategoriesOnSearch - ) { - this.$selectUI.find("input").on("keyup blur", function (e) { - inputVal = e.target.value; - - // When the input is NOT empty - if (inputVal !== "") { - // For interactive type submenus where items are sometimes - // hidden, show all the matching items when a user is searching - if (["popout", "accordion"].includes(view.submenuStyle)) { - view.convertToList(); - } - if (view.hideEmptyCategoriesOnSearch) { - view.hideEmptyCategories(); - } + // Convert interactive submenus to lists and hide empty categories + // when the user is searching for a term + if ( + ["popout", "accordion"].includes(view.submenuStyle) || + view.hideEmptyCategoriesOnSearch + ) { + this.$selectUI.find("input").on("keyup blur", (e) => { + const inputVal = e.target.value; + + // When the input is NOT empty + if (inputVal !== "") { + // For interactive type submenus where items are sometimes + // hidden, show all the matching items when a user is searching + if (["popout", "accordion"].includes(view.submenuStyle)) { + view.convertToList(); + } + if (view.hideEmptyCategoriesOnSearch) { + view.hideEmptyCategories(); + } - // When the input is EMPTY - } else { - // Convert back to sub-menus if the option is configured in this view - if (view.submenuStyle === "popout") { - view.convertToPopout(); - } else if (view.submenuStyle === "accordion") { - view.convertToAccordion(); - } - // Show all the category titles again, in cases some where hidden - if (view.hideEmptyCategoriesOnSearch) { - view.showAllCategories(); - } + // When the input is EMPTY + } else { + // Convert back to sub-menus if the option is configured in this view + if (view.submenuStyle === "popout") { + view.convertToPopout(); + } else if (view.submenuStyle === "accordion") { + view.convertToAccordion(); } - }); - } + // Show all the category titles again, in cases some where hidden + if (view.hideEmptyCategoriesOnSearch) { + view.showAllCategories(); + } + } + }); + } - // Trigger an event when the user focuses in searchable inputs - var inputEl = this.$el.find("input.search"); - if (inputEl) { - inputEl.off("focus"); - inputEl.on("focus", function (event) { - view.trigger("inputFocus", event); - }); - } - } catch (e) { - console.log( - "The searchable select post-render function failed, error message: " + - e, - ); + // Trigger an event when the user focuses in searchable inputs + const inputEl = this.$el.find("input.search"); + if (inputEl) { + inputEl.off("focus"); + inputEl.on("focus", (event) => { + view.trigger("inputFocus", event); + }); } }, /** * isValidOption - Checks if a value is one of the values given in view.options - * * @param {string} value The value to check - * @return {boolean} returns true if the value is one of the values given in + * @returns {boolean} returns true if the value is one of the values given in * view.options */ - isValidOption: function (value) { - try { - var view = this; - var options = view.options; - - // If there are no options set on the view, assume the value is invalid - if (!options || options.length === 0) { - return false; - } + isValidOption(value) { + const view = this; + let { options } = view; - // If the list of options doesn't have category headings, put it in the - // same format as options that do have headings. - if (Array.isArray(options)) { - options = { "": options }; - } + // If there are no options set on the view, assume the value is invalid + if (!options || options.length === 0) { + return false; + } - // Reduce the options object to just an Array of value and label strings - var validValues = _(options) - .chain() - .values() - .flatten() - .map(function (item) { - var items = []; - if (item.value !== undefined) { - items.push(item.value); - } - if (item.label !== undefined) { - items.push(item.label); - } - return items; - }) - .flatten() - .value(); - - return validValues.includes(value); - } catch (e) { - console.log( - "Failed to check if an option is valid in a Searchable Select View, error message: " + - e, - ); + // If the list of options doesn't have category headings, put it in the + // same format as options that do have headings. + if (Array.isArray(options)) { + options = { "": options }; } + + // Reduce the options object to just an Array of value and label strings + const validValues = _(options) + .chain() + .values() + .flatten() + .map((item) => { + const items = []; + if (item.value !== undefined) { + items.push(item.value); + } + if (item.label !== undefined) { + items.push(item.label); + } + return items; + }) + .flatten() + .value(); + + return validValues.includes(value); }, /** * addTooltip - Add a tooltip to a given element using the description in the * options object that's set on the view. - * * @param {HTMLElement} element The HTML element a tooltip should be added * @param {string} position how to position the tooltip - top | bottom | left | * right - * @return {jQuery} The element with a tooltip wrapped by jQuery + * @returns {jQuery} The element with a tooltip wrapped by jQuery */ - addTooltip: function (element, position = "bottom") { - try { - if (!element) { - return; - } - - // Find the description in the options object, using the data-value - // attribute set in the template. The data-value attribute is either - // the label, or the value, depending on if a value is provided. - var valueOrLabel = $(element).data("value"); - if (typeof valueOrLabel === "undefined") { - return; - } - if (typeof valueOrLabel === "boolean") { - valueOrLabel = valueOrLabel.toString(); - } - var opt = _.chain(this.options) - .values() - .flatten() - .find(function (option) { - return ( - option.label == valueOrLabel || option.value == valueOrLabel - ); - }) - .value(); - - if (!opt) { - return; - } - if (!opt.description) { - return; - } - - $(element) - .tooltip({ - title: opt.description, - placement: position, - container: "body", - delay: { - show: 900, - hide: 50, - }, - }) - .on("show.bs.popover", function () { - var $el = $(this); - // Allow time for the popup to be added to the DOM - setTimeout(function () { - // Then add a special class to identify - // these popups if they need to be removed. - $el.data("tooltip").$tip.addClass("search-select-tooltip"); - }, 10); - }); + addTooltip(element, position = "bottom") { + if (!element) { + return $(element); + } + // Find the description in the options object, using the data-value + // attribute set in the template. The data-value attribute is either + // the label, or the value, depending on if a value is provided. + let valueOrLabel = $(element).data("value"); + if (typeof valueOrLabel === "undefined") { return $(element); - } catch (e) { - console.log( - "Failed to add tooltip in a searchable select view, error message: " + - e, - ); } + if (typeof valueOrLabel === "boolean") { + valueOrLabel = valueOrLabel.toString(); + } + const opt = _.chain(this.options) + .values() + .flatten() + .find( + (option) => + option.label === valueOrLabel || option.value === valueOrLabel, + ) + .value(); + + if (!opt) { + return $(element); + } + if (!opt.description) { + return $(element); + } + + $(element) + .tooltip({ + title: opt.description, + placement: position, + container: "body", + delay: { + show: 900, + hide: 50, + }, + }) + .on("show.bs.popover", (e) => { + const $el = $(e.target); + // Allow time for the popup to be added to the DOM + setTimeout(() => { + // Add class to identify popups when they need to be removed. + $el.data("tooltip").$tip.addClass("search-select-tooltip"); + }, 10); + }); + + return $(element); }, /** * convertToPopout - Re-arrange the HTML to display category contents * as sub-menus that popout to the left or right of category titles */ - convertToPopout: function () { - try { - if (!this.$selectUI) { - return; - } - if (this.currentSubmenuMode === "popout") { - return; - } - this.currentSubmenuMode = "popout"; - this.$selectUI.addClass("popout-mode"); - var $headers = this.$selectUI.find(".header"); - if (!$headers || $headers.length === 0) { - return; + convertToPopout() { + if (!this.$selectUI) { + return; + } + if (this.currentSubmenuMode === "popout") { + return; + } + this.currentSubmenuMode = "popout"; + this.$selectUI.addClass("popout-mode"); + const $headers = this.$selectUI.find(".header"); + if (!$headers || $headers.length === 0) { + return; + } + $headers.each((_i, header) => { + const $header = $(header); + const $itemGroup = $().add($header.nextUntil(".header")); + const $itemAndHeaderGroup = $header.add($header.nextUntil(".header")); + const $icon = $header.next().find(".icon"); + if ($icon && $icon.length > 0) { + const $headerIcon = $icon.clone().addClass("popout-mode-icon").css({ + opacity: "0.9", + "margin-right": "1rem", + }); + $header.prepend($headerIcon[0]); } - $headers.each(function (i) { - var $itemGroup = $().add($(this).nextUntil(".header")); - var $itemAndHeaderGroup = $(this).add($(this).nextUntil(".header")); - var $icon = $(this).next().find(".icon"); - if ($icon && $icon.length > 0) { - var $headerIcon = $icon.clone().addClass("popout-mode-icon").css({ - opacity: "0.9", - "margin-right": "1rem", - }); - $(this).prepend($headerIcon[0]); - } - $itemAndHeaderGroup.wrapAll("
"); - $itemGroup.wrapAll("
"); - $(this).append( - "", - ); - }); - } catch (e) { - console.log( - "Failed to convert a Searchable Select interface to sub-menu mode, error message: " + - e, + $itemAndHeaderGroup.wrapAll("
"); + $itemGroup.wrapAll("
"); + $header.append( + "", ); - } + }); }, /** * convertToList - Re-arrange HTML to display the full list of options * in one static menu */ - convertToList: function () { - try { - if (!this.$selectUI) { - return; - } - if (this.currentSubmenuMode === "list") { - return; - } - this.currentSubmenuMode = "list"; - this.$selectUI.find(".popout-mode > *").unwrap(); - this.$selectUI.find(".accordion-mode > *").unwrap(); - this.$selectUI.find(".popout-mode-icon").remove(); - this.$selectUI.find(".accordion-mode-icon").remove(); - this.$selectUI.removeClass("popout-mode accordion-mode"); - } catch (e) { - console.log( - "Failed to convert a Searchable Select interface to list mode, error message: " + - e, - ); + convertToList() { + if (!this.$selectUI) { + return; + } + if (this.currentSubmenuMode === "list") { + return; } + this.currentSubmenuMode = "list"; + this.$selectUI.find(".popout-mode > *").unwrap(); + this.$selectUI.find(".accordion-mode > *").unwrap(); + this.$selectUI.find(".popout-mode-icon").remove(); + this.$selectUI.find(".accordion-mode-icon").remove(); + this.$selectUI.removeClass("popout-mode accordion-mode"); }, /** * convertToAccordion - Re-arrange the HTML to display category items * with expandable sections, similar to an accordion element. */ - convertToAccordion: function () { - try { - if (!this.$selectUI) { - return; - } - if (this.currentSubmenuMode === "accordion") { - return; - } - this.currentSubmenuMode = "accordion"; - this.$selectUI.addClass("accordion-mode"); - var $headers = this.$selectUI.find(".header"); - if (!$headers || $headers.length === 0) { - return; - } + convertToAccordion() { + if (!this.$selectUI) { + return; + } + if (this.currentSubmenuMode === "accordion") { + return; + } + this.currentSubmenuMode = "accordion"; + this.$selectUI.addClass("accordion-mode"); + const $headers = this.$selectUI.find(".header"); + if (!$headers || $headers.length === 0) { + return; + } - // Id to match the header to the - $headers.each(function (i) { - // Create an ID - var randomNum = Math.floor(Math.random() * 100000 + 1), - headerText = $(this).text().replace(/\W/g, ""), - id = headerText + randomNum; - - var $itemGroup = $().add($(this).nextUntil(".header")); - var $icon = $(this).next().find(".icon"); - if ($icon && $icon.length > 0) { - var $headerIcon = $icon - .clone() - .addClass("accordion-mode-icon") - .css({ - opacity: "0.9", - "margin-right": "1rem", - }); - $(this).prepend($headerIcon[0]); - $(this).wrap( - "
" + - " " + - buttonText + - "", + buttonClasses + + "'>" + + " " + + buttonText + + "", ); this.$el.prepend(editButton); @@ -499,8 +499,8 @@ define([ } catch (error) { console.log( "There was an error rendering the modal in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -520,8 +520,8 @@ define([ } catch (error) { console.log( "There was an error hiding the editing modal in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -594,8 +594,8 @@ define([ } catch (error) { console.log( "There was an error activating the modal buttons in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -681,8 +681,8 @@ define([ } catch (error) { console.log( "There was an error rendering the UI filter builders in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -717,8 +717,8 @@ define([ } catch (error) { console.log( "There was an error rendering a fields input in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -766,8 +766,8 @@ define([ } catch (error) { console.log( "There was an error handling a field change in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -809,8 +809,8 @@ define([ } catch (error) { console.log( "There was an error blocking a filter UI builder in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -842,8 +842,8 @@ define([ } catch (error) { console.log( "There was an error unblocking a filter UI builder in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -873,9 +873,9 @@ define([ } catch (error) { console.log( "There was an error showing a message to indicate that no filter builder " + - "UI options are allowed in a FilterEditorView" + - ". Error details: " + - error, + "UI options are allowed in a FilterEditorView" + + ". Error details: " + + error, ); } }, @@ -898,8 +898,8 @@ define([ } catch (error) { console.log( "There was an error hiding a message in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -922,7 +922,7 @@ define([ newModelAttrs = selectedUI.draftModel.toJSON(); // Set the new fields - newModelAttrs.fields = _.clone(this.fieldInput.selected); + newModelAttrs.fields = _.clone(this.fieldInput.model.get('selected')); // set the new fieldsOperator newModelAttrs.fieldsOperator = this.fieldInput.separatorText; @@ -952,8 +952,8 @@ define([ } catch (error) { console.log( "There was an error updating a Filter model in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -974,8 +974,8 @@ define([ } view.validationErrorEl = $( '

' + - view.text.validationError + - "

", + view.text.validationError + + "

", ); this.$el.find(".modal-body").prepend(view.validationErrorEl); @@ -991,8 +991,8 @@ define([ } catch (error) { console.log( "There was an error in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -1015,8 +1015,8 @@ define([ } catch (error) { console.log( "There was an error handling a click event in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -1117,8 +1117,8 @@ define([ } catch (error) { console.log( "There was an error switching filter types in a FilterEditorView." + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -1173,8 +1173,8 @@ define([ } catch (error) { console.log( "There was an error getting common model attributes in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, diff --git a/src/js/views/metadata/EML211View.js b/src/js/views/metadata/EML211View.js index 68487c9d0..a5d41c4ab 100644 --- a/src/js/views/metadata/EML211View.js +++ b/src/js/views/metadata/EML211View.js @@ -2535,7 +2535,7 @@ define([ const taxonSelects = view.taxonSelects; if (!taxonSelects || !taxonSelects.length) return; const selectedItems = taxonSelects - .map((select) => select.selected) + .map((select) => select.model.get('selected')) .flat(); if (!selectedItems || !selectedItems.length) return; const selectedItemObjs = selectedItems.map((item) => { diff --git a/src/js/views/searchSelect/AccountSelectView.js b/src/js/views/searchSelect/AccountSelectView.js index ccf66272f..a733d69ef 100644 --- a/src/js/views/searchSelect/AccountSelectView.js +++ b/src/js/views/searchSelect/AccountSelectView.js @@ -223,12 +223,13 @@ define([ // If we haven't started looking up user/organization names yet... if (typeof view.labelsToFetch === "undefined") { // Keep a count of the number of accounts we need to lookup - view.labelsToFetch = this.selected ? this.selected.length : 0; + const selected = this.model.get("selected"); + view.labelsToFetch = selected ? selected : 0; if (view.labelsToFetch > 0) { view.options = []; - view.selected.forEach(function (accountId) { + selected.forEach(function (accountId) { MetacatUI.appLookupModel.getAccountsAutocomplete( { term: accountId }, function (results) { diff --git a/src/js/views/searchSelect/NodeSelectView.js b/src/js/views/searchSelect/NodeSelectView.js index 5287d5d44..24b0fbb4c 100644 --- a/src/js/views/searchSelect/NodeSelectView.js +++ b/src/js/views/searchSelect/NodeSelectView.js @@ -63,39 +63,36 @@ define([ * @param {Object} options - A literal object with options to pass to the view */ initialize: function (options) { - try { - // Ensure the query fields are cached - if (typeof MetacatUI.nodeModel === "undefined") { - MetacatUI.nodeModel = new NodeModel(); - } + const opts = options || {}; + // Ensure the query fields are cached + if (typeof MetacatUI.nodeModel === "undefined") { + MetacatUI.nodeModel = new NodeModel(); + } - var members = MetacatUI.nodeModel.get("members"); + var members = MetacatUI.nodeModel.get("members"); - // Maps the nodeModel member attributes (keys) to the searchSelect - // dropdown options properties (values) - var map = Object.entries({ - logo: "image", - name: "label", - description: "description", - identifier: "value", - }); + // Maps the nodeModel member attributes (keys) to the searchSelect + // dropdown options properties (values) + var map = Object.entries({ + logo: "image", + name: "label", + description: "description", + identifier: "value", + }); - this.options = []; + const selectOptions = []; - // Convert nodeModel members to options of searchSelect - members.forEach((member, i) => { - this.options[i] = {}; - for (const [oldName, newName] of map) { - this.options[i][newName] = member[oldName]; - } - }); + // Convert nodeModel members to options of searchSelect + members.forEach((member, i) => { + selectOptions[i] = {}; + for (const [oldName, newName] of map) { + selectOptions[i][newName] = member[oldName]; + } + }); - SearchableSelect.prototype.initialize.call(this, options); - } catch (e) { - console.log( - "Failed to initialize a Node Select View, error message: " + e, - ); - } + opts.options = selectOptions; + + SearchableSelect.prototype.initialize.call(this, opts); }, }, ); diff --git a/src/js/views/searchSelect/ObjectFormatSelectView.js b/src/js/views/searchSelect/ObjectFormatSelectView.js index 9fc62340b..0d88268ca 100644 --- a/src/js/views/searchSelect/ObjectFormatSelectView.js +++ b/src/js/views/searchSelect/ObjectFormatSelectView.js @@ -62,59 +62,54 @@ define([ */ allowAdditions: true, + /** @inheritdoc */ + initialize: function () { + this.getObjectFormats(); + SearchableSelect.prototype.initialize.call(this); + }, + /** - * Render the view - * - * @return {ObjectFormatSelect} Returns the view - * @since 2.15.0 + * Fetch the object formats from the DataONE API and update the + * select options on the model + * @since 0.0.0 */ - render: function () { - try { - var view = this; - - // Ensure the object formats are cached - if (typeof MetacatUI.objectFormats === "undefined") { - MetacatUI.objectFormats = new ObjectFormats(); - } - - // If not already synced, then get the object formats - if ( - MetacatUI.objectFormats.length === 0 && - !( - MetacatUI.objectFormats._events && - MetacatUI.objectFormats._events.sync - ) - ) { - this.listenToOnce( - MetacatUI.objectFormats, - "sync error", - view.render, - ); - MetacatUI.objectFormats.fetch(); - return; - } - - var formatIds = MetacatUI.objectFormats.toJSON(); - var options = _.chain(formatIds) - // Since the Query Rules automatically include a rule for formatType = - // "METADATA", only allow filtering datasets by specific metadata type. - .where({ formatType: "METADATA" }) - .map(function (format) { - return { - label: format.formatName, - value: format.formatId, - description: format.formatId, - }; - }) - .value(); - - this.options = options; - - SearchableSelect.prototype.render.call(view); - } catch (error) { - console.log("Error rendering an Object Format Select View."); - console.log(error); + getObjectFormats: function () { + const view = this; + // Ensure the object formats are cached + if (typeof MetacatUI.objectFormats === "undefined") { + MetacatUI.objectFormats = new ObjectFormats(); } + // If not already synced, then get the object formats + if ( + MetacatUI.objectFormats.length === 0 && + !( + MetacatUI.objectFormats._events && + MetacatUI.objectFormats._events.sync + ) + ) { + view.listenToOnce( + MetacatUI.objectFormats, + "sync error", + view.getObjectFormats, + ); + MetacatUI.objectFormats.fetch(); + return; + } + var formatIds = MetacatUI.objectFormats.toJSON(); + var options = _.chain(formatIds) + // Since the Query Rules automatically include a rule for formatType = + // "METADATA", only allow filtering datasets by specific metadata type. + .where({ formatType: "METADATA" }) + .map(function (format) { + return { + label: format.formatName, + value: format.formatId, + description: format.formatId, + }; + }) + .value(); + + view.updateOptions(options); }, }, ); diff --git a/src/js/views/searchSelect/QueryFieldSelectView.js b/src/js/views/searchSelect/QueryFieldSelectView.js index ba3f48877..49f95c574 100644 --- a/src/js/views/searchSelect/QueryFieldSelectView.js +++ b/src/js/views/searchSelect/QueryFieldSelectView.js @@ -26,7 +26,6 @@ define([ /** * className - the class names for this view element - * * @type {string} */ className: SearchableSelect.prototype.className + " query-field-select", @@ -112,52 +111,27 @@ define([ /** * Creates a new QueryFieldSelectView - * @param {Object} options - A literal object with options to pass to the view + * @param {Object} opts - A literal object with options to pass to the view */ - initialize: function (options) { - try { - // Ensure the query fields are cached - if (typeof MetacatUI.queryFields === "undefined") { - MetacatUI.queryFields = new QueryFields(); - MetacatUI.queryFields.fetch(); - } - SearchableSelect.prototype.initialize.call(this, options); - } catch (e) { - console.log( - "Failed to initialize a Query Field Select View, error message: " + - e, - ); + initialize: function (opts) { + const options = opts || {}; + // Ensure the query fields are cached + if (typeof MetacatUI.queryFields === "undefined") { + MetacatUI.queryFields = new QueryFields(); + MetacatUI.queryFields.fetch(); } - }, - /** - * postRender - Updates the view once the dropdown UI has loaded. Processes the - * QueryFields given the options passed to this view, then updates the menu and - * selection. Processing the fields takes some time, which is why we allow the - * view to render before starting that process. This prevents slowing down the - * rendering of parent views. - */ - postRender: function () { - try { - var view = this; - _.defer(function () { - view.processFields(); - view.updateMenu(); - // With the new menu in place, show the pre-selected values. Silent is set - // to true so that it doesn't trigger an update of the model. Defer to make - // sure the menu elements are attached. - _.defer(function () { - view.changeSelection(view.selected, true); - }); - SearchableSelect.prototype.postRender.call(view); - }); - } catch (error) { - console.log( - "Post-render failed in a QueryFieldSelectView." + - " Error details: " + - error, - ); - } + // TODO: Until we move these fields to a model, they are set on the view for this subclass + const modelAttrNames = ['allowMulti', 'allowAdditions', 'clearable', 'submenuStyle', 'hideEmptyCategoriesOnSearch']; + modelAttrNames.forEach(attrName => { + if (options[attrName] === undefined) { + options[attrName] = this[attrName]; + } + }); + + SearchableSelect.prototype.initialize.call(this, options); + + this.processFields(); }, /** @@ -166,129 +140,119 @@ define([ * @since 2.17.0 */ processFields: function () { - try { - var view = this; - - // Ensure the query fields are cached for the Query Field Select - // View and the Query Rule View - if ( - typeof MetacatUI.queryFields === "undefined" || - MetacatUI.queryFields.length === 0 - ) { - if (typeof MetacatUI.queryFields === "undefined") { - MetacatUI.queryFields = new QueryFields(); - } - this.listenToOnce( - MetacatUI.queryFields, - "sync", - this.processFields, - ); - MetacatUI.queryFields.fetch(); - return; - } - // Convert the queryFields collection to an object formatted for the - // SearchableSelect view. - var fieldsJSON = MetacatUI.queryFields.toJSON(); - - // Process & add additional fields set on this view (these are fields not - // retrieved from the query service API) - if (this.addFields && Array.isArray(this.addFields)) { - // For each added field, find the icon and category order from the already - // existing fields with the same category. - this.addFields = _.map( - this.addFields, - function (field) { - if (field.category) { - var categoryInfo = _.findWhere(fieldsJSON, { - category: field.category, - }); - ["icon", "categoryOrder"].forEach(function (prop) { - if (!field[prop]) { - field[prop] = categoryInfo[prop]; - } - }); - } - return field; - }, - this, - ); - // Add the additional fields to the array of fields fetched from the - // query service API - fieldsJSON = fieldsJSON.concat(this.addFields); + var view = this; + + // Ensure the query fields are cached for the Query Field Select + // View and the Query Rule View + if ( + typeof MetacatUI.queryFields === "undefined" || + MetacatUI.queryFields.length === 0 + ) { + if (typeof MetacatUI.queryFields === "undefined") { + MetacatUI.queryFields = new QueryFields(); } + this.listenToOnce( + MetacatUI.queryFields, + "sync", + this.processFields, + ); + MetacatUI.queryFields.fetch(); + return; + } - // Move common fields to the top of the menu, outside of any - // category headers, so that they are easy to find - if (this.commonFields && Array.isArray(this.commonFields)) { - this.commonFields.forEach(function (commonFieldName) { - var i = _.findIndex(fieldsJSON, { name: commonFieldName }); - if (i > 0) { - // If the category name is an empty string, no header will - // be created in the menu - fieldsJSON[i].category = ""; - // The min categoryOrder in the QueryFields collection is 1 - fieldsJSON[i].categoryOrder = 0; - fieldsJSON[i].icon = "star"; + // Convert the queryFields collection to an object formatted for the + // SearchableSelect view. + var fieldsJSON = MetacatUI.queryFields.toJSON(); + // Process & add additional fields set on this view (these are fields not + // retrieved from the query service API) + if (this.addFields && Array.isArray(this.addFields)) { + // For each added field, find the icon and category order from the already + // existing fields with the same category. + this.addFields = _.map( + this.addFields, + function (field) { + if (field.category) { + var categoryInfo = _.findWhere(fieldsJSON, { + category: field.category, + }); + ["icon", "categoryOrder"].forEach(function (prop) { + if (!field[prop]) { + field[prop] = categoryInfo[prop]; + } + }); } - }); - } + return field; + }, + this, + ); + // Add the additional fields to the array of fields fetched from the + // query service API + fieldsJSON = fieldsJSON.concat(this.addFields); + } - // Filter out non-searchable fields (if option is true), - // and fields that should be excluded - var processedFields = _(fieldsJSON) - .chain() - .sortBy("categoryOrder") - .filter(function (filter) { - if (this.excludeNonSearchable) { - if (["false", false].includes(filter.searchable)) { - return false; - } + // Move common fields to the top of the menu, outside of any + // category headers, so that they are easy to find + if (this.commonFields && Array.isArray(this.commonFields)) { + this.commonFields.forEach(function (commonFieldName) { + var i = _.findIndex(fieldsJSON, { name: commonFieldName }); + if (i > 0) { + // If the category name is an empty string, no header will + // be created in the menu + fieldsJSON[i].category = ""; + // The min categoryOrder in the QueryFields collection is 1 + fieldsJSON[i].categoryOrder = 0; + fieldsJSON[i].icon = "star"; + } + }); + } + + // Filter out non-searchable fields (if option is true), + // and fields that should be excluded + var processedFields = _(fieldsJSON) + .chain() + .sortBy("categoryOrder") + .filter(function (filter) { + if (this.excludeNonSearchable) { + if (["false", false].includes(filter.searchable)) { + return false; } - if (this.excludeFields && this.excludeFields.length) { - if (this.excludeFields.includes(filter.name)) { - return false; - } + } + if (this.excludeFields && this.excludeFields.length) { + if (this.excludeFields.includes(filter.name)) { + return false; } - return true; - }, this) - .map(view.fieldToOption) - .groupBy("categoryOrder") - .value(); - - // Rename the grouped categories - for (const [key, value] of Object.entries(processedFields)) { - processedFields[value[0].category] = value; - delete processedFields[key]; - } + } + return true; + }, this) + .map(view.fieldToOption) + .groupBy("categoryOrder") + .value(); + + // Rename the grouped categories + for (const [key, value] of Object.entries(processedFields)) { + processedFields[value[0].category] = value; + delete processedFields[key]; + } - // Sort items alphabetically for the specified categories - if ( - this.categoriesToAlphabetize && - this.categoriesToAlphabetize.length - ) { - this.categoriesToAlphabetize.forEach(function (categoryName) { - // Sort by category label - processedFields[categoryName].sort(function (a, b) { - // Ignore upper and lowercase - var nameA = a.label.toUpperCase(); - var nameB = b.label.toUpperCase(); - if (nameA < nameB) return -1; - if (nameA > nameB) return 1; - return 0; - }); + // Sort items alphabetically for the specified categories + if ( + this.categoriesToAlphabetize && + this.categoriesToAlphabetize.length + ) { + this.categoriesToAlphabetize.forEach(function (categoryName) { + // Sort by category label + processedFields[categoryName].sort(function (a, b) { + // Ignore upper and lowercase + var nameA = a.label.toUpperCase(); + var nameB = b.label.toUpperCase(); + if (nameA < nameB) return -1; + if (nameA > nameB) return 1; + return 0; }); - } - - // Set the formatted fields on the view - this.options = processedFields; - } catch (error) { - console.log( - "There was an error organizing the Fields in a QueryFieldSelectView" + - " Error details: " + - error, - ); + }); } + this.model.updateOptions(processedFields); }, /** @@ -333,7 +297,7 @@ define([ // attribute set in the template. The data-value attribute is either // the label, or the value, depending on if a value is provided. var valueOrLabel = $(element).data("value"), - opt = _.chain(this.options) + opt = _.chain(this.model.optionsAsJSON()) .values() .flatten() .find(function (option) { @@ -422,41 +386,31 @@ define([ * @return {boolean} returns true if the value is one of the values given in view.options */ isValidOption: function (value) { - try { - var view = this; - - // First check if the value is one of the fields that's excluded. - if (view.excludeFields.includes(value)) { - // If it is, then add it to the list of options - var newField = MetacatUI.queryFields.findWhere({ - name: value, - }); - if (newField) { - newField = view.fieldToOption(newField.toJSON()); - } - view.options[newField.category].push(newField); - view.updateMenu(); - // Make sure the new menu is attached before updating the selections - setTimeout(function () { - // If the selected value has been removed, re-add it. - if (!view.selected.includes(value)) { - view.selected.push(value); - } - view.changeSelection(view.selected, (silent = true)); - }, 25); - return true; - } else { - var isValid = SearchableSelect.prototype.isValidOption.call( - view, - value, - ); - return isValid; + + var view = this; + + // First check if the value is one of the fields that's excluded. + if (view.excludeFields.includes(value)) { + // If it is, then add it to the list of options + var newField = MetacatUI.queryFields.findWhere({ + name: value, + }); + if (newField) { + newField = view.fieldToOption(newField.toJSON()); } - } catch (e) { - console.log( - "Failed to check if option is valid in a Query Field Select View, error message: " + - e, + view.options[newField.category].push(newField); + view.updateMenu(); + // Make sure the new menu is attached before updating the selections + setTimeout(function () { + view.addSelected(value, true); + }, 25); + return true; + } else { + var isValid = SearchableSelect.prototype.isValidOption.call( + view, + value, ); + return isValid; } }, }, diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 37eaba067..67f7e390c 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -2,6 +2,7 @@ define([ "jquery", "underscore", "backbone", + "models/searchSelect/SearchSelect", "semanticUItransition", `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, "semanticUIdropdown", @@ -11,6 +12,7 @@ define([ $, _, Backbone, + SearchSelect, Transition, TransitionCSS, Dropdown, @@ -55,56 +57,6 @@ define([ */ inputLabel: "Select a value", - /** - * Whether to allow users to select more than one value - * @type {boolean} - */ - allowMulti: true, - - /** - * Setting to true gives users the ability to add their own options that - * are not listed in this.options. This can work with either single - * or multiple search select dropdowns - * @type {boolean} - */ - allowAdditions: false, - - /** - * Whether the dropdown value can be cleared by the user after being - * selected. - * @type {boolean} - */ - clearable: true, - - /** - * When items are grouped within categories, this attribute determines how to display the items - * within each category. - * @type {string} - * @example - * // display the items in a traditional, non-interactive list below category titles - * "list" - * @example - * // initially show only a list of category titles, and popout - * // a submenu on the left or right when the user hovers over - * // or touches a category (can lead to the sub-menu being hidden - * // on mobile devices if the element is wide) - * "popout" - * @example - * // initially show only a list of category titles, and expand - * // the list of items below each category when a user clicks - * // on the category title, much like an "accordion" element. - * "accordion" - * @default "list" - */ - submenuStyle: "list", - - /** - * Set to false to always display category headers in the dropdown, - * even if there are no results in that category when a user is searching. - * @type {boolean} - */ - hideEmptyCategoriesOnSearch: true, - /** * The maximum width of images used for each option, in pixels * @type {number} @@ -235,14 +187,6 @@ define([ */ options: [], - /** - * The values that a user has selected. If provided to the view upon - * initialization, the values will be pre-selected. Selected values must - * exist as a label in the options {@link SearchableSelect#options} - * @type {string[]} - */ - selected: [], - /** * Can be set to an object to specify API settings for retrieving remote selection * menu content from an API endpoint. Details of what can be set here are @@ -275,26 +219,52 @@ define([ MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); - // If pre-selected values that are passed to this view are also attached to a - // model (e.g. when they were passed to this view as {selected: - // parentView.model.get("values")}), then it's important that we use a clone - // instead. Otherwise this view may silently update the model, and important - // events may not be triggered. - if (options.selected) { - options.selected = _.clone(options.selected); + const { modelAttrs, viewAttrs } = this.splitModelViewOptions(options); + + if (!options.model) { + this.createModel(modelAttrs); } - // If pre-selected values that are passed to this view are also attached to a - // model (e.g. when they were passed to this view as {selected: - // parentView.model.get("values")}), then it's important that we use a clone - // instead. Otherwise this view may silently update the model, and important - // events may not be triggered. - if (options.selected) { - options.selected = _.clone(options.selected); + // Set the view attributes + _.extend(this, viewAttrs); + + }, + + /** + * Split the options passed to the view into model and view attributes. + * @param {object} options - The options passed to the view + * @returns {object} An object with two keys: modelAttrs and viewAttrs + * @since 0.0.0 + */ + splitModelViewOptions(options) { + const modelAttrNames = ['allowMulti', 'allowAdditions', 'clearable', 'submenuStyle', 'hideEmptyCategoriesOnSearch', 'selected', 'options']; + const modelAttrs = _.pick(options, modelAttrNames); + const viewAttrs = _.omit(options, modelAttrNames); + return { modelAttrs, viewAttrs }; + }, + + /** + * Create a new SearchSelect model and set it on the view. If a model already + * exists, it will be destroyed. Sets a listener to update the menu when the + * options in the model change. + * @options {object} options - The options to pass to the model + * @since 0.0.0 + */ + createModel(options) { + + const modelAttrs = options || {}; + + if (this.model) { + this.stopListening(this.model); + this.model.destroy(); } - // Get all the options and apply them to this view - _.extend(this, options); + if (modelAttrs.selected) { + // Selected values can be part of other models + modelAttrs.selected = _.clone(options.selected); + } + this.model = new SearchSelect(modelAttrs); + this.listenTo(this.model, "change:options", this.updateMenu); }, /** @@ -314,7 +284,7 @@ define([ } // Render the template using the view attributes - this.$el.html(this.template(this)); + this.$el.html(this.renderTemplate()); // Start the dropdown in a disabled state. // This allows us to pre-select values without triggering a change @@ -335,16 +305,14 @@ define([ duration: 90, forceSelection: false, ignoreDiacritics: true, - clearable: view.clearable, - allowAdditions: view.allowAdditions, + clearable: view.model.get('clearable'), + allowAdditions: view.model.get('allowAdditions'), hideAdditions: false, allowReselection: true, onRemove(removedValue) { // Callback when a value is removed *for multi-select inputs only* // Remove the value from the selected array - view.selected = view.selected.filter( - (value) => value !== removedValue, - ); + view.model.removeSelected(removedValue); }, onLabelCreate(value, _text) { // Callback when a label is created *for multi-select inputs only* @@ -353,9 +321,7 @@ define([ // the onLabelCreate callback instead of in the onAdd callback because // we would like to update the selected array before we create the // separator element (below). - if (!view.selected.includes(value)) { - view.selected.push(value); - } + view.model.addSelected(value); // Add a separator between labels if required. let label = this; if (view.separatorRequired.call(view)) { @@ -404,14 +370,14 @@ define([ // Update values for single-select inputs (multi-select are updated // using the onLabelCreate and onRemove callbacks) - if (!view.allowMulti) { - view.selected = [values]; + if (!view.model.get('allowMulti')) { + view.model.setSelected(values); } // Trigger an event if items are selected after the UI has been rendered // (It is set as disabled until fully rendered). if (!$(this).hasClass("disabled")) { - const newValues = _.clone(view.selected); + const newValues = _.clone(view.model.get('selected')); view.trigger("changeSelection", newValues); } @@ -427,7 +393,7 @@ define([ const textEl = view.$selectUI.find(".text:not(.default),.label"); // Single select text element will not have the value attribute, add // it so that we can find the matching description for the tooltip - if (!textEl.data("value") && !view.allowMulti) { + if (!textEl.data("value") && !view.model.get('allowMulti')) { textEl.data("value", values); } if (textEl) { @@ -452,8 +418,7 @@ define([ * @since 2.24.0 */ updateOptions(options) { - this.options = options; - this.render(); + this.model.updateOptions(options); }, /** @@ -464,15 +429,17 @@ define([ * @since 2.15.0 */ separatorRequired() { + // TODO - use the model method instead of the view method + const selected = this.model.get('selected'); if ( // Separators not required if only one selection is allowed - !this.allowMulti || + !this.model.get('allowMulti') || // Need separator text to create a separator element !this.separatorText || // Need the list of selected values to determine the value's position - !this.selected || + !selected || // Separator is only required between two or more values - this.selected.length <= 1 || + selected.length <= 1 || // Separator is only required after the first element has been added this.$selectUI.find(".label").length === 0 ) { @@ -591,10 +558,24 @@ define([ * the options that are set on the view. */ updateMenu() { - const menu = $(this.template(this).trim()).find(".menu")[0].innerHTML; + const menu = $(this.renderTemplate().trim()).find(".menu")[0].innerHTML; this.$el.find(".menu").html(menu); }, + /** + * Renders the template for the view + * @returns {string} The HTML for the view + * @since 0.0.0 + */ + renderTemplate() { + const templateOptionsFromModel = { + allowMulti: this.model.get('allowMulti'), + options: this.model.optionsAsJSON(true), + }; + const templateOptions = _.extend({}, this, templateOptionsFromModel); + return this.template(templateOptions); + }, + /** * postRender - Updates to the view once the dropdown UI has loaded */ @@ -607,12 +588,14 @@ define([ view.addTooltip(item); }); + const selected = view.model.get('selected'); + // Show an error message if the pre-selected options are not in the // list of available options (only if user additions are not allowed) - if (!view.allowAdditions) { - if (view.selected && view.selected.length) { + if (!view.model.get('allowAdditions')) { + if (selected && selected.length) { const invalidOptions = []; - view.selected.forEach((item) => { + selected.forEach((item) => { if (!view.isValidOption(item)) { invalidOptions.push(item); } @@ -631,23 +614,26 @@ define([ } // Set the selected values in the dropdown - this.$selectUI.dropdown("set exactly", view.selected); + this.$selectUI.dropdown("set exactly", selected); this.$selectUI.dropdown("save defaults"); this.enable(); this.hideLoading(); + const subMenuStyle = this.model.get('submenuStyle'); + const hideEmptyCategoriesOnSearch = this.model.get('hideEmptyCategoriesOnSearch'); + // Make sub-menus if the option is configured in this view - if (this.submenuStyle === "popout") { + if (subMenuStyle === "popout") { this.convertToPopout(); - } else if (this.submenuStyle === "accordion") { + } else if (subMenuStyle === "accordion") { this.convertToAccordion(); } // Convert interactive submenus to lists and hide empty categories // when the user is searching for a term if ( - ["popout", "accordion"].includes(view.submenuStyle) || - view.hideEmptyCategoriesOnSearch + ["popout", "accordion"].includes(subMenuStyle) || + hideEmptyCategoriesOnSearch ) { this.$selectUI.find("input").on("keyup blur", (e) => { const inputVal = e.target.value; @@ -656,23 +642,23 @@ define([ if (inputVal !== "") { // For interactive type submenus where items are sometimes // hidden, show all the matching items when a user is searching - if (["popout", "accordion"].includes(view.submenuStyle)) { + if (["popout", "accordion"].includes(subMenuStyle)) { view.convertToList(); } - if (view.hideEmptyCategoriesOnSearch) { + if (hideEmptyCategoriesOnSearch) { view.hideEmptyCategories(); } // When the input is EMPTY } else { // Convert back to sub-menus if the option is configured in this view - if (view.submenuStyle === "popout") { + if (subMenuStyle === "popout") { view.convertToPopout(); - } else if (view.submenuStyle === "accordion") { + } else if (subMenuStyle === "accordion") { view.convertToAccordion(); } // Show all the category titles again, in cases some where hidden - if (view.hideEmptyCategoriesOnSearch) { + if (hideEmptyCategoriesOnSearch) { view.showAllCategories(); } } @@ -692,24 +678,18 @@ define([ /** * isValidOption - Checks if a value is one of the values given in view.options * @param {string} value The value to check - * @returns {boolean} returns true if the value is one of the values given in + * @returns {boolean} returns true if the value is one of the values given in * view.options */ isValidOption(value) { const view = this; - let { options } = view; + let options = view.model.optionsAsJSON(true) // If there are no options set on the view, assume the value is invalid if (!options || options.length === 0) { return false; } - // If the list of options doesn't have category headings, put it in the - // same format as options that do have headings. - if (Array.isArray(options)) { - options = { "": options }; - } - // Reduce the options object to just an Array of value and label strings const validValues = _(options) .chain() @@ -926,12 +906,32 @@ define([ /** * showAllCategories - In the searchable select interface, show all - * category headers that were previously empty + * category headers that we re previously empty */ showAllCategories() { this.$selectUI.find(".header:hidden").show(); }, + /** + * Add a value to the selected array in the model to reflect the user's + * selection in the interface + * @param {string} newValue The value to add to the selected array + * @param {boolean} silent Set to true to disable the select interface + * and prevent the model from triggering a change event + * @since 0.0.0 + */ + addSelected(newValue, silent = false) { + if (silent === true) { + view.disable(); + } + this.model.addSelected(newValue, { silent: silent }); + const selected = this.model.get('selected'); + this.$selectUI.dropdown("set selected", selected); + if (silent === true) { + view.enable(); + } + }, + /** * changeSelection - Set selected values in the interface * @param {string[]} newValues - An array of strings to select @@ -946,10 +946,10 @@ define([ return; } const view = this; - this.selected = newValues; if (silent === true) { view.disable(); } + this.model.setSelected(newValues, { silent: silent }); this.$selectUI.dropdown("set exactly", newValues); if (silent === true) { view.enable(); From 6dc2860bb176881add8e186a386823e3d663a1de Mon Sep 17 00:00:00 2001 From: Alona Kosobokova Date: Tue, 16 Jul 2024 15:50:25 -0700 Subject: [PATCH 064/169] added showOpacitySlider fot layer configs --- src/js/models/maps/assets/MapAsset.js | 1 + src/js/views/maps/LayerDetailsView.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/js/models/maps/assets/MapAsset.js b/src/js/models/maps/assets/MapAsset.js index 03a01b905..1c0bd2a1d 100644 --- a/src/js/models/maps/assets/MapAsset.js +++ b/src/js/models/maps/assets/MapAsset.js @@ -130,6 +130,7 @@ define([ status: null, statusDetails: null, hideInLayerList: false, + showOpacitySlider: true, }; }, diff --git a/src/js/views/maps/LayerDetailsView.js b/src/js/views/maps/LayerDetailsView.js index 6ad60ff98..27a1294a9 100644 --- a/src/js/views/maps/LayerDetailsView.js +++ b/src/js/views/maps/LayerDetailsView.js @@ -216,6 +216,11 @@ define([ // Render each section in the Details panel this.renderedSections = _.clone(this.sections); + + // Remove and do not render opacity section if showOpacitySlider is false + if (model.get("showOpacitySlider") === false) { + this.renderedSections = this.renderedSections.filter(item => item.label !== 'Opacity') + } this.renderedSections.forEach(function (section) { var detailSection = new LayerDetailView({ From d705ab56ca71a2b7468915021fc00c11a210a143 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 17 Jul 2024 11:20:30 -0400 Subject: [PATCH 065/169] Move more logic from SearchSelectView to model - separator and menu style changes are now handled by the SearchSelect model. Issue #2253 --- .../searchSelect/SearchSelectOptions.js | 14 +- src/js/models/searchSelect/SearchSelect.js | 161 +++- src/js/themes/arctic/routers/router.js | 2 +- src/js/views/filters/FilterEditorView.js | 104 +-- src/js/views/metadata/EML211View.js | 2 +- src/js/views/queryBuilder/QueryBuilderView.js | 160 ++-- src/js/views/queryBuilder/QueryRuleView.js | 129 ++-- src/js/views/searchSelect/NodeSelectView.js | 2 +- .../searchSelect/QueryFieldSelectView.js | 21 +- .../searchSelect/SearchableSelectView.js | 731 ++++++++---------- 10 files changed, 676 insertions(+), 650 deletions(-) diff --git a/src/js/collections/searchSelect/SearchSelectOptions.js b/src/js/collections/searchSelect/SearchSelectOptions.js index 321cecc81..0ac15745b 100644 --- a/src/js/collections/searchSelect/SearchSelectOptions.js +++ b/src/js/collections/searchSelect/SearchSelectOptions.js @@ -14,7 +14,6 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( const SearchSelectOptions = Backbone.Collection.extend({ /** @lends SearchSelectOptions.prototype */ - /** @inheritdoc */ model: SearchSelectOption, @@ -43,7 +42,7 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( * { label: "Option 4" } * }); */ - initialize(_models, _options) { }, + initialize(_models, _options) {}, /** * Parses the incoming options data. This can handle both an array of options @@ -85,12 +84,15 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( }, /** - * Checks if a value is one of the values in the collection. - * @param {string} value - The value to check for. + * Checks if a given matches either a label or value in the collection of options. + * @param {string} value - The value or label to check for. * @returns {boolean} - Returns true if the value is found in the collection, false otherwise. */ isValidValue(value) { - return this.some((option) => option.get("value") === value); + return this.some( + (option) => + option.get("value") === value || option.get("label") === value, + ); }, /** @@ -115,7 +117,7 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( }); return categorizedOptions; - } + }, }); return SearchSelectOptions; diff --git a/src/js/models/searchSelect/SearchSelect.js b/src/js/models/searchSelect/SearchSelect.js index 1ec5b42e6..f03ad8b13 100644 --- a/src/js/models/searchSelect/SearchSelect.js +++ b/src/js/models/searchSelect/SearchSelect.js @@ -17,14 +17,33 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( /** * Default properties for the SearchableSelectModel. - * @property {boolean} allowMulti - Whether to allow users to select more than one value. - * @property {boolean} allowAdditions - Allows users to add their own options not listed in options. - * @property {boolean} clearable - Whether the dropdown can be cleared by the user after selection. - * @property {string} submenuStyle - Determines the display style of items in categories ("list", "popout", "accordion"). - * @property {boolean} hideEmptyCategoriesOnSearch - Displays category headers in the dropdown even with no results. - * @property {SearchSelectOptions} options - Collection of SearchSelectOption models that represent choices a user can select from. - * @property {string[]} selected - Currently selected values in the dropdown. - * @property {object|boolean} apiSettings - Settings for retrieving data via API, false if not using remote content. + * @property {boolean} allowMulti - Whether to allow users to select more + * than one value. + * @property {boolean} allowAdditions - Allows users to add their own + * options not listed in options. + * @property {boolean} clearable - Whether the dropdown can be cleared by + * the user after selection. + * @property {string} submenuStyle - Determines the display style of items + * in categories ("list", "popout", "accordion"). + * @property {boolean} hideEmptyCategoriesOnSearch - Displays category + * headers in the dropdown even with no results. + * @property {SearchSelectOptions} options - Collection of + * SearchSelectOption models that represent choices a user can select from. + * @property {string[]} selected - Currently selected values in the + * dropdown. + * @property {string[]|boolean} separatorOptions - For select inputs where + * multiple values are allowed (allowMulti is true), a list of options that + * can be used as separators between values. To turn off this feature, set + * to false or an empty array. + * @property {string} separator - The current separator to use between + * selected values, must be one of the separatorOptions. + * @property {string} searchTerm - The current search term being used to + * filter options, if any. This will be updated by the view. + * @property {string} originalSubmenuStyle - A reference to the original + * submenu style since the submenu style can change during search. This will + * be set automatically by the model during initialization. + * @property {object|boolean} apiSettings - Settings for retrieving data via + * API, false if not using remote content. */ defaults: { allowMulti: true, @@ -34,28 +53,65 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( hideEmptyCategoriesOnSearch: true, options: new SearchSelectOptions(), selected: [], + separatorOptions: ["AND", "OR"], + separator: "", + searchTerm: "", + originalSubmenuStyle: "", apiSettings: false, }, + /** @inheritdoc */ initialize(attributes, _options) { const optionsData = attributes?.options; - // Select options must be parsed if they are not already SearchSelectOption collections + // Select options must be parsed if they are not already + // SearchSelectOption collections if (optionsData && !(optionsData instanceof SearchSelectOptions)) { this.updateOptions(optionsData); - }; + } + // Save a reference to the original submenu style to revert to when search + // term is removed + const originalSubmenuStyle = this.get("submenuStyle"); + this.set("originalSubmenuStyle", originalSubmenuStyle); + // Set a listener to change the submenu style when a user is searching + if (originalSubmenuStyle !== "list") { + this.changeSubmenuOnSearch(); + } }, + /** + * Set a listener to change the current submenu style to "list" when a + * search term is present, and revert to the original style when the search + * term is removed. This is to ensure that the dropdown displays the list + * style with only the search results when a user is searching. This is only + * necessary if the submenu style is not already set to "list". + */ + changeSubmenuOnSearch() { + this.listenTo(this, "change:searchTerm", (model, searchTerm) => { + const originalSubmenuStyle = this.get("originalSubmenuStyle"); + const submenuStyle = searchTerm ? "list" : originalSubmenuStyle; + model.set("submenuStyle", submenuStyle); + }); + }, + + /** + * Update the options for the dropdown. + * @param {object|object[]} options The new options to set for the dropdown + */ updateOptions(options) { this.stopListening(this.get("options")); - const parse = (typeof options === "object" && !Array.isArray(options)) + const parse = typeof options === "object" && !Array.isArray(options); this.set("options", new SearchSelectOptions(options, { parse })); - this.listenTo(this.get("options"), "all", this.trigger.bind(this, "change:options")); + this.listenTo( + this.get("options"), + "all", + this.trigger.bind(this, "change:options"), + ); }, /** * Returns the options as a JSON object. - * @param {boolean} categorized - Whether to return the options as categorized. - * See @link{SearchSelectOptions#toJSON} for more information. + * @param {boolean} categorized - Whether to return the options as + * categorized. See @link{SearchSelectOptions#toJSON} for more information. * @returns {object|object[]} - The options as a JSON object. */ optionsAsJSON(categorized = false) { @@ -65,30 +121,51 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( /** * Checks if a value is one of the values in the options. * @param {string} value - The value to check for. - * @returns {boolean} - Returns true if the value is found in the collection, false otherwise. + * @returns {boolean} - Returns true if the value is found in the + * collection, false otherwise. */ isValidValue(value) { + if (this.get("allowAdditions")) return true; return this.get("options").isValidValue(value); }, /** - * Add a selected value and ensures it's not already in the list. - * If this is not a multi-select dropdown, the selected value will replace - * any existing value. + * Check if there are any invalid selections in the selected values. + * @returns {boolean | string[]} - Returns false if there are no invalid + * selections, or an array of invalid selection strings if there are any. + */ + hasInvalidSelections() { + if (this.get("allowAdditions")) return false; + const selected = this.get("selected"); + if (!selected || !selected.length) return false; + const invalidSelections = selected.filter( + (value) => !this.isValidValue(value), + ); + return invalidSelections.length ? invalidSelections : false; + }, + + /** + * Add a selected value and ensures it's not already in the list. If this is + * not a multi-select dropdown, the selected value will replace any existing + * value. * @param {string} value - The value to add to the selected list. - * @param {object} options - Additional options to be passed to the 's set method. + * @param {object} options - Additional options to be passed to the 's set + * method. */ addSelected(value, options = {}) { const selected = this.get("selected"); if (selected.includes(value)) return; - const newSelected = this.get("allowMulti") ? [...selected, value] : [value]; + const newSelected = this.get("allowMulti") + ? [...selected, value] + : [value]; this.setSelected(newSelected, options); }, /** * Change the values that are selected in the dropdown. * @param {string|string[]} values - The value(s) to select. - * @param {object} options - Additional options to be passed to the set method. + * @param {object} options - Additional options to be passed to the set + * method. */ setSelected(values, options = {}) { const newValues = !Array.isArray(values) ? [values] : values; @@ -98,7 +175,8 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( /** * Remove a value from the selected list. * @param {string} value - The value to remove from the selected list. - * @param {object} options - Additional options to be passed to the set method. + * @param {object} options - Additional options to be passed to the set + * method. */ removeSelected(value, options = {}) { const selected = this.get("selected"); @@ -126,6 +204,45 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( } return true; }, + + /** + * Checks if it's possible to update the separator that is used between + * selected values. For this to be possible, there must be more than one + * separator option available. + * @returns {boolean} - Returns true if the separator can be changed, false + * otherwise. + */ + canChangeSeparator() { + return ( + this.get("separatorOptions") && this.get("separatorOptions").length > 1 + ); + }, + + /** + * Get the next separator in the list of separator options. + * @returns {string|null} - The next separator in the list of separator + * options, or null if none. + */ + getNextSeparator() { + const separators = this.get("separatorOptions"); + const currentSeparator = this.get("separator"); + if (!currentSeparator || !separators || !separators.length) return null; + const currentIndex = separators.indexOf(currentSeparator); + let nextIndex = currentIndex + 1; + if (nextIndex >= separators.length) { + nextIndex = 0; + } + return separators[nextIndex]; + }, + + /** + * Set the next separator in the list of separator options. + */ + setNextSeparator() { + const nextSeparator = this.getNextSeparator(); + if (!nextSeparator) return; + this.set("separator", nextSeparator); + }, }); return SearchSelect; diff --git a/src/js/themes/arctic/routers/router.js b/src/js/themes/arctic/routers/router.js index 5ca40238a..a4482d750 100644 --- a/src/js/themes/arctic/routers/router.js +++ b/src/js/themes/arctic/routers/router.js @@ -26,7 +26,7 @@ define(["jquery", "underscore", "backbone"], function ($, _, Backbone) { "projects(/:portalId)(/:portalSection)(/)": "renderPortal", // portal page "edit/:portalTermPlural(/:portalIdentifier)(/:portalSection)(/)": "renderPortalEditor", - drafts: "renderDrafts", + drafts: "renderDrafts" }, helpPages: { diff --git a/src/js/views/filters/FilterEditorView.js b/src/js/views/filters/FilterEditorView.js index 21a273567..782c2cd4c 100644 --- a/src/js/views/filters/FilterEditorView.js +++ b/src/js/views/filters/FilterEditorView.js @@ -371,7 +371,7 @@ define([ if (!options.model.collection) { console.log( "The Filter model for a FilterEditorView must be part of a" + - " Filters collection", + " Filters collection", ); return; } @@ -384,7 +384,7 @@ define([ if (!options.collection) { console.log( "A Filters collection is required to render a " + - "FilterEditorView for a new Filters model.", + "FilterEditorView for a new Filters model.", ); return; } @@ -421,13 +421,13 @@ define([ } var editButton = $( "" + - " " + - buttonText + - "", + buttonClasses + + "'>" + + " " + + buttonText + + "", ); this.$el.prepend(editButton); @@ -499,8 +499,8 @@ define([ } catch (error) { console.log( "There was an error rendering the modal in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -520,8 +520,8 @@ define([ } catch (error) { console.log( "There was an error hiding the editing modal in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -594,8 +594,8 @@ define([ } catch (error) { console.log( "There was an error activating the modal buttons in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -681,8 +681,8 @@ define([ } catch (error) { console.log( "There was an error rendering the UI filter builders in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -701,24 +701,26 @@ define([ inputLabel: "Select one or more metadata fields", excludeFields: view.excludeFields, addFields: view.specialFields, - separatorText: view.model.get("fieldsOperator"), + separator: view.model.get("fieldsOperator"), }); view.modalEl .find("." + view.classes.fieldsContainer) .append(view.fieldInput.el); view.fieldInput.render(); - // When the field input is changed, limit UI options to options that match - // this field type - view.fieldInput.off("changeSelection"); - view.fieldInput.on("changeSelection", function (selectedFields) { - view.handleFieldChange.call(view, selectedFields); - }); + this.stopListening(view.fieldInput.model, "change:selected"); + this.listenTo( + view.fieldInput.model, + "change:selected", + function (_model, newSelectedFields) { + view.handleFieldChange.call(view, newSelectedFields); + }, + ); } catch (error) { console.log( "There was an error rendering a fields input in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -766,8 +768,8 @@ define([ } catch (error) { console.log( "There was an error handling a field change in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -809,8 +811,8 @@ define([ } catch (error) { console.log( "There was an error blocking a filter UI builder in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -842,8 +844,8 @@ define([ } catch (error) { console.log( "There was an error unblocking a filter UI builder in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -873,9 +875,9 @@ define([ } catch (error) { console.log( "There was an error showing a message to indicate that no filter builder " + - "UI options are allowed in a FilterEditorView" + - ". Error details: " + - error, + "UI options are allowed in a FilterEditorView" + + ". Error details: " + + error, ); } }, @@ -898,8 +900,8 @@ define([ } catch (error) { console.log( "There was an error hiding a message in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -922,9 +924,9 @@ define([ newModelAttrs = selectedUI.draftModel.toJSON(); // Set the new fields - newModelAttrs.fields = _.clone(this.fieldInput.model.get('selected')); + newModelAttrs.fields = _.clone(this.fieldInput.model.get("selected")); // set the new fieldsOperator - newModelAttrs.fieldsOperator = this.fieldInput.separatorText; + newModelAttrs.fieldsOperator = this.fieldInput.model.get("separator"); delete newModelAttrs.objectDOM; delete newModelAttrs.cid; @@ -952,8 +954,8 @@ define([ } catch (error) { console.log( "There was an error updating a Filter model in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -974,8 +976,8 @@ define([ } view.validationErrorEl = $( '

' + - view.text.validationError + - "

", + view.text.validationError + + "

", ); this.$el.find(".modal-body").prepend(view.validationErrorEl); @@ -991,8 +993,8 @@ define([ } catch (error) { console.log( "There was an error in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, @@ -1015,8 +1017,8 @@ define([ } catch (error) { console.log( "There was an error handling a click event in a FilterEditorView" + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -1117,8 +1119,8 @@ define([ } catch (error) { console.log( "There was an error switching filter types in a FilterEditorView." + - " Error details: " + - error, + " Error details: " + + error, ); } }, @@ -1173,8 +1175,8 @@ define([ } catch (error) { console.log( "There was an error getting common model attributes in a FilterEditorView" + - ". Error details: " + - error, + ". Error details: " + + error, ); } }, diff --git a/src/js/views/metadata/EML211View.js b/src/js/views/metadata/EML211View.js index a5d41c4ab..54d98194d 100644 --- a/src/js/views/metadata/EML211View.js +++ b/src/js/views/metadata/EML211View.js @@ -2535,7 +2535,7 @@ define([ const taxonSelects = view.taxonSelects; if (!taxonSelects || !taxonSelects.length) return; const selectedItems = taxonSelects - .map((select) => select.model.get('selected')) + .map((select) => select.model.get("selected")) .flat(); if (!selectedItems || !selectedItems.length) return; const selectedItemObjs = selectedItems.map((item) => { diff --git a/src/js/views/queryBuilder/QueryBuilderView.js b/src/js/views/queryBuilder/QueryBuilderView.js index 8537c8e05..628d8eb06 100644 --- a/src/js/views/queryBuilder/QueryBuilderView.js +++ b/src/js/views/queryBuilder/QueryBuilderView.js @@ -317,92 +317,92 @@ define([ * @since 2.17.0 */ renderExcludeOperatorInputs: function () { - try { - if (!this.filterGroup) { - console.log( - "A filterGroup model is required to edit the exclude and " + - "operator attributes in a Query Builder View.", - ); - return; - } + if (!this.filterGroup) { + console.log( + "A filterGroup model is required to edit the exclude and " + + "operator attributes in a Query Builder View.", + ); + return; + } - // Select the elements in the template where the two inputs should be inserted - var excludeContainer = this.$el.find(this.excludeInputSelector); - var operatorContainer = this.$el.find(this.operatorInputSelector); - // Create the exclude input - var excludeInput = new SearchableSelect({ - options: [ - { - label: "Include", - value: "false", - description: - "Include all datasets with metadata that matches the rules" + - " that are set below.", - }, - { - label: "Exclude", - value: "true", - description: - "Match any dataset except those with metadata that match" + - " the rules that are set below", - }, - ], - allowMulti: false, - allowAdditions: false, - inputLabel: "", - selected: [this.filterGroup.get("exclude").toString()], - clearable: false, - }); - // Create the operator input - var operatorInput = new SearchableSelect({ - options: [ - { - label: "all", - value: "AND", - description: - "For a dataset to match, it must have metadata that " + - "matches every rule set below.", - }, - { - label: "any", - value: "OR", - description: - "For a dataset to match, its metadata only needs to " + - "match one of the rules set below.", - }, - ], - allowMulti: false, - allowAdditions: false, - inputLabel: "", - selected: [this.filterGroup.get("operator")], - clearable: false, - }); - // Update the FilterGroup model when the user changes the operator or exclude - // options. newValues will always be an Array, but since these inputs don't - // allow multiple selections (allowMulti: false), then there will only ever be - // one value. - this.stopListening(excludeInput); - this.listenTo(excludeInput, "changeSelection", function (newValues) { + // Select the elements in the template where the two inputs should be inserted + var excludeContainer = this.$el.find(this.excludeInputSelector); + var operatorContainer = this.$el.find(this.operatorInputSelector); + // Create the exclude input + var excludeInput = new SearchableSelect({ + options: [ + { + label: "Include", + value: "false", + description: + "Include all datasets with metadata that matches the rules" + + " that are set below.", + }, + { + label: "Exclude", + value: "true", + description: + "Match any dataset except those with metadata that match" + + " the rules that are set below", + }, + ], + allowMulti: false, + allowAdditions: false, + inputLabel: "", + selected: [this.filterGroup.get("exclude").toString()], + clearable: false, + }); + // Create the operator input + var operatorInput = new SearchableSelect({ + options: [ + { + label: "all", + value: "AND", + description: + "For a dataset to match, it must have metadata that " + + "matches every rule set below.", + }, + { + label: "any", + value: "OR", + description: + "For a dataset to match, its metadata only needs to " + + "match one of the rules set below.", + }, + ], + allowMulti: false, + allowAdditions: false, + inputLabel: "", + selected: [this.filterGroup.get("operator")], + clearable: false, + }); + // Update the FilterGroup model when the user changes the operator or exclude + // options. newValues will always be an Array, but since these inputs don't + // allow multiple selections (allowMulti: false), then there will only ever be + // one value. + this.stopListening(excludeInput.model); + this.listenTo( + excludeInput.model, + "change:selected", + function (_model, newValues) { // Convert the string (necessary to be used as a value in SearchableSelect) // to a boolean. It should be "true" or "false". var newExclude = newValues[0] == "true"; this.filterGroup.set("exclude", newExclude); - }); - this.stopListening(operatorInput); - this.listenTo(operatorInput, "changeSelection", function (newValues) { + }, + ); + this.stopListening(operatorInput.model); + this.listenTo( + operatorInput, + "change:selected", + function (_model, newValues) { this.filterGroup.set("operator", newValues[0]); - }); - // Render the inputs and insert them into the view. Replace the default text - // within the containers otherwise. - excludeContainer.html(excludeInput.render().el); - operatorContainer.html(operatorInput.render().el); - } catch (error) { - console.log( - "There was a problem rendering the exclude and operator " + - "inputs in a QueryBuilderView, error details: " + - error, - ); - } + }, + ); + // Render the inputs and insert them into the view. Replace the default text + // within the containers otherwise. + excludeContainer.html(excludeInput.render().el); + operatorContainer.html(operatorInput.render().el); }, /** diff --git a/src/js/views/queryBuilder/QueryRuleView.js b/src/js/views/queryBuilder/QueryRuleView.js index 249c19af7..b7657f1d6 100644 --- a/src/js/views/queryBuilder/QueryRuleView.js +++ b/src/js/views/queryBuilder/QueryRuleView.js @@ -436,7 +436,7 @@ define([ allowAdditions: false, inputLabel: "Select a coupling", selected: this.model.get("values"), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -446,7 +446,7 @@ define([ uiFunction() { return new ObjectFormatSelect({ selected: this.model.get("values"), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -458,7 +458,7 @@ define([ if (MetacatUI.appModel.get("bioportalAPIKey")) { return new AnnotationFilter({ selected: this.model.get("values").slice(), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), multiselect: true, inputLabel: "Type a value", }); @@ -479,7 +479,7 @@ define([ uiFunction() { return new AccountSelect({ selected: this.model.get("values"), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -496,7 +496,7 @@ define([ uiFunction() { return new NodeSelect({ selected: this.model.get("values"), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -508,7 +508,7 @@ define([ return new NumericFilterView({ model: this.model, showButton: false, - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -519,7 +519,7 @@ define([ uiFunction() { return new DateFilterView({ model: this.model, - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -532,7 +532,7 @@ define([ allowAdditions: true, inputLabel: "Type a value", selected: this.model.get("values"), - separatorText: this.model.get("operator"), + separator: this.model.get("operator"), }); }, }, @@ -907,28 +907,34 @@ define([ selected: selectedFields, excludeFields: this.excludeFields, addFields: this.specialFields, - separatorText: this.model.get("fieldsOperator"), + separator: this.model.get("fieldsOperator"), }); this.fieldSelect.$el.addClass(this.fieldsClass); this.el.append(this.fieldSelect.el); this.fieldSelect.render(); // Update the model when the fieldsOperator changes - this.stopListening(this.fieldSelect, "separatorChanged"); - this.listenTo(this.fieldSelect, "separatorChanged", (newOperator) => { - this.model.set("fieldsOperator", newOperator); - }); + this.stopListening(this.fieldSelect.model, "change:separator"); + this.listenTo( + this.fieldSelect.model, + "change:separator", + (_model, newOperator) => { + this.model.set("fieldsOperator", newOperator); + }, + ); // Update model when the selected fields change - this.stopListening(this.fieldSelect, "changeSelection"); + this.stopListening(this.fieldSelect.model, "change:selected"); this.listenTo( - this.fieldSelect, - "changeSelection", - this.handleFieldChange, + this.fieldSelect.model, + "change:selected", + function (_model, fields) { + this.handleFieldChange(fields); + }, ); }, /** - * handleFieldChange - Called when the Query Field Select View triggers a change + * Called when the Query Field Select View triggers a change * event. Updates the model with the new fields, and if required, * 1) converts the filter model to a different type based on the types of fields * selected, 2) updates the operator select and the value select @@ -1040,11 +1046,13 @@ define([ this.operatorSelect.render(); // Update model when the values change - this.stopListening(this.operatorSelect, "changeSelection"); + this.stopListening(this.operatorSelect.model, "change:selected"); this.listenTo( - this.operatorSelect, - "changeSelection", - this.handleOperatorChange, + this.operatorSelect.model, + "change:selected", + function (_model, newOperator) { + this.handleOperatorChange(newOperator); + }, ); }, @@ -1407,47 +1415,59 @@ define([ // Make sure the listeners set below are not set multiple times this.stopListening( - view.valueSelect, - "changeSelection inputFocus separatorChanged", + view.valueSelect.model, + "change:selected change:separator", ); + this.stopListening(view.valueSelect.model, "change:lastInteraction"); // Update model when the values change - note that the date & numeric filter - // views do not trigger a 'changeSelection' event, (because they are not based + // views do not trigger a 'change:selected' event, (because they are not based // on a SearchSelect View) but update the models directly this.listenTo( - view.valueSelect, - "changeSelection", - this.handleValueChange, + view.valueSelect.model, + "change:selected", + (_model, newValues) => { + this.handleValueChange(newValues); + }, ); // Update the model when the operator changes - this.listenTo(view.valueSelect, "separatorChanged", (newOperator) => { - this.model.set("operator", newOperator); - }); + this.listenTo( + view.valueSelect.model, + "change:separator", + (_model, newOperator) => { + this.model.set("operator", newOperator); + }, + ); // Show a message that reminds the user that capitalization matters when they // are typing a value for a field that is case-sensitive. - this.listenTo(view.valueSelect, "inputFocus", () => { - const currentFields = this.model.get("fields"); - const isCaseSensitive = _.some(currentFields, (field) => - MetacatUI.queryFields.findWhere({ - name: field, - caseSensitive: true, - }), - ); + this.listenTo( + view.valueSelect.model, + "change:lastInteraction", + (model, interaction) => { + if (interaction !== "focus") return; + const currentFields = view.model.get("fields"); + const isCaseSensitive = _.some(currentFields, (field) => + MetacatUI.queryFields.findWhere({ + name: field, + caseSensitive: true, + }), + ); - if (isCaseSensitive) { - let fieldsText = "The field"; - if (currentFields.length > 1) { - fieldsText = "At least one of the fields"; - } + if (isCaseSensitive) { + let fieldsText = "The field"; + if (currentFields.length > 1) { + fieldsText = "At least one of the fields"; + } - const message = ` Hint: ${fieldsText} you selected is case-sensitive. Capitalization matters here.`; - view.valueSelect.showMessage(message, "info", false); - } else { - view.valueSelect.removeMessages(); - } - }); + const message = ` Hint: ${fieldsText} you selected is case-sensitive. Capitalization matters here.`; + view.valueSelect.showMessage(message, "info", false); + } else { + view.valueSelect.removeMessages(); + } + }, + ); }, /** @@ -1472,9 +1492,10 @@ define([ switch (inputType) { case "value": if (this.valueSelect) { + this.stopListening(this.valueSelect.model, "change:selected"); this.stopListening( - this.valueSelect, - "changeSelection inputFocus", + this.valueSelect.model, + "change:lastInteraction", ); this.valueSelect.remove(); this.valueSelect = null; @@ -1482,14 +1503,14 @@ define([ break; case "operator": if (this.operatorSelect) { - this.stopListening(this.operatorSelect, "changeSelection"); + this.stopListening(this.operatorSelect.model, "change:selected"); this.operatorSelect.remove(); this.operatorSelect = null; } break; case "field": if (this.fieldSelect) { - this.stopListening(this.fieldSelect, "changeSelection"); + this.stopListening(this.fieldSelect.model, "change:selected"); this.fieldSelect.remove(); this.fieldSelect = null; } diff --git a/src/js/views/searchSelect/NodeSelectView.js b/src/js/views/searchSelect/NodeSelectView.js index 24b0fbb4c..45b2812d7 100644 --- a/src/js/views/searchSelect/NodeSelectView.js +++ b/src/js/views/searchSelect/NodeSelectView.js @@ -92,7 +92,7 @@ define([ opts.options = selectOptions; - SearchableSelect.prototype.initialize.call(this, opts); + SearchableSelect.prototype.initialize.call(this, opts); }, }, ); diff --git a/src/js/views/searchSelect/QueryFieldSelectView.js b/src/js/views/searchSelect/QueryFieldSelectView.js index 49f95c574..ce804dbec 100644 --- a/src/js/views/searchSelect/QueryFieldSelectView.js +++ b/src/js/views/searchSelect/QueryFieldSelectView.js @@ -122,8 +122,14 @@ define([ } // TODO: Until we move these fields to a model, they are set on the view for this subclass - const modelAttrNames = ['allowMulti', 'allowAdditions', 'clearable', 'submenuStyle', 'hideEmptyCategoriesOnSearch']; - modelAttrNames.forEach(attrName => { + const modelAttrNames = [ + "allowMulti", + "allowAdditions", + "clearable", + "submenuStyle", + "hideEmptyCategoriesOnSearch", + ]; + modelAttrNames.forEach((attrName) => { if (options[attrName] === undefined) { options[attrName] = this[attrName]; } @@ -140,7 +146,6 @@ define([ * @since 2.17.0 */ processFields: function () { - var view = this; // Ensure the query fields are cached for the Query Field Select @@ -152,11 +157,7 @@ define([ if (typeof MetacatUI.queryFields === "undefined") { MetacatUI.queryFields = new QueryFields(); } - this.listenToOnce( - MetacatUI.queryFields, - "sync", - this.processFields, - ); + this.listenToOnce(MetacatUI.queryFields, "sync", this.processFields); MetacatUI.queryFields.fetch(); return; } @@ -380,12 +381,12 @@ define([ }, /** - * isValidOption - Checks if a value is one of the values given in view.options - * + * Checks if a value is one of the values given in view.options * @param {string} value The value to check * @return {boolean} returns true if the value is one of the values given in view.options */ isValidOption: function (value) { + // TODO: Move to model var view = this; diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 67f7e390c..238e35588 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -22,8 +22,8 @@ define([ /** * @class SearchableSelectView * @classdesc A select interface that allows the user to search from within - * the options, and optionally select multiple items. Also allows the items - * to be grouped, and to display an icon or image for each item. + * the options, and optionally select multiple items. Also allows the items to + * be grouped, and to display an icon or image for each item. * @classcategory Views/SearchSelect * @augments Backbone.View * @class @@ -70,41 +70,16 @@ define([ imageHeight: 30, /** - * For select inputs where multiple values are allowed - * ({@link SearchableSelectView#allowMulti} is true), optional text to insert - * between labels. Separator text is useful for indicating operators in filter - * fields or values. - * @type {string} - * @since 2.15.0 - */ - separatorText: "", - - /** - * For select inputs where multiple values are allowed - * ({@link SearchableSelectView#allowMulti} is true), a list of - * {@link SearchableSelectView#separatorText} options. If a list is provided here - * (AND a value is provided for the {@link SearchableSelectView#separatorText} - * option), then a user can click on the separator text between two values to - * change the text to the next string in this list. If separatorTextOptions is - * false (or if there is no separatorText value), then changing the separator text - * is not possible. This view will trigger a "separatorChanged" event when the - * separator is updated. - * @type {string[]} - * @since 2.17.0 - */ - separatorTextOptions: ["AND", "OR"], - - /** - * The HTML class name to add to the separator elements that are created for this - * view. + * The HTML class name to add to the separator elements that are created + * for this view. * @type {string} * @since 2.15.0 */ separatorClass: "separator", /** - * An additional HTML class to add to separator elements on hover when a user can - * click that element to switch the text. + * An additional HTML class to add to separator elements on hover when a + * user can click that element to switch the text. * @type {string} * @since 2.17.0 */ @@ -112,90 +87,23 @@ define([ /** * For separators that are changeable (see - * {@link SearchableSelectView#separatorTextOptions}), optional tooltip text to - * show when a user hovers over a separator element. + * {@link SearchableSelectView#separatorTextOptions}), optional tooltip + * text to show when a user hovers over a separator element. * @type {string} * @since 2.17.0 */ changeableSeparatorTooltip: "Click to switch the operator", /** - * The list of options that a user can select from in the dropdown menu. For - * un-categorized options, provide an array of objects, where each object is a - * single option. To create category headings, provide an object containing named - * objects, where the key for each object is the category title to display, and - * the value of each object comprises the option properties. - * @typedef {object[] | object} SearchableSelectOptions - * @property {string} icon - The name of a Font Awesome 3.2.1 icon to display to - * the left of the label (e.g. "lemon", "heart") - * @property {string} image - The complete path to an image to use instead of an - * icon. If both icon and image are provided, the icon will be used. - * @property {string} label - The label to show for the option - * @property {string} description - A description of the option, displayed as a - * tooltip when the user hovers over the label - * @property {string} value - If the value differs from the label, the value to - * return when this option is selected (otherwise label is returned) - * @example - * [ - * { - * icon: "", - * image: "https://www.dataone.org/uploads/member_node_logos/bcodmo_hu707c109c683d6da57b432522b4add783_33081_300x0_resize_box_2.png", - * label: "BCO", - * description: "The The Biological and Chemical Oceanography Data Management Office (BCO-DMO) serve data from research projects funded by the Biological and Chemical Oceanography Sections and the Division of Polar Programs Antarctic Organisms & Ecosystems Program at the U.S. National Science Foundation.", - * value: "urn:node:BCODMO" - * }, - * { - * icon: "", - * image: "https://www.dataone.org/uploads/member_node_logos/arctic.png", - * label: "ADC", - * description: "The US National Science Foundation Arctic Data Center operates as the primary repository supporting the NSF Arctic community for data preservation and access.", - * value: "urn:node:ARCTIC" - * }, - * ] - * @example - * { - * "category A": [ - * { - * icon: "flag", - * label: "Flag", - * description: "This is a flag" - * }, - * { - * icon: "gift", - * label: "Gift", - * description: "This is a gift" - * } - * ], - * "category B": [ - * { - * icon: "pencil", - * label: "Pencil", - * description: "This is a pencil" - * }, - * { - * icon: "hospital", - * label: "Hospital", - * description: "This is a hospital" - * } - * ] - * } - */ - - /** - * The options that a user can select from in the dropdown menu. - * @type {SearchableSelectOptions} - */ - options: [], - - /** - * Can be set to an object to specify API settings for retrieving remote selection - * menu content from an API endpoint. Details of what can be set here are - * specified by the Semantic-UI / Fomantic-UI package. Set to false if not - * retrieving remote content. + * Can be set to an object to specify API settings for retrieving remote + * selection menu content from an API endpoint. Details of what can be set + * here are specified by the Semantic-UI / Fomantic-UI package. Set to + * false if not retrieving remote content. * @type {object | booealn} * @default false * @since 2.15.0 - * @see {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} + * @see + * {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} */ apiSettings: false, @@ -210,7 +118,8 @@ define([ /** * Creates a new SearchableSelectView - * @param {object} opts - A literal object with options to pass to the view + * @param {object} opts - A literal object with options to pass to the + * view */ initialize(opts) { const options = opts || {}; @@ -219,15 +128,10 @@ define([ MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); + // Set options on the view and create the model const { modelAttrs, viewAttrs } = this.splitModelViewOptions(options); - - if (!options.model) { - this.createModel(modelAttrs); - } - - // Set the view attributes + if (!options.model) this.createModel(modelAttrs); _.extend(this, viewAttrs); - }, /** @@ -237,21 +141,19 @@ define([ * @since 0.0.0 */ splitModelViewOptions(options) { - const modelAttrNames = ['allowMulti', 'allowAdditions', 'clearable', 'submenuStyle', 'hideEmptyCategoriesOnSearch', 'selected', 'options']; + const modelAttrNames = Object.keys(SearchSelect.prototype.defaults); const modelAttrs = _.pick(options, modelAttrNames); const viewAttrs = _.omit(options, modelAttrNames); return { modelAttrs, viewAttrs }; }, /** - * Create a new SearchSelect model and set it on the view. If a model already - * exists, it will be destroyed. Sets a listener to update the menu when the - * options in the model change. - * @options {object} options - The options to pass to the model + * Create a new SearchSelect model and set it on the view. If a model + * already exists, it will be destroyed. + * @param {object} options - The options to pass to the model * @since 0.0.0 */ createModel(options) { - const modelAttrs = options || {}; if (this.model) { @@ -259,17 +161,16 @@ define([ this.model.destroy(); } + // Selected values can be part of other models if (modelAttrs.selected) { - // Selected values can be part of other models modelAttrs.selected = _.clone(options.selected); } this.model = new SearchSelect(modelAttrs); - this.listenTo(this.model, "change:options", this.updateMenu); }, /** * Render the view - * @returns {SearchableSelect} Returns the view + * @returns {SearchableSelectView} Returns the view */ render() { const view = this; @@ -286,14 +187,12 @@ define([ // Render the template using the view attributes this.$el.html(this.renderTemplate()); - // Start the dropdown in a disabled state. - // This allows us to pre-select values without triggering a change - // event. + // Start the dropdown in a disabled state. This allows us to pre-select + // values without triggering a change event. this.disable(); this.showLoading(); - // Initialize the dropdown interface - // For explanations of settings, see: + // Initialize the dropdown interface For explanations of settings, see: // https://semantic-ui.com/modules/dropdown.html#/settings this.$selectUI = this.$el.find(".ui.dropdown").dropdown({ keys: { @@ -305,8 +204,8 @@ define([ duration: 90, forceSelection: false, ignoreDiacritics: true, - clearable: view.model.get('clearable'), - allowAdditions: view.model.get('allowAdditions'), + clearable: view.model.get("clearable"), + allowAdditions: view.model.get("allowAdditions"), hideAdditions: false, allowReselection: true, onRemove(removedValue) { @@ -317,19 +216,19 @@ define([ onLabelCreate(value, _text) { // Callback when a label is created *for multi-select inputs only* - // Add the value to the selected array (but don't add twice). Do this in - // the onLabelCreate callback instead of in the onAdd callback because - // we would like to update the selected array before we create the - // separator element (below). + // Add the value to the selected array (but don't add twice). Do + // this in the onLabelCreate callback instead of in the onAdd + // callback because we would like to update the selected array + // before we create the separator element (below). view.model.addSelected(value); // Add a separator between labels if required. let label = this; - if (view.separatorRequired.call(view)) { + if (view.model.separatorRequired()) { // Create the separator element. const separator = view.createSeparator.call(view); if (separator) { - // Attach the separator to the label so that we can easily remove it - // when the label is removed. + // Attach the separator to the label so that we can easily + // remove it when the label is removed. label.data("separator", separator); // Add it before the label element. label = separator.add(label); @@ -338,16 +237,18 @@ define([ return label; }, onLabelRemove(_value) { - // Call back when a user deletes a label *for multi-select inputs only* + // Call back when a user deletes a label *for multi-select inputs + // only* const label = this; // Remove the separator before this label if there is one. const sep = label.data("separator"); if (sep) { sep.remove(); } - // If this is the first label in an input of at least two, then delete - // the separator directly *after* this label - The label that's second - // will become first, and should not have an separator before it. + // If this is the first label in an input of at least two, then + // delete the separator directly *after* this label - The label + // that's second will become first, and should not have an separator + // before it. const allLabels = view.$selectUI.find(".label"); if (allLabels.index(label) === 0) { const separatorAfter = label.next(`.${view.separatorClass}`); @@ -361,39 +262,33 @@ define([ // NOTE: The "values" argument is a string that contains all the // selected values separated by commas. We updated the view.selected - // array with the onLabelCreate and onRemove callbacks instead of using - // the values argument passed to this function in order to allow commas - // within individual values. For example, if the user selected the value - // "x" and the value "y,z", the values string would be "x,y,z" and it - // would be difficult to see that two values were selected instead of - // three. + // array with the onLabelCreate and onRemove callbacks instead of + // using the values argument passed to this function in order to + // allow commas within individual values. For example, if the user + // selected the value "x" and the value "y,z", the values string + // would be "x,y,z" and it would be difficult to see that two values + // were selected instead of three. // Update values for single-select inputs (multi-select are updated // using the onLabelCreate and onRemove callbacks) - if (!view.model.get('allowMulti')) { - view.model.setSelected(values); + if (!view.model.get("allowMulti")) { + const silent = $(this).hasClass("disabled"); + view.model.setSelected(values, { silent }); } - - // Trigger an event if items are selected after the UI has been rendered - // (It is set as disabled until fully rendered). - if (!$(this).hasClass("disabled")) { - const newValues = _.clone(view.model.get('selected')); - view.trigger("changeSelection", newValues); - } - // Refresh the tooltips on the labels/text // Ensure tooltips for labels are removed $(".search-select-tooltip").remove(); // Add a tooltip for single select elements (.text) or multi-select - // elements (.label). Delay so that to give time for DOM elements to be - // added or removed. + // elements (.label). Delay so that to give time for DOM elements to + // be added or removed. setTimeout(() => { const textEl = view.$selectUI.find(".text:not(.default),.label"); - // Single select text element will not have the value attribute, add - // it so that we can find the matching description for the tooltip - if (!textEl.data("value") && !view.model.get('allowMulti')) { + // Single select text element will not have the value attribute, + // add it so that we can find the matching description for the + // tooltip + if (!textEl.data("value") && !view.model.get("allowMulti")) { textEl.data("value", values); } if (textEl) { @@ -412,6 +307,81 @@ define([ return this; }, + /** + * Updates to the view once the dropdown UI has loaded + */ + postRender() { + const view = this; + + this.listenToModel(); + + view.trigger("postRender"); + + // Add tool tips for the description + this.$el.find(".item").each((_i, item) => { + view.addTooltip(item); + }); + + const invalidSelections = view.model.hasInvalidSelections(); + if (invalidSelections) { + view.showInvalidSelectionError(invalidSelections); + } + + this.updateSubmenuStyle(); + + // Set the selected values in the dropdown + const selected = this.model.get("selected"); + this.$selectUI.dropdown("set exactly", selected); + this.$selectUI.dropdown("save defaults"); + this.enable(); + this.hideLoading(); + + // Save the active search term in the model + this.$selectUI.find("input").off("keyup blur focus"); + this.$selectUI.find("input").on("keyup blur focus", (e) => { + this.model.set("lastInteraction", e.type); + this.model.set("searchTerm", e.target.value); + }); + }, + + /** + * Update the view when certain model attributes change + * @since 0.0.0 + */ + listenToModel() { + const view = this; + this.listenTo(this.model, "change:options", this.updateMenu); + this.listenTo(this.model, "change:separator", (_model, newSeparator) => + this.changeSeparatorText(newSeparator), + ); + this.listenTo( + this.model, + "change:submenuStyle", + this.updateSubmenuStyle, + ); + if (this.model.get("hideEmptyCategoriesOnSearch")) { + this.listenTo( + this.model, + "change:searchTerm", + (_model, searchTerm) => { + if (searchTerm) { + view.hideEmptyCategories(); + } else { + view.showAllCategories(); + } + }, + ); + } + }, + + /** + * Listen to events from the select UI interface and update the model + * @since 0.0.0 + */ + listenToSelectUI() { + // TODO: move from render/postrender + }, + /** * Change the options available in the dropdown menu and re-render. * @param {SearchableSelectOptions} options - The new options @@ -422,140 +392,157 @@ define([ }, /** - * Checks whether a separator should be created for the label that was just - * created, but not yet attached to the DOM - * @returns {boolean} - Returns true if a separator should be created, false - * otherwise. + * Create the HTML for a separator element to insert between two labels. + * The view.separatorClass is added to the separator element. + * @returns {JQuery} Returns the separator as a jQuery element * @since 2.15.0 */ - separatorRequired() { - // TODO - use the model method instead of the view method - const selected = this.model.get('selected'); - if ( - // Separators not required if only one selection is allowed - !this.model.get('allowMulti') || - // Need separator text to create a separator element - !this.separatorText || - // Need the list of selected values to determine the value's position - !selected || - // Separator is only required between two or more values - selected.length <= 1 || - // Separator is only required after the first element has been added - this.$selectUI.find(".label").length === 0 - ) { - return false; + createSeparator() { + const view = this; + const separatorText = view.model.get("separator"); + if (!separatorText) return null; + + const separatorEl = $(`${separatorText}`); + separatorEl.addClass(this.separatorClass); + + // Is there + if (view.model.canChangeSeparator()) { + view.activateSeparator(separatorEl); } - return true; + + return separatorEl; }, /** - * Create the HTML for a separator element to insert between two labels. The - * view.separatorClass is added to the separator element. - * @returns {JQuery} Returns the separator as a jQuery element - * @since 2.15.0 + * Add event listeners to a separator element to allow the user to change + * the separator text by clicking on it. Add indicators to show that the + * separator is clickable. + * @param {HTMLElement} separatorEl - The separator element + * @since 0.0.0 */ - createSeparator() { + activateSeparator(separatorEl) { const view = this; - const { separatorText } = this; - // Text is required to create a separator. - if (!separatorText) { - return null; + + if (view.changeableSeparatorTooltip) { + view.addSeparatorTooltip( + separatorEl, + view.changeableSeparatorTooltip, + ); } - const separator = $(`${separatorText}`); - separator.addClass(this.separatorClass); - - // Set a listener to change the text to one of the separatorText - // options on click, and to highlight all the separators when one is hovered - let separatorElHovered = false; - if (view.separatorTextOptions && view.separatorTextOptions.length) { - // Indicate that the separator is clickable - separator.css("cursor", "pointer"); - // Make sure the listeners set below are only set once - separator.off("click mouseenter mouseout"); - // Change all the separator text when one is clicked - separator.on("click", () => { - view.changeSeparator(); - }); - // Create the tooltip - if (view.changeableSeparatorTooltip) { - $(separator).tooltip("destroy"); - $(separator).tooltip({ - title: view.changeableSeparatorTooltip, - trigger: "manual", - }); - } - // Highlight all of the separator elements when one is hovered - separator.on("mouseenter", () => { - const separatorEls = view.$el.find(`.${view.separatorClass}`); - separatorElHovered = true; - // Add a delay before the highlight class is added + + // Indicate that the separator is clickable + separatorEl.css("cursor", "pointer"); + + // Remove any existing listeners and add new ones + separatorEl.off("click mouseenter mouseout"); + + // Change all the separator text when one is clicked + separatorEl.on("click", () => { + view.model.setNextSeparator(); + }); + + // Highlight all of the separator elements when one is hovered + separatorEl.on("mouseenter", () => { + view.hoveredSeparator = separatorEl; + setTimeout(() => { + view.highlightSeparators(); + // Even more of a delay to show the tooltip setTimeout(() => { - if (separatorElHovered) { - separatorEls.addClass(view.changeableSeparatorClass); - if (view.changeableSeparatorTooltip) { - // Add an even longer delay before the tooltip is shown - setTimeout(() => { - if (separatorElHovered) { - $(separator).tooltip("show"); - } - }, 600); - } - } - }, 285); - }); - // Hide all the tooltips and remove the highlight class on mouse out - separator.on("mouseout", () => { - separatorElHovered = false; - const separatorEls = view.$el.find(`.${view.separatorClass}`); - separatorEls.removeClass(view.changeableSeparatorClass); - separatorEls.tooltip("hide"); - }); - } - return separator; + view.showSeparatorTooltip(separatorEl); + }, 80); + }, 350); + }); + + // Hide all the tooltips and remove the highlight class on mouse out + separatorEl.on("mouseout", () => { + view.hoveredSeparator = null; + view.unhighlightSeparators(); + view.hideSeparatorTooltip(separatorEl); + }); + }, + + /** + * Add a tooltip to a separator element + * @param {HTMLElement} separator - The separator element + * @param {string} text - The text to show in the tooltip + * @since 0.0.0 + */ + addSeparatorTooltip(separator, text) { + $(separator).tooltip("destroy"); + $(separator).tooltip({ + title: text, + trigger: "manual", + }); }, /** - * Changes the separator text for all separator elements to the next value that's - * set in the {@link SearchableSelectView#separatorTextOptions}. Triggers a - * "separatorChanged" event that passes on the new separator value. + * Highlight all separator elements + * @since 0.0.0 */ - changeSeparator() { + highlightSeparators() { + const view = this; + // If user is no longer hovering over a separator, then don't highlight + if (!view.hoveredSeparator) return; + const separatorEls = view.$el.find(`.${view.separatorClass}`); + separatorEls.addClass(view.changeableSeparatorClass); + }, + + /** + * Remove the highlight class from all separator elements + * @since 0.0.0 + */ + unhighlightSeparators() { const view = this; - if ( - !view.separatorTextOptions || - !view.separatorTextOptions.length || - !view.separatorText - ) { - return; - } - // Get the next separator text option - const currentIndex = view.separatorTextOptions.indexOf( - view.separatorText, - ); - let nextIndex = currentIndex + 1; - if (currentIndex === -1 || !view.separatorTextOptions[nextIndex]) { - nextIndex = 0; - } - // Update the current separator text on the view - view.separatorText = view.separatorTextOptions[nextIndex]; - // Change the separator text for all of the separators in the view with an - // animation + const separatorEls = view.$el.find(`.${view.separatorClass}`); + separatorEls.removeClass(view.changeableSeparatorClass); + }, + + /** + * Show the tooltip for a separator element + * @param {HTMLElement} separatorEl - The separator element + * @since 0.0.0 + */ + showSeparatorTooltip(separatorEl) { + // If user is no longer hovering over a separator, then don't show the + // tooltip + if (separatorEl !== this.hoveredSeparator) return; + $(separatorEl).tooltip("show"); + }, + + /** + * Hide the tooltip for a separator element + * @param {HTMLElement} separatorEl - The separator element + * @since 0.0.0 + */ + hideSeparatorTooltip(separatorEl) { + $(separatorEl).tooltip("hide"); + }, + + /** + * Changes the separator text for all separator elements. + * @param {string} newSeparatorString - The new separator text + * @since 0.0.0 + */ + changeSeparatorText(newSeparatorString) { + const view = this; + if (!newSeparatorString) return; + // Change the separator text for all of the separators in the view with + // an animation const separatorEls = view.$el.find(`.${view.separatorClass}`); separatorEls.transition({ animation: "pulse", displayType: "inline-block", duration: "250ms", onComplete() { - $(this).text(view.separatorText); + $(this).text(newSeparatorString); }, }); - // Trigger an event for parent views - view.trigger("separatorChanged", view.separatorText); }, /** - * updateMenu - Re-render the menu of options. Useful after changing - * the options that are set on the view. + * updateMenu - Re-render the menu of options. Useful after changing the + * options that are set on the view. + * @since 0.0.0 */ updateMenu() { const menu = $(this.renderTemplate().trim()).find(".menu")[0].innerHTML; @@ -569,7 +556,7 @@ define([ */ renderTemplate() { const templateOptionsFromModel = { - allowMulti: this.model.get('allowMulti'), + allowMulti: this.model.get("allowMulti"), options: this.model.optionsAsJSON(true), }; const templateOptions = _.extend({}, this, templateOptionsFromModel); @@ -577,146 +564,41 @@ define([ }, /** - * postRender - Updates to the view once the dropdown UI has loaded + * Convert the submenu style to the style set in the model + * @since 0.0.0 */ - postRender() { - const view = this; - view.trigger("postRender"); - - // Add tool tips for the description - this.$el.find(".item").each((_i, item) => { - view.addTooltip(item); - }); - - const selected = view.model.get('selected'); - - // Show an error message if the pre-selected options are not in the - // list of available options (only if user additions are not allowed) - if (!view.model.get('allowAdditions')) { - if (selected && selected.length) { - const invalidOptions = []; - selected.forEach((item) => { - if (!view.isValidOption(item)) { - invalidOptions.push(item); - } - }); - if (invalidOptions.length) { - const optionsString = `"${invalidOptions.join(", ")}"`; - const phrase = - invalidOptions.length === 1 - ? "is not a valid option" - : "are not valid options"; - const ending = ". Please change selection."; - const message = `${optionsString} ${phrase}${ending}`; - view.showMessage(message, "error", true); - } - } - } - - // Set the selected values in the dropdown - this.$selectUI.dropdown("set exactly", selected); - this.$selectUI.dropdown("save defaults"); - this.enable(); - this.hideLoading(); - - const subMenuStyle = this.model.get('submenuStyle'); - const hideEmptyCategoriesOnSearch = this.model.get('hideEmptyCategoriesOnSearch'); - - // Make sub-menus if the option is configured in this view + updateSubmenuStyle() { + const subMenuStyle = this.model.get("submenuStyle"); if (subMenuStyle === "popout") { this.convertToPopout(); } else if (subMenuStyle === "accordion") { this.convertToAccordion(); - } - - // Convert interactive submenus to lists and hide empty categories - // when the user is searching for a term - if ( - ["popout", "accordion"].includes(subMenuStyle) || - hideEmptyCategoriesOnSearch - ) { - this.$selectUI.find("input").on("keyup blur", (e) => { - const inputVal = e.target.value; - - // When the input is NOT empty - if (inputVal !== "") { - // For interactive type submenus where items are sometimes - // hidden, show all the matching items when a user is searching - if (["popout", "accordion"].includes(subMenuStyle)) { - view.convertToList(); - } - if (hideEmptyCategoriesOnSearch) { - view.hideEmptyCategories(); - } - - // When the input is EMPTY - } else { - // Convert back to sub-menus if the option is configured in this view - if (subMenuStyle === "popout") { - view.convertToPopout(); - } else if (subMenuStyle === "accordion") { - view.convertToAccordion(); - } - // Show all the category titles again, in cases some where hidden - if (hideEmptyCategoriesOnSearch) { - view.showAllCategories(); - } - } - }); - } - - // Trigger an event when the user focuses in searchable inputs - const inputEl = this.$el.find("input.search"); - if (inputEl) { - inputEl.off("focus"); - inputEl.on("focus", (event) => { - view.trigger("inputFocus", event); - }); + } else { + this.convertToList(); } }, /** - * isValidOption - Checks if a value is one of the values given in view.options - * @param {string} value The value to check - * @returns {boolean} returns true if the value is one of the values given in - * view.options + * Show a message indicated that some of the selected values are not valid + * choices. + * @param {string[]} opts The values that are not valid choices */ - isValidOption(value) { - const view = this; - let options = view.model.optionsAsJSON(true) - - // If there are no options set on the view, assume the value is invalid - if (!options || options.length === 0) { - return false; - } - - // Reduce the options object to just an Array of value and label strings - const validValues = _(options) - .chain() - .values() - .flatten() - .map((item) => { - const items = []; - if (item.value !== undefined) { - items.push(item.value); - } - if (item.label !== undefined) { - items.push(item.label); - } - return items; - }) - .flatten() - .value(); - - return validValues.includes(value); + showInvalidSelectionError(opts) { + if (!opts || !opts.length) return; + const optsStr = `"${opts.join(", ")}"`; + const notValid = + opts.length < 2 ? "is not a valid option" : "are not valid options"; + const msg = `${optsStr} ${notValid}. Please change your selection.`; + this.showMessage(msg, "error", true); }, /** - * addTooltip - Add a tooltip to a given element using the description in the - * options object that's set on the view. - * @param {HTMLElement} element The HTML element a tooltip should be added - * @param {string} position how to position the tooltip - top | bottom | left | - * right + * addTooltip - Add a tooltip to a given element using the description in + * the options object that's set on the view. + * @param {HTMLElement} element The HTML element a tooltip should be + * added + * @param {string} position how to position the tooltip - top | bottom | + * left | right * @returns {jQuery} The element with a tooltip wrapped by jQuery */ addTooltip(element, position = "bottom") { @@ -725,8 +607,8 @@ define([ } // Find the description in the options object, using the data-value - // attribute set in the template. The data-value attribute is either - // the label, or the value, depending on if a value is provided. + // attribute set in the template. The data-value attribute is either the + // label, or the value, depending on if a value is provided. let valueOrLabel = $(element).data("value"); if (typeof valueOrLabel === "undefined") { return $(element); @@ -773,8 +655,8 @@ define([ }, /** - * convertToPopout - Re-arrange the HTML to display category contents - * as sub-menus that popout to the left or right of category titles + * convertToPopout - Re-arrange the HTML to display category contents as + * sub-menus that popout to the left or right of category titles */ convertToPopout() { if (!this.$selectUI) { @@ -810,8 +692,8 @@ define([ }, /** - * convertToList - Re-arrange HTML to display the full list of options - * in one static menu + * convertToList - Re-arrange HTML to display the full list of options in + * one static menu */ convertToList() { if (!this.$selectUI) { @@ -829,8 +711,8 @@ define([ }, /** - * convertToAccordion - Re-arrange the HTML to display category items - * with expandable sections, similar to an accordion element. + * convertToAccordion - Re-arrange the HTML to display category items with + * expandable sections, similar to an accordion element. */ convertToAccordion() { if (!this.$selectUI) { @@ -879,8 +761,8 @@ define([ }, /** - * hideEmptyCategories - In the searchable select interface, hide - * category headers that are empty, if any + * hideEmptyCategories - In the searchable select interface, hide category + * headers that are empty, if any */ hideEmptyCategories() { const $headers = this.$selectUI.find(".header"); @@ -916,16 +798,17 @@ define([ * Add a value to the selected array in the model to reflect the user's * selection in the interface * @param {string} newValue The value to add to the selected array - * @param {boolean} silent Set to true to disable the select interface - * and prevent the model from triggering a change event + * @param {boolean} silent Set to true to disable the select interface and + * prevent the model from triggering a change event * @since 0.0.0 */ addSelected(newValue, silent = false) { + const view = this; if (silent === true) { view.disable(); } - this.model.addSelected(newValue, { silent: silent }); - const selected = this.model.get('selected'); + this.model.addSelected(newValue, { silent }); + const selected = this.model.get("selected"); this.$selectUI.dropdown("set selected", selected); if (silent === true) { view.enable(); @@ -949,7 +832,7 @@ define([ if (silent === true) { view.disable(); } - this.model.setSelected(newValues, { silent: silent }); + this.model.setSelected(newValues, { silent }); this.$selectUI.dropdown("set exactly", newValues); if (silent === true) { view.enable(); @@ -971,13 +854,13 @@ define([ }, /** - * showMessage - Show an error, warning, or informational message, and highlight - * the select interface in an appropriate colour. - * @param {string} message The message to display. Use an empty string to only - * highlight the select interface without showing any message text. + * showMessage - Show an error, warning, or informational message, and + * highlight the select interface in an appropriate colour. + * @param {string} message The message to display. Use an empty string to + * only highlight the select interface without showing any message text. * @param {string} type one of "error", "warning", or "info" - * @param {boolean} removeOnChange set to true to remove the message as soon as - * the user changes the selection + * @param {boolean} removeOnChange set to true to remove the message as + * soon as the user changes the selection */ showMessage(message, type = "info", removeOnChange = true) { if (!this.$selectUI) { @@ -1016,13 +899,13 @@ define([ this.$el.append(this.message); if (removeOnChange) { - this.listenToOnce(this, "changeSelection", this.removeMessages); + this.listenToOnce(this.model, "change:selected", this.removeMessages); } }, /** - * removeMessages - Remove all messages and classes set by the - * showMessage function. + * removeMessages - Remove all messages and classes set by the showMessage + * function. */ removeMessages() { if (!this.$selectUI) { @@ -1036,8 +919,8 @@ define([ }, /** - * showLoading - Indicate that dropdown options are loading by showing - * a spinner in the select interface + * showLoading - Indicate that dropdown options are loading by showing a + * spinner in the select interface */ showLoading() { this.$el.find(".ui.dropdown").addClass("loading"); From d89f449e1616db6e6fa4efb42e07be8684adfca6 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Wed, 17 Jul 2024 09:39:19 -0700 Subject: [PATCH 066/169] Update linting suggestions to DownloadButtonView Update linting suggestions to DownloadButtonView --- src/js/views/DownloadButtonView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/views/DownloadButtonView.js b/src/js/views/DownloadButtonView.js index 464464fd9..02ab04f73 100644 --- a/src/js/views/DownloadButtonView.js +++ b/src/js/views/DownloadButtonView.js @@ -36,14 +36,14 @@ define([ let hrefLink = this.model.get("url"); if ( this.model instanceof DataONEObject && - (this.model.get("formatType") == "RESOURCE" || - this.model.get("type") == "DataPackage") + (this.model.get("formatType") === "RESOURCE" || + this.model.get("type") === "DataPackage") ) { hrefLink = this.model.getPackageURL(); } if ( this.model instanceof PackageModel && - (this.model.get("formatType") == "RESOURCE" || + (this.model.get("formatType") === "RESOURCE" || this.model.get("type") == "DataPackage" || this.model.get("type") == "Package") ) { From 4b56738434f18b62f6e7a9ea1002ae9864aa8ca7 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Wed, 17 Jul 2024 09:56:44 -0700 Subject: [PATCH 067/169] Added ES Lint fixes Ref #2434, #2418 --- src/css/metacatui-common.css | 2 +- src/js/views/DataPackageView.js | 54 ++++++++++++++---------------- src/js/views/DownloadButtonView.js | 4 +-- 3 files changed, 28 insertions(+), 32 deletions(-) diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css index 46ea8316c..99388786a 100644 --- a/src/css/metacatui-common.css +++ b/src/css/metacatui-common.css @@ -9529,7 +9529,7 @@ body > #extension-is-installed { } .btn.btn-rounded.action.viewAction > i { - margin-left: -2px; + margin-left: -2px; } /* Data Package Item */ diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 8d63917f2..46c5ea38d 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -483,7 +483,7 @@ titleTooltip: titleTooltip, downloadUrl: packageUrl, disablePackageDownloads: disablePackageDownloads, - disablePackageUrl: true + disablePackageUrl: true, }); this.$el.append(tableRow); @@ -931,34 +931,29 @@ addNestedPackages: function (dataPackage) { /** * Generates the table row for the data package header. - * * @type {null|Element} */ var tableRow = null, - /** - * Reference to the current view. - * - * @type {Object} - */ - view = this, - /** - * The title of the data package. - * - * @type {null|string} - */ - title = null, - /** - * The URL of the data package. - * - * @type {null|string} - */ - packageUrl = null; - /** - * The URL of the nested data package. - * - * @type {null|string} - */ - nestedPackageUrl = null; + /** + * Reference to the current view. + * @type {Object} + */ + view = this, + /** + * The title of the data package. + * @type {null|string} + */ + title = null, + /** + * The URL of the data package. + * @type {null|string} + */ + packageUrl = null; + /** + * The URL of the nested data package. + * @type {null|string} + */ + nestedPackageUrl = null; /** * The members of the data package. @@ -1002,7 +997,8 @@ MetacatUI.appModel.get("viewServiceUrl") ) nestedPackageUrl = - MetacatUI.appModel.get("viewServiceUrl") + encodeURIComponent(dataPackage.id); + MetacatUI.appModel.get("viewServiceUrl") + + encodeURIComponent(dataPackage.id); /** * The HTML content for the data package header. @@ -1015,8 +1011,8 @@ titleTooltip: titleTooltip, disablePackageDownloads: false, downloadUrl: packageUrl, - disablePackageUrl: false, - packageUrl: nestedPackageUrl + disablePackageUrl: false, + packageUrl: nestedPackageUrl, }); this.$el.append(tableRow); diff --git a/src/js/views/DownloadButtonView.js b/src/js/views/DownloadButtonView.js index 02ab04f73..f35d06bcc 100644 --- a/src/js/views/DownloadButtonView.js +++ b/src/js/views/DownloadButtonView.js @@ -44,8 +44,8 @@ define([ if ( this.model instanceof PackageModel && (this.model.get("formatType") === "RESOURCE" || - this.model.get("type") == "DataPackage" || - this.model.get("type") == "Package") + this.model.get("type") === "DataPackage" || + this.model.get("type") === "Package") ) { hrefLink = this.model.getURL(); } From a559a33adc0a0dfb8060f3a57669cd0f12a6fb55 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Wed, 17 Jul 2024 10:10:27 -0700 Subject: [PATCH 068/169] Added ES Lint fixes Ref: #2435 #2424 --- src/js/views/DataItemView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/views/DataItemView.js b/src/js/views/DataItemView.js index 2746829e0..1c1f94f80 100644 --- a/src/js/views/DataItemView.js +++ b/src/js/views/DataItemView.js @@ -601,12 +601,12 @@ define([ this.$el.attr("data-packageId", this.dataPackageId); } - //Download button + // Download button this.downloadButtonView = new DownloadButtonView({ model: this.model, view: "actionsView" }); this.downloadButtonView.render(); - let id = this.model.get("id"); - let infoLink = + const id = this.model.get("id"); + const infoLink = MetacatUI.root + "/view/" + encodeURIComponent(this.currentlyViewing) + From d2aec3dc34b16c5e972fbb284fed321b0f49deec Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 17 Jul 2024 13:12:38 -0400 Subject: [PATCH 069/169] Move the SearchSelect separator to own view - Further modularize the SearchableSelect view by creating a view for the separator elements that listens to and updates the SearchSelect model Issue #2253 --- src/components/semanticUI/dropdown.min.css | 6 +- .../searchSelect/SearchableSelectView.js | 196 ++--------------- src/js/views/searchSelect/SeparatorView.js | 199 ++++++++++++++++++ 3 files changed, 226 insertions(+), 175 deletions(-) create mode 100644 src/js/views/searchSelect/SeparatorView.js diff --git a/src/components/semanticUI/dropdown.min.css b/src/components/semanticUI/dropdown.min.css index 458b47f91..702ef2b2a 100644 --- a/src/components/semanticUI/dropdown.min.css +++ b/src/components/semanticUI/dropdown.min.css @@ -201,14 +201,16 @@ padding: 0.2rem; color: #9c9c9c; font-weight: 600; - transition: background-color .5s ease,color .4s ease; + transition-delay: 0.2s; + transition-duration: 0.3s; + transition-property: background-color, color; } .searchable-select .changeable-separator { - transition: background-color .5s ease,color .4s ease; border-radius: 4px; cursor: pointer; background-color: #e2eef1; color: #2994bb; + transition-delay: 0.4s; } @media only screen and (max-width: 767px) { diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 238e35588..c7210270f 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -2,6 +2,7 @@ define([ "jquery", "underscore", "backbone", + "views/searchSelect/SeparatorView", "models/searchSelect/SearchSelect", "semanticUItransition", `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, @@ -12,10 +13,11 @@ define([ $, _, Backbone, + SeparatorView, SearchSelect, - Transition, + _Transition, TransitionCSS, - Dropdown, + _Dropdown, DropdownCSS, Template, ) => @@ -69,31 +71,6 @@ define([ */ imageHeight: 30, - /** - * The HTML class name to add to the separator elements that are created - * for this view. - * @type {string} - * @since 2.15.0 - */ - separatorClass: "separator", - - /** - * An additional HTML class to add to separator elements on hover when a - * user can click that element to switch the text. - * @type {string} - * @since 2.17.0 - */ - changeableSeparatorClass: "changeable-separator", - - /** - * For separators that are changeable (see - * {@link SearchableSelectView#separatorTextOptions}), optional tooltip - * text to show when a user hovers over a separator element. - * @type {string} - * @since 2.17.0 - */ - changeableSeparatorTooltip: "Click to switch the operator", - /** * Can be set to an object to specify API settings for retrieving remote * selection menu content from an API endpoint. Details of what can be set @@ -225,13 +202,13 @@ define([ let label = this; if (view.model.separatorRequired()) { // Create the separator element. - const separator = view.createSeparator.call(view); + const separator = view.createSeparator(); if (separator) { // Attach the separator to the label so that we can easily // remove it when the label is removed. label.data("separator", separator); // Add it before the label element. - label = separator.add(label); + label = separator.$el.add(label); } } return label; @@ -251,9 +228,12 @@ define([ // before it. const allLabels = view.$selectUI.find(".label"); if (allLabels.index(label) === 0) { - const separatorAfter = label.next(`.${view.separatorClass}`); - if (separatorAfter) { - separatorAfter.remove(); + // Get the second label: + const nextLabel = allLabels.eq(1); + // Remove the separator before the second label. + const nextSep = nextLabel.data("separator"); + if (nextSep) { + nextSep.remove(); } } }, @@ -351,9 +331,6 @@ define([ listenToModel() { const view = this; this.listenTo(this.model, "change:options", this.updateMenu); - this.listenTo(this.model, "change:separator", (_model, newSeparator) => - this.changeSeparatorText(newSeparator), - ); this.listenTo( this.model, "change:submenuStyle", @@ -398,145 +375,18 @@ define([ * @since 2.15.0 */ createSeparator() { - const view = this; - const separatorText = view.model.get("separator"); - if (!separatorText) return null; - - const separatorEl = $(`${separatorText}`); - separatorEl.addClass(this.separatorClass); - - // Is there - if (view.model.canChangeSeparator()) { - view.activateSeparator(separatorEl); - } - - return separatorEl; - }, - - /** - * Add event listeners to a separator element to allow the user to change - * the separator text by clicking on it. Add indicators to show that the - * separator is clickable. - * @param {HTMLElement} separatorEl - The separator element - * @since 0.0.0 - */ - activateSeparator(separatorEl) { - const view = this; - - if (view.changeableSeparatorTooltip) { - view.addSeparatorTooltip( - separatorEl, - view.changeableSeparatorTooltip, - ); - } - - // Indicate that the separator is clickable - separatorEl.css("cursor", "pointer"); - - // Remove any existing listeners and add new ones - separatorEl.off("click mouseenter mouseout"); - - // Change all the separator text when one is clicked - separatorEl.on("click", () => { - view.model.setNextSeparator(); - }); - - // Highlight all of the separator elements when one is hovered - separatorEl.on("mouseenter", () => { - view.hoveredSeparator = separatorEl; - setTimeout(() => { - view.highlightSeparators(); - // Even more of a delay to show the tooltip - setTimeout(() => { - view.showSeparatorTooltip(separatorEl); - }, 80); - }, 350); - }); - - // Hide all the tooltips and remove the highlight class on mouse out - separatorEl.on("mouseout", () => { - view.hoveredSeparator = null; - view.unhighlightSeparators(); - view.hideSeparatorTooltip(separatorEl); - }); - }, - - /** - * Add a tooltip to a separator element - * @param {HTMLElement} separator - The separator element - * @param {string} text - The text to show in the tooltip - * @since 0.0.0 - */ - addSeparatorTooltip(separator, text) { - $(separator).tooltip("destroy"); - $(separator).tooltip({ - title: text, - trigger: "manual", - }); - }, - - /** - * Highlight all separator elements - * @since 0.0.0 - */ - highlightSeparators() { - const view = this; - // If user is no longer hovering over a separator, then don't highlight - if (!view.hoveredSeparator) return; - const separatorEls = view.$el.find(`.${view.separatorClass}`); - separatorEls.addClass(view.changeableSeparatorClass); - }, - - /** - * Remove the highlight class from all separator elements - * @since 0.0.0 - */ - unhighlightSeparators() { - const view = this; - const separatorEls = view.$el.find(`.${view.separatorClass}`); - separatorEls.removeClass(view.changeableSeparatorClass); - }, - - /** - * Show the tooltip for a separator element - * @param {HTMLElement} separatorEl - The separator element - * @since 0.0.0 - */ - showSeparatorTooltip(separatorEl) { - // If user is no longer hovering over a separator, then don't show the - // tooltip - if (separatorEl !== this.hoveredSeparator) return; - $(separatorEl).tooltip("show"); - }, - - /** - * Hide the tooltip for a separator element - * @param {HTMLElement} separatorEl - The separator element - * @since 0.0.0 - */ - hideSeparatorTooltip(separatorEl) { - $(separatorEl).tooltip("hide"); - }, - - /** - * Changes the separator text for all separator elements. - * @param {string} newSeparatorString - The new separator text - * @since 0.0.0 - */ - changeSeparatorText(newSeparatorString) { - const view = this; - if (!newSeparatorString) return; - // Change the separator text for all of the separators in the view with - // an animation - const separatorEls = view.$el.find(`.${view.separatorClass}`); - separatorEls.transition({ - animation: "pulse", - displayType: "inline-block", - duration: "250ms", - onComplete() { - $(this).text(newSeparatorString); - }, + const separator = new SeparatorView({ + model: this.model, + // hovering over one separator should highlight them all + mouseEnterCallback: () => + this.separators.forEach((sep) => sep.highlight()), + mouseOutCallback: () => + this.separators.forEach((sep) => sep.unhighlight()), }); + separator.render(); + this.separators = this.separators || []; + this.separators.push(separator); + return separator; }, /** diff --git a/src/js/views/searchSelect/SeparatorView.js b/src/js/views/searchSelect/SeparatorView.js new file mode 100644 index 000000000..9d9266cad --- /dev/null +++ b/src/js/views/searchSelect/SeparatorView.js @@ -0,0 +1,199 @@ +define([ + "backbone", + "semanticUItransition", + `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, +], (Backbone, _Transition, TransitionCSS) => { + // Default class names for the separator element + const CLASS_NAMES = { + mainEl: "separator", + highlighted: "changeable-separator", + }; + + /** + * @class SeparatorView + * @classdesc Text that separates selected terms in a search select dropdown, + * such as "AND" or "OR". These may be used to represent boolean operators in + * a search query. The separator can be clicked to toggle between possible + * values set in the SearchSelect model. + * @classcategory Views/SearchSelect + * @augments Backbone.View + * @class + * @since 0.0.0 + * @screenshot TODO + */ + const SeparatorView = Backbone.View.extend( + /** @lends SeparatorView.prototype */ + { + /** @inheritdoc */ + type: "SeparatorView", + + /** @inheritdoc */ + className: CLASS_NAMES.mainEl, + + /** @inheritdoc */ + tagName: "span", + + /** + * The number of milliseconds to wait before showing the tooltip when the + * hovers over this separator element. + * @type {number} + */ + tooltipShowDelay: 600, + + /** + * The number of milliseconds to wait before hiding the tooltip when the + * hovers over this separator element. + * @type {number} + */ + tooltipHideDelay: 80, + + /** + * Callback function to run when the user hovers. If not set, the default + * behavior is to highlight the separator. + * @type {Function} + */ + mouseEnterCallback: null, + + /** + * Callback function to run when the user stops hovering. If not set, the + * default behavior is to unhighlight the separator. + * @type {Function} + */ + mouseOutCallback: null, + + /** + * For separators that are changeable (see + * {@link SearchableSelect#canChangeSeparator}), optional tooltip text to + * show when a user hovers over. + * @type {string} + */ + tooltipText: "Click to switch the operator", + + /** @inheritdoc */ + initialize(opts) { + MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); + // Set all the options on the view + Object.keys(opts).forEach((key) => { + this[key] = opts[key]; + }); + // Default to highlighting the separator on hover + if (!this.mouseEnterCallback && !this.mouseOutCallback) { + this.mouseEnterCallback = this.highlight; + this.mouseOutCallback = this.unhighlight; + } + }, + + /** @inheritdoc */ + render() { + const view = this; + view.setText(); + + if (view.model.canChangeSeparator()) { + view.activate(); + } + + return this; + }, + + /** Update the text of the separator element to match the model */ + setText() { + this.$el.text(this.model.get("separator")); + }, + + /** + * Add event listeners to the element to allow the user to change the + * separator text by clicking on it. Add visual indicators to show that + * the separator is clickable. + */ + activate() { + const view = this; + const { $el } = this; + + view.deactivate(); + + view.addTooltip(); + $el.css("cursor", "pointer"); + + // Update the model when the separator is clicked, and update the text + // in the view when the model changes (the model may be changed by other + // views) + view.listenTo(view.model, "change:separator", view.updateText); + $el.on("click", () => { + view.model.setNextSeparator(); + }); + + $el.on("mouseenter", () => { + if (view.mouseEnterCallback) { + view.mouseEnterCallback.call(view); + } + }); + $el.on("mouseout", () => { + if (view.mouseOutCallback) { + view.mouseOutCallback.call(view); + } + }); + }, + + /** Remove event listeners and visual indicators */ + deactivate() { + this.removeTooltip(); + this.$el.css("cursor", "default"); + this.$el.off("click mouseenter mouseout"); + this.stopListening(this.model); + }, + + /** Create and attach a tooltip */ + addTooltip() { + const view = this; + const { tooltipText } = this; + if (!tooltipText) return; + this.$el.tooltip("destroy"); + this.$el.tooltip({ + title: tooltipText, + delay: { + show: view.tooltipShowDelay || 0, + hide: view.tooltipHideDelay || 0, + }, + }); + }, + + /** Remove the tooltip */ + removeTooltip() { + this.$el.tooltip("destroy"); + }, + + /** Visually emphasize the separator */ + highlight() { + this.$el.addClass(CLASS_NAMES.highlighted); + }, + + /** Visually de-emphasize the separator */ + unhighlight() { + this.$el.removeClass(CLASS_NAMES.highlighted); + }, + + /** Update the text shown in the separator element */ + updateText() { + const view = this; + const text = this.model.get("separator"); + if (!text) return; + this.$el.transition({ + animation: "pulse", + displayType: "inline-block", + duration: "250ms", + onComplete: () => { + view.setText(); + }, + }); + }, + + /** @inheritdoc */ + remove() { + this.deactivate(); + Backbone.View.prototype.remove.call(this); + }, + }, + ); + + return SeparatorView; +}); From 67ce9202227e03dd2dc8b23898e844d66a583d10 Mon Sep 17 00:00:00 2001 From: Alona Kosobokova Date: Wed, 17 Jul 2024 11:18:21 -0700 Subject: [PATCH 070/169] addressed linting issues --- src/config/config.js | 14 ++++++-------- src/js/views/maps/LayerDetailsView.js | 8 +++++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/config/config.js b/src/config/config.js index 039450bf3..2305f384d 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -1,9 +1,7 @@ /* -* The MetacatUI configuration! -* See the documentation for the AppConfig namespace to see all config options: -* Configuration overview: https://nceas.github.io/metacatui/install/#for-metacatui-v2120-and-later -* Full list of AppConfig options: https://nceas.github.io/metacatui/docs/AppConfig.html -*/ -MetacatUI.AppConfig = { - -} + * The MetacatUI configuration! + * See the documentation for the AppConfig namespace to see all config options: + * Configuration overview: https://nceas.github.io/metacatui/install/#for-metacatui-v2120-and-later + * Full list of AppConfig options: https://nceas.github.io/metacatui/docs/AppConfig.html + */ +MetacatUI.AppConfig = {}; diff --git a/src/js/views/maps/LayerDetailsView.js b/src/js/views/maps/LayerDetailsView.js index 27a1294a9..0017f36c7 100644 --- a/src/js/views/maps/LayerDetailsView.js +++ b/src/js/views/maps/LayerDetailsView.js @@ -216,11 +216,13 @@ define([ // Render each section in the Details panel this.renderedSections = _.clone(this.sections); - + // Remove and do not render opacity section if showOpacitySlider is false if (model.get("showOpacitySlider") === false) { - this.renderedSections = this.renderedSections.filter(item => item.label !== 'Opacity') - } + this.renderedSections = this.renderedSections.filter( + (item) => item.label !== "Opacity", + ); + } this.renderedSections.forEach(function (section) { var detailSection = new LayerDetailView({ From 5ec9a955f0d1877071781472dbdf6f06390d6e02 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 17 Jul 2024 15:51:27 -0400 Subject: [PATCH 071/169] Change config/config.js back to /config/config.js This reverts commit 8586e63a762b3134744c6a55e9c79f387e832dbc. See issue #2454 --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 7b93e8f4f..e6e240de8 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ From 839e5430175ce2d05781a02cbb1661537c50cc96 Mon Sep 17 00:00:00 2001 From: Alona Kosobokova Date: Wed, 17 Jul 2024 13:29:26 -0700 Subject: [PATCH 072/169] linting --- src/js/views/maps/LayerDetailsView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/views/maps/LayerDetailsView.js b/src/js/views/maps/LayerDetailsView.js index 0017f36c7..03a6bbca7 100644 --- a/src/js/views/maps/LayerDetailsView.js +++ b/src/js/views/maps/LayerDetailsView.js @@ -225,7 +225,7 @@ define([ } this.renderedSections.forEach(function (section) { - var detailSection = new LayerDetailView({ + let detailSection = new LayerDetailView({ label: section.label, contentView: section.view, model: model, From 5b7a3355559743a69933a23bbeb711c5d84a5a93 Mon Sep 17 00:00:00 2001 From: Alona Kosobokova Date: Wed, 17 Jul 2024 13:42:29 -0700 Subject: [PATCH 073/169] reviewdog changes --- src/js/views/maps/LayerDetailsView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/views/maps/LayerDetailsView.js b/src/js/views/maps/LayerDetailsView.js index 03a6bbca7..701d6645a 100644 --- a/src/js/views/maps/LayerDetailsView.js +++ b/src/js/views/maps/LayerDetailsView.js @@ -225,10 +225,10 @@ define([ } this.renderedSections.forEach(function (section) { - let detailSection = new LayerDetailView({ + const detailSection = new LayerDetailView({ label: section.label, contentView: section.view, - model: model, + model, collapsible: section.collapsible, showTitle: section.showTitle, }); From 7708c63d0364569ebaf9a93b0ce8408910679c66 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 17 Jul 2024 16:45:31 -0400 Subject: [PATCH 074/169] Clean up & modularize SearchSelectView - In prep for updating Formantic UI, clean up the searchableSelectView - Move formantic UI call backs into their own function - Move classes to constants - Break methods down into smaller methods - Fix JSdocs Issue #2253 --- src/components/semanticUI/dropdown.min.css | 2 +- src/js/views/queryBuilder/QueryRuleView.js | 14 +- .../searchSelect/SearchableSelectView.js | 415 +++++++++--------- src/js/views/searchSelect/SeparatorView.js | 7 +- 4 files changed, 220 insertions(+), 218 deletions(-) diff --git a/src/components/semanticUI/dropdown.min.css b/src/components/semanticUI/dropdown.min.css index 702ef2b2a..d7fbb8d12 100644 --- a/src/components/semanticUI/dropdown.min.css +++ b/src/components/semanticUI/dropdown.min.css @@ -205,7 +205,7 @@ transition-duration: 0.3s; transition-property: background-color, color; } -.searchable-select .changeable-separator { +.searchable-select .separator--hover { border-radius: 4px; cursor: pointer; background-color: #e2eef1; diff --git a/src/js/views/queryBuilder/QueryRuleView.js b/src/js/views/queryBuilder/QueryRuleView.js index b7657f1d6..3cdda8d65 100644 --- a/src/js/views/queryBuilder/QueryRuleView.js +++ b/src/js/views/queryBuilder/QueryRuleView.js @@ -1033,18 +1033,12 @@ define([ this.operatorSelect.$el.addClass(this.operatorClass); this.el.append(this.operatorSelect.el); - if (operatorError) { - view.listenToOnce(view.operatorSelect, "postRender", () => { - view.operatorSelect.showMessage( - "Please select a valid operator", - "error", - true, - ); - }); - } - this.operatorSelect.render(); + if(operatorError){ + view.operatorSelect.showInvalidSelectionError(); + } + // Update model when the values change this.stopListening(this.operatorSelect.model, "change:selected"); this.listenTo( diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index c7210270f..55f89b4cb 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -20,7 +20,30 @@ define([ _Dropdown, DropdownCSS, Template, -) => +) => { + + const BASE_CLASS = "searchable-select"; + const CLASS_NAMES = { + // Classes from the Semantic UI dropdown module + inactive: "disabled", + loading: "loading", + }; + + // Classes to use for different types of messages + const MESSAGE_TYPES = { + error: { + messageClass: "text-error", + selectUIClass: "error", + }, + warning: { + messageClass: "text-warning", + selectUIClass: "warning", + }, + info: { + messageClass: "text-info", + selectUIClass: "", + }, + }; /** * @class SearchableSelectView * @classdesc A select interface that allows the user to search from within @@ -32,7 +55,7 @@ define([ * @since 2.14.0 * @screenshot views/searchSelect/SearchableSelectView.png */ - Backbone.View.extend( + const SearchableSelectView = Backbone.View.extend( /** @lends SearchableSelectView.prototype */ { /** @@ -45,7 +68,7 @@ define([ * The HTML class names for this view element * @type {string} */ - className: "searchable-select", + className: BASE_CLASS, /** * Text to show in the input field before any value has been entered @@ -95,8 +118,7 @@ define([ /** * Creates a new SearchableSelectView - * @param {object} opts - A literal object with options to pass to the - * view + * @param {object} opts A literal object with options to pass to the view */ initialize(opts) { const options = opts || {}; @@ -113,7 +135,7 @@ define([ /** * Split the options passed to the view into model and view attributes. - * @param {object} options - The options passed to the view + * @param {object} options The options passed to the view * @returns {object} An object with two keys: modelAttrs and viewAttrs * @since 0.0.0 */ @@ -127,7 +149,7 @@ define([ /** * Create a new SearchSelect model and set it on the view. If a model * already exists, it will be destroyed. - * @param {object} options - The options to pass to the model + * @param {object} options The options to pass to the model * @since 0.0.0 */ createModel(options) { @@ -152,6 +174,7 @@ define([ render() { const view = this; + // TODO: if (view.apiSettings && !view.semanticAPILoaded) { // eslint-disable-next-line import/no-dynamic-require require(["semanticAPI"], (_SemanticAPI) => { @@ -164,11 +187,35 @@ define([ // Render the template using the view attributes this.$el.html(this.renderTemplate()); - // Start the dropdown in a disabled state. This allows us to pre-select + // Start the dropdown in an inactive state. This allows us to pre-select // values without triggering a change event. - this.disable(); + this.inactivate(); this.showLoading(); + this.renderSelectUI(); + this.listenToModel(); + this.listenToSelectUI(); + + // Add tool tips for the description + this.$el.find(".item").each((_i, item) => { + view.addTooltip(item); + }); + + const invalidSelections = view.model.hasInvalidSelections(); + if (invalidSelections) { + view.showInvalidSelectionError(invalidSelections); + } + + this.updateSubmenuStyle(); + + this.enable(); + this.hideLoading(); + + return this; + }, + + renderSelectUI() { + const view = this; // Initialize the dropdown interface For explanations of settings, see: // https://semantic-ui.com/modules/dropdown.html#/settings this.$selectUI = this.$el.find(".ui.dropdown").dropdown({ @@ -186,142 +233,117 @@ define([ hideAdditions: false, allowReselection: true, onRemove(removedValue) { - // Callback when a value is removed *for multi-select inputs only* - // Remove the value from the selected array view.model.removeSelected(removedValue); }, onLabelCreate(value, _text) { - // Callback when a label is created *for multi-select inputs only* - - // Add the value to the selected array (but don't add twice). Do - // this in the onLabelCreate callback instead of in the onAdd - // callback because we would like to update the selected array - // before we create the separator element (below). - view.model.addSelected(value); - // Add a separator between labels if required. - let label = this; - if (view.model.separatorRequired()) { - // Create the separator element. - const separator = view.createSeparator(); - if (separator) { - // Attach the separator to the label so that we can easily - // remove it when the label is removed. - label.data("separator", separator); - // Add it before the label element. - label = separator.$el.add(label); - } - } - return label; + const $label = this; + return view.onLabelCreate.call(view, value, _text, $label); }, - onLabelRemove(_value) { - // Call back when a user deletes a label *for multi-select inputs - // only* - const label = this; - // Remove the separator before this label if there is one. - const sep = label.data("separator"); - if (sep) { - sep.remove(); - } - // If this is the first label in an input of at least two, then - // delete the separator directly *after* this label - The label - // that's second will become first, and should not have an separator - // before it. - const allLabels = view.$selectUI.find(".label"); - if (allLabels.index(label) === 0) { - // Get the second label: - const nextLabel = allLabels.eq(1); - // Remove the separator before the second label. - const nextSep = nextLabel.data("separator"); - if (nextSep) { - nextSep.remove(); - } - } + onLabelRemove(value) { + const $label = this; + view.onLabelRemove.call(view, value, $label); }, onChange(values, _text, _$choice) { - // Callback when values change for any type of input. - - // NOTE: The "values" argument is a string that contains all the - // selected values separated by commas. We updated the view.selected - // array with the onLabelCreate and onRemove callbacks instead of - // using the values argument passed to this function in order to - // allow commas within individual values. For example, if the user - // selected the value "x" and the value "y,z", the values string - // would be "x,y,z" and it would be difficult to see that two values - // were selected instead of three. - - // Update values for single-select inputs (multi-select are updated - // using the onLabelCreate and onRemove callbacks) - if (!view.model.get("allowMulti")) { - const silent = $(this).hasClass("disabled"); - view.model.setSelected(values, { silent }); - } - // Refresh the tooltips on the labels/text - - // Ensure tooltips for labels are removed - $(".search-select-tooltip").remove(); - - // Add a tooltip for single select elements (.text) or multi-select - // elements (.label). Delay so that to give time for DOM elements to - // be added or removed. - setTimeout(() => { - const textEl = view.$selectUI.find(".text:not(.default),.label"); - // Single select text element will not have the value attribute, - // add it so that we can find the matching description for the - // tooltip - if (!textEl.data("value") && !view.model.get("allowMulti")) { - textEl.data("value", values); - } - if (textEl) { - textEl.each((i, el) => { - view.addTooltip.call(view, el, "top"); - }); - } - }, 50); - }, + view.onChange.call(view, values, _text, _$choice); + } + }); view.$selectUI.data("view", view); - view.postRender(); + // Set the selected values in the dropdown + const selected = this.model.get("selected"); + this.$selectUI.dropdown("set exactly", selected); + this.$selectUI.dropdown("save defaults"); + }, - return this; + onLabelCreate(value, _text, $label) { + const view = this; + // Callback when a label is created *for multi-select inputs only* + + // Add the value to the selected array (but don't add twice). Do this in + // the onLabelCreate callback instead of in the onAdd callback because + // we would like to update the selected array before we create the + // separator element (below). + view.model.addSelected(value); + // Add a separator between labels if required. + + let $updatedLabel = $label; + + if (view.model.separatorRequired()) { + // Create the separator element. + const separator = view.createSeparator(); + if (separator) { + // Attach the separator to the label so that we can easily remove it + // when the label is removed. + $label.data("separator", separator); + // Add it before the label element. + $updatedLabel = separator.$el.add($label); + } + } + return $updatedLabel; }, /** - * Updates to the view once the dropdown UI has loaded + * Call back from the select UI when a label is removed from multi-select + * inputs. This function removes separators that are no longer needed. + * @param {string} _value The value of the label that was removed + * @param {JQuery} $label The label element that was removed + * @since 0.0.0 */ - postRender() { + onLabelRemove(_value, $label) { const view = this; + const sep = $label.data("separator"); + sep?.remove(); + // Remove separator from second label if the first label is the one + // being removed + const allLabels = view.$selectUI.find(".label"); + if (allLabels.index($label) === 0) { + allLabels.eq(1)?.data("separator")?.remove(); + } + }, - this.listenToModel(); - - view.trigger("postRender"); - - // Add tool tips for the description - this.$el.find(".item").each((_i, item) => { - view.addTooltip(item); - }); + /** + * Callback when the user changes the selection in the dropdown. We update + * the model with the new selection when the dropdown is a single-select. + * Multi-select dropdowns are updated in the onLabelCreate and + * onLabelRemove + * @param {string} values The selected values separated by commas + * @param {string} _text The text of the selected values + * @param {JQuery} _$choice The selected choice element + * @since 0.0.0 + */ + onChange(values, _text, _$choice) { + const view = this - const invalidSelections = view.model.hasInvalidSelections(); - if (invalidSelections) { - view.showInvalidSelectionError(invalidSelections); + // Update values for single-select inputs (multi-select are updated + // using the onLabelCreate and onRemove callbacks) + if (!view.model.get("allowMulti")) { + const silent = this.$selectUI.hasClass(CLASS_NAMES.inactive); + view.model.setSelected(values, { silent }); } - this.updateSubmenuStyle(); + // Refresh the tooltips on the labels/text - // Set the selected values in the dropdown - const selected = this.model.get("selected"); - this.$selectUI.dropdown("set exactly", selected); - this.$selectUI.dropdown("save defaults"); - this.enable(); - this.hideLoading(); + // Ensure tooltips for labels are removed + $(".search-select-tooltip").remove(); - // Save the active search term in the model - this.$selectUI.find("input").off("keyup blur focus"); - this.$selectUI.find("input").on("keyup blur focus", (e) => { - this.model.set("lastInteraction", e.type); - this.model.set("searchTerm", e.target.value); - }); + // Add a tooltip for single select elements (.text) or multi-select + // elements (.label). Delay so that to give time for DOM elements to be + // added or removed. + setTimeout(() => { + const textEl = view.$selectUI.find(".text:not(.default),.label"); + // Single select text element will not have the value attribute, add + // it so that we can find the matching description for the tooltip + if (!textEl.data("value") && !view.model.get("allowMulti")) { + textEl.data("value", values); + } + if (textEl) { + textEl.each((i, el) => { + view.addTooltip.call(view, el, "top"); + }); + } + }, 50); }, /** @@ -356,12 +378,17 @@ define([ * @since 0.0.0 */ listenToSelectUI() { - // TODO: move from render/postrender + // Save the active search term in the model + this.$selectUI.find("input").off("keyup blur focus"); + this.$selectUI.find("input").on("keyup blur focus", (e) => { + this.model.set("lastInteraction", e.type); + this.model.set("searchTerm", e.target.value); + }); }, /** * Change the options available in the dropdown menu and re-render. - * @param {SearchableSelectOptions} options - The new options + * @param {SearchableSelectOptions} options The new options * @since 2.24.0 */ updateOptions(options) { @@ -390,8 +417,8 @@ define([ }, /** - * updateMenu - Re-render the menu of options. Useful after changing the - * options that are set on the view. + * Re-render the menu of options. Useful after changing the options that + * are set on the view. * @since 0.0.0 */ updateMenu() { @@ -434,21 +461,28 @@ define([ * @param {string[]} opts The values that are not valid choices */ showInvalidSelectionError(opts) { - if (!opts || !opts.length) return; - const optsStr = `"${opts.join(", ")}"`; - const notValid = - opts.length < 2 ? "is not a valid option" : "are not valid options"; - const msg = `${optsStr} ${notValid}. Please change your selection.`; + + let msg = ""; + if (opts?.length) { + msg += opts.join(", "); + if (opts.length > 1) { + msg += " are not valid options. "; + } else { + msg += " is not a valid option. "; + } + } + + msg += "Please select from the available options."; + this.showMessage(msg, "error", true); }, /** - * addTooltip - Add a tooltip to a given element using the description in - * the options object that's set on the view. + * Add a tooltip to a given element using the description in the options + * object that's set on the view. * @param {HTMLElement} element The HTML element a tooltip should be * added - * @param {string} position how to position the tooltip - top | bottom | - * left | right + * @param {"top"|"bottom"|"left"|"right"} position Tooltip position * @returns {jQuery} The element with a tooltip wrapped by jQuery */ addTooltip(element, position = "bottom") { @@ -505,8 +539,8 @@ define([ }, /** - * convertToPopout - Re-arrange the HTML to display category contents as - * sub-menus that popout to the left or right of category titles + * Re-arrange the HTML to display category contents as sub-menus that + * popout to the left or right of category titles */ convertToPopout() { if (!this.$selectUI) { @@ -542,8 +576,7 @@ define([ }, /** - * convertToList - Re-arrange HTML to display the full list of options in - * one static menu + * Re-arrange HTML to display the full list of options in one static menu */ convertToList() { if (!this.$selectUI) { @@ -561,8 +594,8 @@ define([ }, /** - * convertToAccordion - Re-arrange the HTML to display category items with - * expandable sections, similar to an accordion element. + * Re-arrange the HTML to display category items with expandable sections, + * similar to an accordion element. */ convertToAccordion() { if (!this.$selectUI) { @@ -611,8 +644,8 @@ define([ }, /** - * hideEmptyCategories - In the searchable select interface, hide category - * headers that are empty, if any + * In the searchable select interface, hide category headers that are + * empty, if any */ hideEmptyCategories() { const $headers = this.$selectUI.find(".header"); @@ -637,8 +670,8 @@ define([ }, /** - * showAllCategories - In the searchable select interface, show all - * category headers that we re previously empty + * In the searchable select interface, show all category headers that we + * re previously empty */ showAllCategories() { this.$selectUI.find(".header:hidden").show(); @@ -648,14 +681,14 @@ define([ * Add a value to the selected array in the model to reflect the user's * selection in the interface * @param {string} newValue The value to add to the selected array - * @param {boolean} silent Set to true to disable the select interface and - * prevent the model from triggering a change event + * @param {boolean} silent Set to true to inactivate the select interface + * and prevent the model from triggering a change event * @since 0.0.0 */ addSelected(newValue, silent = false) { const view = this; if (silent === true) { - view.disable(); + view.inactivate(); } this.model.addSelected(newValue, { silent }); const selected = this.model.get("selected"); @@ -666,9 +699,9 @@ define([ }, /** - * changeSelection - Set selected values in the interface - * @param {string[]} newValues - An array of strings to select - * @param {boolean} silent - Set to true to disable the select interface + * Set selected values in the interface + * @param {string[]} newValues An array of strings to select + * @param {boolean} silent Set to true to inactivate the select interface */ changeSelection(newValues, silent = false) { if ( @@ -680,7 +713,7 @@ define([ } const view = this; if (silent === true) { - view.disable(); + view.inactivate(); } this.model.setSelected(newValues, { silent }); this.$selectUI.dropdown("set exactly", newValues); @@ -689,23 +722,21 @@ define([ } }, - /** - * enable - Remove the class the makes the select UI appear disabled - */ + /** Visually indicate that the select interface is enabled */ enable() { - this.$el.find(".ui.dropdown").removeClass("disabled"); + this.enabled = true; + this.$el.find(".ui.dropdown").removeClass(CLASS_NAMES.inactive); }, - /** - * disable - Add the class the makes the select UI appear disabled - */ - disable() { - this.$el.find(".ui.dropdown").addClass("disabled"); + /** Visually indicate that the select interface is inactive */ + inactivate() { + this.enabled = false; + this.$el.find(".ui.dropdown").addClass(CLASS_NAMES.inactive); }, /** - * showMessage - Show an error, warning, or informational message, and - * highlight the select interface in an appropriate colour. + * Show an error, warning, or informational message, and highlight the + * select interface in an appropriate colour. * @param {string} message The message to display. Use an empty string to * only highlight the select interface without showing any message text. * @param {string} type one of "error", "warning", or "info" @@ -713,36 +744,19 @@ define([ * soon as the user changes the selection */ showMessage(message, type = "info", removeOnChange = true) { - if (!this.$selectUI) { - return; - } - - const messageTypes = { - error: { - messageClass: "text-error", - selectUIClass: "error", - }, - warning: { - messageClass: "text-warning", - selectUIClass: "warning", - }, - info: { - messageClass: "text-info", - selectUIClass: "", - }, - }; + if (!this.$selectUI) return; let level = typeof type === "string" ? type.toLowerCase() : "info"; - if (!Object.keys(messageTypes).includes(level)) { + if (!Object.keys(MESSAGE_TYPES).includes(level)) { level = "info"; } this.removeMessages(); - this.$selectUI.addClass(messageTypes[level].selectUIClass); + this.$selectUI.addClass(MESSAGE_TYPES[level].selectUIClass); if (message && message.length && typeof message === "string") { this.message = $( - `

${message}

`, + `

${message}

`, ); } @@ -753,34 +767,27 @@ define([ } }, - /** - * removeMessages - Remove all messages and classes set by the showMessage - * function. - */ + /** Remove all messages and classes set by the showMessage function */ removeMessages() { if (!this.$selectUI) { return; } - - this.$selectUI.removeClass("error warning"); - if (this.message) { - this.message.remove(); - } + const classes = Object.values(MESSAGE_TYPES).map((type) => type.selectUIClass); + this.$selectUI.removeClass(classes.join(" ")); + if (this.message) this.message.remove(); }, - /** - * showLoading - Indicate that dropdown options are loading by showing a - * spinner in the select interface - */ + /** Visually indicate that dropdown options are loading */ showLoading() { - this.$el.find(".ui.dropdown").addClass("loading"); + this.$el.find(".ui.dropdown").addClass(CLASS_NAMES.loading); }, - /** - * hideLoading - Remove the loading spinner set by the showLoading - */ + /** Remove the loading spinner set by the showLoading */ hideLoading() { - this.$el.find(".ui.dropdown").removeClass("loading"); + this.$el.find(".ui.dropdown").removeClass(CLASS_NAMES.loading); }, }, - )); + ) + + return SearchableSelectView; +}); diff --git a/src/js/views/searchSelect/SeparatorView.js b/src/js/views/searchSelect/SeparatorView.js index 9d9266cad..208ee9c86 100644 --- a/src/js/views/searchSelect/SeparatorView.js +++ b/src/js/views/searchSelect/SeparatorView.js @@ -3,10 +3,11 @@ define([ "semanticUItransition", `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, ], (Backbone, _Transition, TransitionCSS) => { + // Default class names for the separator element + const BASE_CLASS ="separator"; const CLASS_NAMES = { - mainEl: "separator", - highlighted: "changeable-separator", + highlighted: `${BASE_CLASS}--hover`, }; /** @@ -28,7 +29,7 @@ define([ type: "SeparatorView", /** @inheritdoc */ - className: CLASS_NAMES.mainEl, + className: BASE_CLASS, /** @inheritdoc */ tagName: "span", From 7e11839e2771b91b2698bb32d22d1261906a3360 Mon Sep 17 00:00:00 2001 From: Alona Kosobokova Date: Wed, 17 Jul 2024 14:12:11 -0700 Subject: [PATCH 075/169] added jsdoc comment --- src/js/models/maps/assets/MapAsset.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/models/maps/assets/MapAsset.js b/src/js/models/maps/assets/MapAsset.js index 1c0bd2a1d..9d4226e08 100644 --- a/src/js/models/maps/assets/MapAsset.js +++ b/src/js/models/maps/assets/MapAsset.js @@ -106,6 +106,8 @@ define([ * especially when there was an error. * @property {boolean} [hideInLayerList = false] Set to true to hide this asset * from the layer list. + * @property {boolean} [showOpacitySlider = true] Set to true to show opacity slider + * for the layer. */ defaults() { return { @@ -131,6 +133,7 @@ define([ statusDetails: null, hideInLayerList: false, showOpacitySlider: true, + clickFeatureAction: "", }; }, From 9c75fb95a0dc5829abfb6c8977679107fa905ee4 Mon Sep 17 00:00:00 2001 From: Alyona Date: Thu, 18 Jul 2024 09:59:03 -0700 Subject: [PATCH 076/169] Update config.js --- src/config/config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/config/config.js b/src/config/config.js index 2305f384d..59dd0dfb4 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -4,4 +4,6 @@ * Configuration overview: https://nceas.github.io/metacatui/install/#for-metacatui-v2120-and-later * Full list of AppConfig options: https://nceas.github.io/metacatui/docs/AppConfig.html */ -MetacatUI.AppConfig = {}; +MetacatUI.AppConfig = { + +} From 2b8e2ce4fe6d571f58e36a43e16310c074480a8f Mon Sep 17 00:00:00 2001 From: Alyona Date: Thu, 18 Jul 2024 09:59:35 -0700 Subject: [PATCH 077/169] Update config.js --- src/config/config.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/config/config.js b/src/config/config.js index 59dd0dfb4..039450bf3 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -1,9 +1,9 @@ /* - * The MetacatUI configuration! - * See the documentation for the AppConfig namespace to see all config options: - * Configuration overview: https://nceas.github.io/metacatui/install/#for-metacatui-v2120-and-later - * Full list of AppConfig options: https://nceas.github.io/metacatui/docs/AppConfig.html - */ +* The MetacatUI configuration! +* See the documentation for the AppConfig namespace to see all config options: +* Configuration overview: https://nceas.github.io/metacatui/install/#for-metacatui-v2120-and-later +* Full list of AppConfig options: https://nceas.github.io/metacatui/docs/AppConfig.html +*/ MetacatUI.AppConfig = { } From def7510ecb666d90a0f463183bcea882915c8ead Mon Sep 17 00:00:00 2001 From: Alyona Date: Thu, 18 Jul 2024 10:00:11 -0700 Subject: [PATCH 078/169] Update config.js From 149ba75757fc7aeba618c70f6dc28b9eecba2c6d Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 18 Jul 2024 10:42:28 -0700 Subject: [PATCH 079/169] Fix issues with nestedPackageUrl Fix issues with nestedPackageUrl #2418 #2434 --- src/js/views/DataPackageView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 46c5ea38d..88960ad1f 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -948,7 +948,7 @@ * The URL of the data package. * @type {null|string} */ - packageUrl = null; + packageUrl = null, /** * The URL of the nested data package. * @type {null|string} @@ -993,11 +993,11 @@ // Set the nested package URL if ( - MetacatUI.appModel.get("viewServiceUrl") !== undefined && - MetacatUI.appModel.get("viewServiceUrl") + MetacatUI.root !== undefined && + dataPackage.id !== undefined ) nestedPackageUrl = - MetacatUI.appModel.get("viewServiceUrl") + + MetacatUI.root + "/view/" + encodeURIComponent(dataPackage.id); /** From da8b0bf89eb8a7de21b5d611364f50e43813a38d Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 18 Jul 2024 10:44:05 -0700 Subject: [PATCH 080/169] ESLint formating ESLint formating #2418 #2434 --- src/js/views/DataPackageView.js | 50 +++++++++++++++------------------ 1 file changed, 23 insertions(+), 27 deletions(-) diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index 88960ad1f..63ff2da82 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -934,26 +934,26 @@ * @type {null|Element} */ var tableRow = null, - /** - * Reference to the current view. - * @type {Object} - */ - view = this, - /** - * The title of the data package. - * @type {null|string} - */ - title = null, - /** - * The URL of the data package. - * @type {null|string} - */ - packageUrl = null, - /** - * The URL of the nested data package. - * @type {null|string} - */ - nestedPackageUrl = null; + /** + * Reference to the current view. + * @type {Object} + */ + view = this, + /** + * The title of the data package. + * @type {null|string} + */ + title = null, + /** + * The URL of the data package. + * @type {null|string} + */ + packageUrl = null, + /** + * The URL of the nested data package. + * @type {null|string} + */ + nestedPackageUrl = null; /** * The members of the data package. @@ -992,13 +992,9 @@ encodeURIComponent(dataPackage.id); // Set the nested package URL - if ( - MetacatUI.root !== undefined && - dataPackage.id !== undefined - ) - nestedPackageUrl = - MetacatUI.root + "/view/" + - encodeURIComponent(dataPackage.id); + if (MetacatUI.root !== undefined && dataPackage.id !== undefined) + nestedPackageUrl = + MetacatUI.root + "/view/" + encodeURIComponent(dataPackage.id); /** * The HTML content for the data package header. From 580e1df6965e37e8f3bad8b7ab475f9ee37789a4 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 18 Jul 2024 10:54:56 -0700 Subject: [PATCH 081/169] Make QGreenland portal DataONE accessible Make QGreenland portal DataONE accessible #2375 --- src/js/themes/dataone/config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/js/themes/dataone/config.js b/src/js/themes/dataone/config.js index 7896533a0..32b55fd75 100644 --- a/src/js/themes/dataone/config.js +++ b/src/js/themes/dataone/config.js @@ -142,6 +142,11 @@ MetacatUI.AppConfig = Object.assign( datasource: "urn:node:mnUCSB1", label: "9434702", }, + { + seriesId: "urn:uuid:dfbfc37d-e907-45e8-913f-acb88f1b2e64", + datasource: "urn:node:ARCTIC", + label: "QGreenland", + }, ], googleAnalyticsKey: "G-CR31GM016V", From 8cd004705fc09d7d0b703253888ad4587c77e356 Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 18 Jul 2024 12:05:00 -0700 Subject: [PATCH 082/169] ESLint formating fix ESLint formating fix --- src/js/views/DataItemView.js | 9 ++++++--- src/js/views/DataPackageView.js | 4 +++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/js/views/DataItemView.js b/src/js/views/DataItemView.js index 1c1f94f80..c72fb69f2 100644 --- a/src/js/views/DataItemView.js +++ b/src/js/views/DataItemView.js @@ -601,9 +601,12 @@ define([ this.$el.attr("data-packageId", this.dataPackageId); } - // Download button - this.downloadButtonView = new DownloadButtonView({ model: this.model, view: "actionsView" }); - this.downloadButtonView.render(); + // Download button + this.downloadButtonView = new DownloadButtonView({ + model: this.model, + view: "actionsView", + }); + this.downloadButtonView.render(); const id = this.model.get("id"); const infoLink = diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index ee4d9d46f..5a7cd1c99 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -1023,7 +1023,9 @@ this.downloadButtonView.render(); // Add the downloadButtonView el to the span - this.$el.find(".downloadAction[data-id='" + dataPackage.id + "']").html(this.downloadButtonView.el); + this.$el + .find(".downloadAction[data-id='" + dataPackage.id + "']") + .html(this.downloadButtonView.el); // Filter out the packages from the member list members = _.filter(members, function (m) { From 43cb975c80a1951c0708facf451072b6740fe3b8 Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 18 Jul 2024 15:29:21 -0400 Subject: [PATCH 083/169] Use constants for classes, selectors in SearchSelect Misc updates to make the code more DRY Issue #2253 --- .../searchSelect/SearchSelectOptions.js | 51 +++- .../templates/selectUI/searchableSelect.html | 16 +- .../searchSelect/QueryFieldSelectView.js | 26 +- .../searchSelect/SearchableSelectView.js | 269 ++++++++++-------- src/js/views/searchSelect/SeparatorView.js | 3 +- 5 files changed, 208 insertions(+), 157 deletions(-) diff --git a/src/js/collections/searchSelect/SearchSelectOptions.js b/src/js/collections/searchSelect/SearchSelectOptions.js index 0ac15745b..0fa13d340 100644 --- a/src/js/collections/searchSelect/SearchSelectOptions.js +++ b/src/js/collections/searchSelect/SearchSelectOptions.js @@ -6,8 +6,8 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( ) => { /** * @class SearchSelectOptions - * @classdesc A collection for managing dropdown options in a searchable select - * view. + * @classdesc A collection for managing dropdown options in a searchable + * select view. * @classcategory Collections/SearchSelect * @since 0.0.0 */ @@ -19,12 +19,14 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( /** * Initializes with option models, objects, or categorized options. - * @param {SearchSelectOption[]|object[]|object} _models - The options to add to the collection. - * This can be an array of SearchSelectOption models, an array of attributes for options models, - * or an object where each key is a category and each value is an array of options. All will be + * @param {SearchSelectOption[]|object[]|object} _models - The options to + * add to the collection. This can be an array of SearchSelectOption models, + * an array of attributes for options models, or an object where each key is + * a category and each value is an array of options. All will be * automatically converted to SearchSelectOption models for the collection. * @param {object} _options - The options for the collection. - * @param {boolean} _options.parse - Whether to parse the incoming data into the expected format. + * @param {boolean} _options.parse - Whether to parse the incoming data into + * the expected format. * @example * // Initialize with an array of attributes * const options = new SearchSelectOptions([ @@ -45,9 +47,10 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( initialize(_models, _options) {}, /** - * Parses the incoming options data. This can handle both an array of options - * (uncategorized) or an object with categories (categorized). - * @param {object[] | object} data - Either an array of option objects or an object with categories. + * Parses the incoming options data. This can handle both an array of + * options (uncategorized) or an object with categories (categorized). + * @param {object[] | object} data - Either an array of option objects or an + * object with categories. * @returns {Array} An array of option objects suitable for the collection. */ parse(data) { @@ -77,16 +80,19 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( /** * Get the select options that belong to a given category. * @param {string} category - The category to get options for. - * @returns {SearchSelectOption[]} An array of options in the specified category. + * @returns {SearchSelectOption[]} An array of options in the specified + * category. */ getOptionsByCategory(category) { return this.filter((option) => option.get("category") === category); }, /** - * Checks if a given matches either a label or value in the collection of options. + * Checks if a given matches either a label or value in the collection of + * options. * @param {string} value - The value or label to check for. - * @returns {boolean} - Returns true if the value is found in the collection, false otherwise. + * @returns {boolean} - Returns true if the value is found in the + * collection, false otherwise. */ isValidValue(value) { return this.some( @@ -95,11 +101,26 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( ); }, + /** + * Get an option by its label or value. + * @param {string} value - The value or label of the option to get. + * @returns {SearchSelectOption} The first option that has a matching value + * or label. + */ + getOptionByLabelOrValue(value) { + return this.find( + (option) => + option.get("value") === value || option.get("label") === value, + ); + }, + /** * Return JSON representation of the collection. - * @param {boolean} [categorized] Whether to return the options as an object with categories as keys (true) - * or as an array with categories as a property on each option (false). If set to categorized, and the - * options have no category, they will be placed in a default category with an empty string key. + * @param {boolean} [categorized] Whether to return the options as an object + * with categories as keys (true) or as an array with categories as a + * property on each option (false). If set to categorized, and the options + * have no category, they will be placed in a default category with an empty + * string key. * @returns {object|object[]} JSON representation of the collection. */ toJSON(categorized = false) { diff --git a/src/js/templates/selectUI/searchableSelect.html b/src/js/templates/selectUI/searchableSelect.html index 5e34b2fee..67c634c93 100644 --- a/src/js/templates/selectUI/searchableSelect.html +++ b/src/js/templates/selectUI/searchableSelect.html @@ -1,24 +1,24 @@ <% if (inputLabel) { %> -

<%= inputLabel %>

+

<%= inputLabel %>

<% } %> -
+
<% // Do not pre-select options by providing a value to the hidden input field. %> <% // This causes errors in some situations. Pre-select in the view JS instead. %> - -
<%= placeholderText %>
-
+ +
<%= placeholderText %>
+
<% // If the list of options doesn't have category headings, put it in the %> <% // same format as options that do have headings. %> <% if (Array.isArray(options)) { options = { "" : options } } %> <% for (const [header, values] of Object.entries(options)) { %> <% if (header) { %> -
<%= header %>
+
<%= header %>
<% } %> <% for (option of values) { %> -
+
<% if (option.icon) { %> <% } else if (option.image) { %> @@ -30,3 +30,5 @@
<%= header %>
<% } %>
+ + diff --git a/src/js/views/searchSelect/QueryFieldSelectView.js b/src/js/views/searchSelect/QueryFieldSelectView.js index ce804dbec..85554028c 100644 --- a/src/js/views/searchSelect/QueryFieldSelectView.js +++ b/src/js/views/searchSelect/QueryFieldSelectView.js @@ -294,24 +294,14 @@ define([ return; } - // Find the description in the options object, using the data-value - // attribute set in the template. The data-value attribute is either - // the label, or the value, depending on if a value is provided. - var valueOrLabel = $(element).data("value"), - opt = _.chain(this.model.optionsAsJSON()) - .values() - .flatten() - .find(function (option) { - return ( - option.label == valueOrLabel || option.value == valueOrLabel - ); - }) - .value(); - - var label = opt.label, - value = opt.value, - type = opt.type, - description = opt.description ? opt.description : ""; + // Find the description in the options object. + const valueOrLabel = $(element).data("value"); + const opt = this.model.get("options").getOptionByLabelOrValue(valueOrLabel); + + const label = opt.get("label"); + const value = opt.get("value"); + const type = opt.get("type"); + const description = opt.get("description") || ""; // For added fields, the value set on the options.value element is just a // unique identifier. The values that should be used to build a query are saved diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 55f89b4cb..73a9540cc 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -22,11 +22,35 @@ define([ Template, ) => { + // The base class for the searchable select view const BASE_CLASS = "searchable-select"; + + // Class names that we use in the view, including those from the dropdown + // module const CLASS_NAMES = { - // Classes from the Semantic UI dropdown module - inactive: "disabled", - loading: "loading", + tooltip: `${BASE_CLASS}-tooltip`, + inputLabel: `${BASE_CLASS}-label`, + placeholder: "default text", // Not sure where these come from + popout: "popout-mode", + accordion: "accordion-mode", + chevronDown: "dropdown icon icon-on-right icon-chevron-down", + chevronRight: "dropdown icon icon-on-right icon-chevron-right", + accordionIcon: "accordion-mode-icon", + popoutIcon: "popout-mode-icon", + dropdown: $().dropdown.settings.className, + }; + + // This is missing from older version of the dropdown module + // TODO: On updating to new version, this should be available + CLASS_NAMES.dropdown.text = "text"; + + // Selectors for the dropdown module + const DROPDOWN_SELECTORS = $().dropdown.settings.selector; + + // Classes that we use from the bootstrap module + const BOOTSTRAP_CLASS_NAMES = { + collapse: "collapse", + collapsed: "collapsed", }; // Classes to use for different types of messages @@ -44,6 +68,7 @@ define([ selectUIClass: "", }, }; + /** * @class SearchableSelectView * @classdesc A select interface that allows the user to search from within @@ -167,14 +192,11 @@ define([ this.model = new SearchSelect(modelAttrs); }, - /** - * Render the view - * @returns {SearchableSelectView} Returns the view - */ + /** @inheritdoc */ render() { const view = this; - // TODO: + // TODO: if (view.apiSettings && !view.semanticAPILoaded) { // eslint-disable-next-line import/no-dynamic-require require(["semanticAPI"], (_SemanticAPI) => { @@ -186,6 +208,7 @@ define([ // Render the template using the view attributes this.$el.html(this.renderTemplate()); + this.$selectUI = this.$el.find(DROPDOWN_SELECTORS.dropdown); // Start the dropdown in an inactive state. This allows us to pre-select // values without triggering a change event. @@ -197,9 +220,8 @@ define([ this.listenToSelectUI(); // Add tool tips for the description - this.$el.find(".item").each((_i, item) => { - view.addTooltip(item); - }); + const items = this.$el.find(`.${CLASS_NAMES.dropdown.item}`); + items.each((_i, item) => view.addTooltip(item)); const invalidSelections = view.model.hasInvalidSelections(); if (invalidSelections) { @@ -214,11 +236,12 @@ define([ return this; }, + /** Initialize the dropdown interface */ renderSelectUI() { const view = this; // Initialize the dropdown interface For explanations of settings, see: // https://semantic-ui.com/modules/dropdown.html#/settings - this.$selectUI = this.$el.find(".ui.dropdown").dropdown({ + this.$selectUI = this.$selectUI.dropdown({ keys: { // So that a user may enter search text using a comma delimiter: false, @@ -245,8 +268,7 @@ define([ }, onChange(values, _text, _$choice) { view.onChange.call(view, values, _text, _$choice); - } - + }, }); view.$selectUI.data("view", view); @@ -297,7 +319,7 @@ define([ sep?.remove(); // Remove separator from second label if the first label is the one // being removed - const allLabels = view.$selectUI.find(".label"); + const allLabels = view.$selectUI.find(DROPDOWN_SELECTORS.siblingLabel); if (allLabels.index($label) === 0) { allLabels.eq(1)?.data("separator")?.remove(); } @@ -314,32 +336,34 @@ define([ * @since 0.0.0 */ onChange(values, _text, _$choice) { - const view = this + const view = this; // Update values for single-select inputs (multi-select are updated // using the onLabelCreate and onRemove callbacks) if (!view.model.get("allowMulti")) { - const silent = this.$selectUI.hasClass(CLASS_NAMES.inactive); + const silent = this.$selectUI.hasClass(CLASS_NAMES.dropdown.disabled); view.model.setSelected(values, { silent }); } // Refresh the tooltips on the labels/text // Ensure tooltips for labels are removed - $(".search-select-tooltip").remove(); + $(`.${CLASS_NAMES.tooltip}`).remove(); // Add a tooltip for single select elements (.text) or multi-select // elements (.label). Delay so that to give time for DOM elements to be // added or removed. setTimeout(() => { - const textEl = view.$selectUI.find(".text:not(.default),.label"); + const selector = `.${CLASS_NAMES.dropdown.text}:not(.default),${DROPDOWN_SELECTORS.siblingLabel}`; + const textEl = view.$selectUI.find(selector); + // Single select text element will not have the value attribute, add // it so that we can find the matching description for the tooltip if (!textEl.data("value") && !view.model.get("allowMulti")) { textEl.data("value", values); } if (textEl) { - textEl.each((i, el) => { + textEl.each((_i, el) => { view.addTooltip.call(view, el, "top"); }); } @@ -422,8 +446,10 @@ define([ * @since 0.0.0 */ updateMenu() { - const menu = $(this.renderTemplate().trim()).find(".menu")[0].innerHTML; - this.$el.find(".menu").html(menu); + const menuClass = CLASS_NAMES.dropdown.menu; + const html = $(this.renderTemplate().trim()); + const menu = html.find(`.${menuClass}`)[0].innerHTML; + this.$el.find(`.${menuClass}`).html(menu); }, /** @@ -435,6 +461,7 @@ define([ const templateOptionsFromModel = { allowMulti: this.model.get("allowMulti"), options: this.model.optionsAsJSON(true), + classes: CLASS_NAMES, }; const templateOptions = _.extend({}, this, templateOptionsFromModel); return this.template(templateOptions); @@ -461,7 +488,6 @@ define([ * @param {string[]} opts The values that are not valid choices */ showInvalidSelectionError(opts) { - let msg = ""; if (opts?.length) { msg += opts.join(", "); @@ -486,39 +512,31 @@ define([ * @returns {jQuery} The element with a tooltip wrapped by jQuery */ addTooltip(element, position = "bottom") { - if (!element) { - return $(element); - } + const $element = $(element); + + if (!element) return $element; // Find the description in the options object, using the data-value // attribute set in the template. The data-value attribute is either the // label, or the value, depending on if a value is provided. - let valueOrLabel = $(element).data("value"); - if (typeof valueOrLabel === "undefined") { - return $(element); - } + let valueOrLabel = $element.data("value"); + + // if undefined, return the element unchanged + if (typeof valueOrLabel === "undefined") return $element; if (typeof valueOrLabel === "boolean") { valueOrLabel = valueOrLabel.toString(); } - const opt = _.chain(this.options) - .values() - .flatten() - .find( - (option) => - option.label === valueOrLabel || option.value === valueOrLabel, - ) - .value(); - - if (!opt) { - return $(element); - } - if (!opt.description) { - return $(element); - } - $(element) + const opt = this.model + .get("options") + .getOptionByLabelOrValue(valueOrLabel); + const description = opt?.get("description"); + + if (!description) return $element; + + $element .tooltip({ - title: opt.description, + title: description, placement: position, container: "body", delay: { @@ -531,85 +549,90 @@ define([ // Allow time for the popup to be added to the DOM setTimeout(() => { // Add class to identify popups when they need to be removed. - $el.data("tooltip").$tip.addClass("search-select-tooltip"); + $el.data("tooltip").$tip.addClass(CLASS_NAMES.tooltip); }, 10); }); - return $(element); + return $element; }, /** - * Re-arrange the HTML to display category contents as sub-menus that - * popout to the left or right of category titles + * Re-arrange HTML to display the full list of options in one static menu */ - convertToPopout() { + convertToList() { if (!this.$selectUI) { return; } - if (this.currentSubmenuMode === "popout") { + if (this.currentSubmenuMode === "list") { return; } + this.currentSubmenuMode = "list"; + + this.$selectUI.find(`.${CLASS_NAMES.popout} > *`).unwrap(); + this.$selectUI.find(`.${CLASS_NAMES.accordion} > *`).unwrap(); + + // TODO + this.$selectUI.find(`.${CLASS_NAMES.accordionIcon}`).remove(); + this.$selectUI.find(`.${CLASS_NAMES.popoutIcon}`).remove(); + + this.$selectUI.removeClass( + `${CLASS_NAMES.popout} ${CLASS_NAMES.accordion}`, + ); + }, + + /** + * Re-arrange the HTML to display category contents as sub-menus that + * popout to the left or right of category titles + */ + convertToPopout() { + if (!this.$selectUI || this.currentSubmenuMode === "popout") return; this.currentSubmenuMode = "popout"; - this.$selectUI.addClass("popout-mode"); - const $headers = this.$selectUI.find(".header"); - if (!$headers || $headers.length === 0) { - return; - } + this.$selectUI.addClass(CLASS_NAMES.popout); + + const $headers = this.getItemHeaders(); + + if (!$headers?.length) return; + $headers.each((_i, header) => { const $header = $(header); - const $itemGroup = $().add($header.nextUntil(".header")); - const $itemAndHeaderGroup = $header.add($header.nextUntil(".header")); - const $icon = $header.next().find(".icon"); + const $itemGroup = $().add( + $header.nextUntil(`.${CLASS_NAMES.dropdown.header}`), + ); + const $itemAndHeaderGroup = $header.add( + $header.nextUntil(`.${CLASS_NAMES.dropdown.header}`), + ); + const $icon = $header.next().find(`.${CLASS_NAMES.dropdown.icon}`); if ($icon && $icon.length > 0) { - const $headerIcon = $icon.clone().addClass("popout-mode-icon").css({ + const $headerIcon = $icon.clone().css({ opacity: "0.9", "margin-right": "1rem", }); $header.prepend($headerIcon[0]); } - $itemAndHeaderGroup.wrapAll("
"); - $itemGroup.wrapAll("
"); + $itemAndHeaderGroup.wrapAll( + `
`, + ); + $itemGroup.wrapAll( + `
`, + ); $header.append( - "", + ``, ); }); }, - /** - * Re-arrange HTML to display the full list of options in one static menu - */ - convertToList() { - if (!this.$selectUI) { - return; - } - if (this.currentSubmenuMode === "list") { - return; - } - this.currentSubmenuMode = "list"; - this.$selectUI.find(".popout-mode > *").unwrap(); - this.$selectUI.find(".accordion-mode > *").unwrap(); - this.$selectUI.find(".popout-mode-icon").remove(); - this.$selectUI.find(".accordion-mode-icon").remove(); - this.$selectUI.removeClass("popout-mode accordion-mode"); - }, - /** * Re-arrange the HTML to display category items with expandable sections, * similar to an accordion element. */ convertToAccordion() { - if (!this.$selectUI) { - return; - } - if (this.currentSubmenuMode === "accordion") { - return; - } + if (!this.$selectUI || this.currentSubmenuMode === "accordion") return; + this.currentSubmenuMode = "accordion"; - this.$selectUI.addClass("accordion-mode"); - const $headers = this.$selectUI.find(".header"); - if (!$headers || $headers.length === 0) { - return; - } + this.$selectUI.addClass(CLASS_NAMES.accordion); + + const $headers = this.getItemHeaders(); + if (!$headers?.length) return; // Id to match the header to the $headers.each((_i, header) => { @@ -619,49 +642,63 @@ define([ const headerText = $header.text().replace(/\W/g, ""); const id = headerText + randomNum; - const $itemGroup = $().add($header.nextUntil(".header")); - const $icon = $header.next().find(".icon"); + const $itemGroup = $().add( + $header.nextUntil(`.${CLASS_NAMES.dropdown.header}`), + ); + const $icon = $header.next().find(`.${CLASS_NAMES.dropdown.icon}`); if ($icon && $icon.length > 0) { const $headerIcon = $icon .clone() - .addClass("accordion-mode-icon") + .addClass(CLASS_NAMES.accordionIcon) .css({ opacity: "0.9", "margin-right": "1rem", }); $header.prepend($headerIcon[0]); $header.wrap( - ``, ); } $itemGroup.wrapAll( - `
`, + `
`, ); $header.append( - "", + ``, ); }); }, + /** + * Get the category headers in the dropdown menu + * @returns {JQuery} The category headers + * @since 0.0.0 + */ + getItemHeaders() { + return this.$selectUI.find(`.${CLASS_NAMES.dropdown.header}`); + }, + /** * In the searchable select interface, hide category headers that are * empty, if any */ hideEmptyCategories() { - const $headers = this.$selectUI.find(".header"); - if (!$headers || $headers.length === 0) { - return; - } + const $headers = this.getItemHeaders(); + if (!$headers?.length) return; + $headers.each((_i, header) => { const $header = $(header); // this is the header - const $itemGroup = $().add($header.nextUntil(".header")); + const $itemGroup = $().add( + $header.nextUntil(`.${CLASS_NAMES.dropdown.header}`), + ); const $itemGroupFiltered = $().add( - $header.nextUntil(".header", ".filtered"), + $header.nextUntil( + `.${CLASS_NAMES.dropdown.header}`, + `.${CLASS_NAMES.dropdown.filtered}`, + ), ); - // If all items are filtered + // If all items are filtered then also hide the header if ($itemGroup.length === $itemGroupFiltered.length) { - // Then also hide the header $header.hide(); } else { $header.show(); @@ -674,7 +711,7 @@ define([ * re previously empty */ showAllCategories() { - this.$selectUI.find(".header:hidden").show(); + this.getItemHeaders().show(); }, /** @@ -725,13 +762,13 @@ define([ /** Visually indicate that the select interface is enabled */ enable() { this.enabled = true; - this.$el.find(".ui.dropdown").removeClass(CLASS_NAMES.inactive); + this.$selectUI.removeClass(CLASS_NAMES.dropdown.disabled); }, /** Visually indicate that the select interface is inactive */ inactivate() { this.enabled = false; - this.$el.find(".ui.dropdown").addClass(CLASS_NAMES.inactive); + this.$selectUI.addClass(CLASS_NAMES.dropdown.disabled); }, /** @@ -772,22 +809,24 @@ define([ if (!this.$selectUI) { return; } - const classes = Object.values(MESSAGE_TYPES).map((type) => type.selectUIClass); + const classes = Object.values(MESSAGE_TYPES).map( + (type) => type.selectUIClass, + ); this.$selectUI.removeClass(classes.join(" ")); if (this.message) this.message.remove(); }, /** Visually indicate that dropdown options are loading */ showLoading() { - this.$el.find(".ui.dropdown").addClass(CLASS_NAMES.loading); + this.$selectUI.addClass(CLASS_NAMES.dropdown.loading); }, /** Remove the loading spinner set by the showLoading */ hideLoading() { - this.$el.find(".ui.dropdown").removeClass(CLASS_NAMES.loading); + this.$selectUI.removeClass(CLASS_NAMES.dropdown.loading); }, }, - ) + ); return SearchableSelectView; }); diff --git a/src/js/views/searchSelect/SeparatorView.js b/src/js/views/searchSelect/SeparatorView.js index 208ee9c86..867cad255 100644 --- a/src/js/views/searchSelect/SeparatorView.js +++ b/src/js/views/searchSelect/SeparatorView.js @@ -3,9 +3,8 @@ define([ "semanticUItransition", `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, ], (Backbone, _Transition, TransitionCSS) => { - // Default class names for the separator element - const BASE_CLASS ="separator"; + const BASE_CLASS = "separator"; const CLASS_NAMES = { highlighted: `${BASE_CLASS}--hover`, }; From 2cd81a59c26396c315e5d209e6515a5e6c3ae997 Mon Sep 17 00:00:00 2001 From: robyngit Date: Mon, 22 Jul 2024 12:37:47 -0400 Subject: [PATCH 084/169] Add formanticUI popup; replace SelectSearch tooltips - Add the newest Formantic UI popup module which is very small - Use in place of Bootstrap tooltip module in SearchableSelectView - Using this module instead of bootstrap simplifies adding & properly removing tooltips. We can start using this module where we are having issues with the Bootstrap tooltips in other places (see tagged issues below). Issues #2253, #2319, #1733, #1694, #1682 --- src/components/semanticUI/popup.min.css | 9 ++ src/components/semanticUI/popup.min.js | 11 ++ src/js/app.js | 1 + .../searchSelect/SearchSelectOptions.js | 3 +- .../searchSelect/SearchableSelectView.js | 133 +++++++++--------- src/js/views/searchSelect/SeparatorView.js | 58 +++----- 6 files changed, 114 insertions(+), 101 deletions(-) create mode 100644 src/components/semanticUI/popup.min.css create mode 100644 src/components/semanticUI/popup.min.js diff --git a/src/components/semanticUI/popup.min.css b/src/components/semanticUI/popup.min.css new file mode 100644 index 000000000..1f8fd75cb --- /dev/null +++ b/src/components/semanticUI/popup.min.css @@ -0,0 +1,9 @@ +/*! + * # Fomantic-UI 2.9.3 - Popup + * https://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * https://opensource.org/licenses/MIT + * + */.ui.popup{display:none;position:absolute;top:0;right:0;min-width:-webkit-min-content;min-width:min-content;z-index:1900;border:1px solid #d4d4d5;line-height:1.4285em;max-width:250px;background:#fff;padding:.833em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.87);border-radius:.28571429rem;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.popup>.header{padding:0;font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1.14285714em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup::before{position:absolute;content:"";width:.71428571em;height:.71428571em;background:#fff;transform:rotate(45deg);z-index:1901;box-shadow:1px 1px 0 0 #bababc}[data-tooltip]{position:relative}[data-tooltip]::before{pointer-events:none;position:absolute;content:"";font-size:1rem;width:.71428571em;height:.71428571em;background:#fff;z-index:1901;box-shadow:1px 1px 0 0 #bababc}[data-tooltip]::after{pointer-events:none;content:attr(data-tooltip);position:absolute;text-transform:none;text-align:left;text-shadow:none;white-space:nowrap;font-size:1rem;border:1px solid #d4d4d5;line-height:1.4285em;max-width:none;background:#fff;padding:.833em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.87);border-radius:.28571429rem;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);z-index:1900}[data-tooltip]::after,[data-tooltip]::before{pointer-events:none;opacity:0;transition:transform .2s ease,opacity .2s ease}[data-tooltip]::after,[data-tooltip]:hover::before{transition-delay:40ms}[data-tooltip]::before,[data-tooltip]:hover::after{transition-delay:0s}[data-tooltip]::before{transform:rotate(45deg) scale(.8);transform-origin:center top}[data-tooltip]::after{transform-origin:center bottom}[data-tooltip]:hover::after,[data-tooltip]:hover::before,[data-tooltip][data-variation~=visible]::after,[data-tooltip][data-variation~=visible]::before{pointer-events:auto;opacity:1}[data-tooltip]:hover::before{transform:rotate(45deg) scale(1)}[data-tooltip]:not([data-position])::after,[data-tooltip][data-position="bottom center"]::after,[data-tooltip][data-position="top center"]::after{transform:translateX(-50%) scale(.8)}[data-tooltip]:not([data-position]):hover::after,[data-tooltip][data-position="bottom center"]:hover::after,[data-tooltip][data-position="top center"]:hover::after{transform:translateX(-50%) scale(1)}[data-tooltip][data-position="left center"]::after,[data-tooltip][data-position="right center"]::after{transform:translateY(-50%) scale(.8)}[data-tooltip][data-position="left center"]:hover::after,[data-tooltip][data-position="right center"]:hover::after{transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1.0001)!important}[data-tooltip][data-position="bottom left"]::after,[data-tooltip][data-position="bottom right"]::after,[data-tooltip][data-position="top left"]::after,[data-tooltip][data-position="top right"]::after{transform:scale(.8)}[data-tooltip][data-position="bottom left"]:hover::after,[data-tooltip][data-position="bottom right"]:hover::after,[data-tooltip][data-position="top left"]:hover::after,[data-tooltip][data-position="top right"]:hover::after{transform:scale(1)}[data-tooltip][data-variation~=fixed]::after{white-space:normal;width:250px}[data-tooltip][data-variation*="wide fixed"]::after{width:350px}[data-tooltip][data-variation*="very wide fixed"]::after{width:550px}@media only screen and (max-width:767.98px){[data-tooltip][data-variation~=fixed]::after{width:250px}}[data-tooltip][data-inverted]::before{box-shadow:none}[data-tooltip]:not([data-position])[data-inverted]::before{background:#1b1c1d}[data-tooltip][data-inverted]::after{background:#1b1c1d;color:#fff;border:none;box-shadow:none}[data-position~=top][data-tooltip]::before{background:#fff}[data-position="top center"][data-tooltip]::after,[data-tooltip]:not([data-position])::after{top:auto;right:auto;left:50%;bottom:100%;margin-bottom:.5em}[data-position="top center"][data-tooltip]::before,[data-tooltip]:not([data-position])::before{top:auto;right:auto;bottom:100%;left:50%;background:#fff;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position="top left"][data-tooltip]::after{top:auto;right:auto;left:0;bottom:100%;margin-bottom:.5em}[data-position="top left"][data-tooltip]::before{top:auto;right:auto;bottom:100%;left:1em;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position="top right"][data-tooltip]::after{top:auto;left:auto;right:0;bottom:100%;margin-bottom:.5em}[data-position="top right"][data-tooltip]::before{top:auto;left:auto;bottom:100%;right:1em;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position~=bottom][data-tooltip]::before{background:#fff;box-shadow:-1px -1px 0 0 #bababc}[data-position="bottom center"][data-tooltip]::after{bottom:auto;right:auto;left:50%;top:100%;margin-top:.5em}[data-position="bottom center"][data-tooltip]::before{bottom:auto;right:auto;top:100%;left:50%;margin-left:-.07142857rem;margin-top:.30714286em}[data-position="bottom left"][data-tooltip]::after{left:0;top:100%;margin-top:.5em}[data-position="bottom left"][data-tooltip]::before{bottom:auto;right:auto;top:100%;left:1em;margin-left:-.07142857rem;margin-top:.14285714rem}[data-position="bottom right"][data-tooltip]::after{right:0;top:100%;margin-top:.5em}[data-position="bottom right"][data-tooltip]::before{bottom:auto;left:auto;top:100%;right:1em;margin-left:-.14285714rem;margin-top:.07142857rem}[data-position="left center"][data-tooltip]::after{right:100%;top:50%;margin-right:.5em}[data-position="left center"][data-tooltip]::before{right:100%;top:50%;margin-top:-.14285714rem;margin-right:-.07142857rem;background:#fff;box-shadow:1px -1px 0 0 #bababc}[data-position="right center"][data-tooltip]::after{left:100%;top:50%;margin-left:.5em}[data-position="right center"][data-tooltip]::before{left:100%;top:50%;margin-top:-.07142857rem;margin-left:.14285714rem;background:#fff;box-shadow:-1px 1px 0 0 #bababc}[data-inverted][data-position~=bottom][data-tooltip]::before{background:#1b1c1d;box-shadow:-1px -1px 0 0 #bababc}[data-inverted][data-position="left center"][data-tooltip]::before{background:#1b1c1d;box-shadow:1px -1px 0 0 #bababc}[data-inverted][data-position="right center"][data-tooltip]::before{background:#1b1c1d;box-shadow:-1px 1px 0 0 #bababc}[data-inverted][data-position~=top][data-tooltip]::before{background:#1b1c1d}[data-position~=bottom][data-tooltip]::before{transform-origin:center bottom}[data-position~=bottom][data-tooltip]::after{transform-origin:center top}[data-position="bottom center"][data-tooltip]::before{transform-origin:center top}[data-position="left center"][data-tooltip]::before{transform-origin:top center}[data-position="left center"][data-tooltip]::after{transform-origin:right center}[data-position="right center"][data-tooltip]::before{transform-origin:right center}[data-position="right center"][data-tooltip]::after{transform-origin:left center}[data-position="top left"][data-tooltip]::after{transform-origin:bottom left}[data-position="top right"][data-tooltip]::after{transform-origin:bottom right}[data-position="bottom left"][data-tooltip]::after{transform-origin:top left}[data-position="bottom right"][data-tooltip]::after{transform-origin:top right}[data-tooltip][data-variation~=basic]::before{display:none}[data-tooltip][data-variation~=multiline]::after{white-space:pre-line}.ui.popup{margin:0}.ui.top.popup{margin:0 0 .71428571em}.ui.top.left.popup{transform-origin:left bottom}.ui.top.center.popup{transform-origin:center bottom}.ui.top.right.popup{transform-origin:right bottom}.ui.left.center.popup{margin:0 .71428571em 0 0;transform-origin:right 50%}.ui.right.center.popup{margin:0 0 0 .71428571em;transform-origin:left 50%}.ui.bottom.popup{margin:.71428571em 0 0}.ui.bottom.left.popup{transform-origin:left top}.ui.bottom.center.popup{transform-origin:center top}.ui.bottom.right.popup{transform-origin:right top}.ui.bottom.center.popup::before{margin-left:-.30714286em;top:-.30714286em;left:50%;right:auto;bottom:auto;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup::before{top:-.30714286em;left:1em;right:auto;bottom:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.right.popup{margin-right:0}.ui.bottom.right.popup::before{top:-.30714286em;right:1em;bottom:auto;left:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.top.center.popup::before{top:auto;right:auto;bottom:-.30714286em;left:50%;margin-left:-.30714286em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup::before{bottom:-.30714286em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup::before{bottom:-.30714286em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup::before{top:50%;right:-.30714286em;bottom:auto;left:auto;margin-top:-.30714286em;box-shadow:1px -1px 0 0 #bababc}.ui.right.center.popup::before{top:50%;left:-.30714286em;bottom:auto;right:auto;margin-top:-.30714286em;box-shadow:-1px 1px 0 0 #bababc}.ui.left.center.popup::before,.ui.right.center.popup::before{background:#fff}.ui.bottom.popup::before{background:#fff}.ui.top.popup::before{background:#fff}.ui.inverted.bottom.popup::before{background:#1b1c1d}.ui.inverted.left.center.popup::before,.ui.inverted.right.center.popup::before{background:#1b1c1d}.ui.inverted.top.popup::before{background:#1b1c1d}.ui.ui.ui.popup>.ui.grid:not(.padded){width:calc(100% + 1.75rem);margin:-.7rem -.875rem}.ui.loading.popup{cursor:default;pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ui.loading.popup *{opacity:.3}.ui.loading.popup::after{position:absolute;content:"";top:50%;left:50%;margin:-1em 0 0 -1em;width:2em;height:2em;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}.ui.invisible.popup{display:block;visibility:hidden!important;z-index:-1}.ui.animating.popup,.ui.visible.popup{display:block}.ui.visible.popup{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.basic.popup::before{display:none}.ui.fixed.popup{width:250px}.ui.wide.popup{max-width:350px}.ui.wide.popup.fixed{width:350px}.ui[class*="very wide"].popup{max-width:550px}.ui[class*="very wide"].popup.fixed{width:550px}@media only screen and (max-width:767.98px){.ui.wide.popup,.ui[class*="very wide"].popup{max-width:250px}.ui.wide.popup.fixed,.ui[class*="very wide"].popup.fixed{width:250px}}.ui.fluid.popup{width:100%;max-width:none}.ui.inverted.popup{background:#1b1c1d;color:#fff;border:none;box-shadow:none}.ui.inverted.popup .header{background:0 0;color:#fff}.ui.inverted.popup::before{background-color:#1b1c1d;box-shadow:none}.ui.primary.popup,.ui.ui.ui.primary.popup::before,[data-tooltip][data-variation~=primary]::after,[data-tooltip][data-variation~=primary]::before{background:#2185d0;color:#fff;border:none}.ui.primary.loading.popup,.ui.ui.ui.primary.loading.popup::before{background:#9bcbef}.ui.ui.ui.primary.popup::before,[data-tooltip][data-variation~=primary]::before{box-shadow:none}.ui.inverted.primary.popup,.ui.ui.ui.inverted.primary.popup::before,[data-tooltip][data-inverted][data-variation~=primary]::after,[data-tooltip][data-inverted][data-variation~=primary]::before{background:#54c8ff;color:#1b1c1d}.ui.inverted.primary.loading.popup,.ui.ui.ui.inverted.primary.loading.popup::before{background:#007eba}.ui.secondary.popup,.ui.ui.ui.secondary.popup::before,[data-tooltip][data-variation~=secondary]::after,[data-tooltip][data-variation~=secondary]::before{background:#1b1c1d;color:#fff;border:none}.ui.secondary.loading.popup,.ui.ui.ui.secondary.loading.popup::before{background:#65696c}.ui.ui.ui.secondary.popup::before,[data-tooltip][data-variation~=secondary]::before{box-shadow:none}.ui.inverted.secondary.popup,.ui.ui.ui.inverted.secondary.popup::before,[data-tooltip][data-inverted][data-variation~=secondary]::after,[data-tooltip][data-inverted][data-variation~=secondary]::before{background:#545454;color:#1b1c1d}.ui.inverted.secondary.loading.popup,.ui.ui.ui.inverted.secondary.loading.popup::before{background:#080808}.ui.red.popup,.ui.ui.ui.red.popup::before,[data-tooltip][data-variation~=red]::after,[data-tooltip][data-variation~=red]::before{background:#db2828;color:#fff;border:none}.ui.red.loading.popup,.ui.ui.ui.red.loading.popup::before{background:#f1abab}.ui.ui.ui.red.popup::before,[data-tooltip][data-variation~=red]::before{box-shadow:none}.ui.inverted.red.popup,.ui.ui.ui.inverted.red.popup::before,[data-tooltip][data-inverted][data-variation~=red]::after,[data-tooltip][data-inverted][data-variation~=red]::before{background:#ff695e;color:#1b1c1d}.ui.inverted.red.loading.popup,.ui.ui.ui.inverted.red.loading.popup::before{background:#c40d00}.ui.orange.popup,.ui.ui.ui.orange.popup::before,[data-tooltip][data-variation~=orange]::after,[data-tooltip][data-variation~=orange]::before{background:#f2711c;color:#fff;border:none}.ui.orange.loading.popup,.ui.ui.ui.orange.loading.popup::before{background:#faccad}.ui.ui.ui.orange.popup::before,[data-tooltip][data-variation~=orange]::before{box-shadow:none}.ui.inverted.orange.popup,.ui.ui.ui.inverted.orange.popup::before,[data-tooltip][data-inverted][data-variation~=orange]::after,[data-tooltip][data-inverted][data-variation~=orange]::before{background:#ff851b;color:#1b1c1d}.ui.inverted.orange.loading.popup,.ui.ui.ui.inverted.orange.loading.popup::before{background:#813c00}.ui.ui.ui.yellow.popup::before,.ui.yellow.popup,[data-tooltip][data-variation~=yellow]::after,[data-tooltip][data-variation~=yellow]::before{background:#fbbd08;color:#fff;border:none}.ui.ui.ui.yellow.loading.popup::before,.ui.yellow.loading.popup{background:#fde59f}.ui.ui.ui.yellow.popup::before,[data-tooltip][data-variation~=yellow]::before{box-shadow:none}.ui.inverted.yellow.popup,.ui.ui.ui.inverted.yellow.popup::before,[data-tooltip][data-inverted][data-variation~=yellow]::after,[data-tooltip][data-inverted][data-variation~=yellow]::before{background:#ffe21f;color:#1b1c1d}.ui.inverted.yellow.loading.popup,.ui.ui.ui.inverted.yellow.loading.popup::before{background:#857400}.ui.olive.popup,.ui.ui.ui.olive.popup::before,[data-tooltip][data-variation~=olive]::after,[data-tooltip][data-variation~=olive]::before{background:#b5cc18;color:#fff;border:none}.ui.olive.loading.popup,.ui.ui.ui.olive.loading.popup::before{background:#e4f18c}.ui.ui.ui.olive.popup::before,[data-tooltip][data-variation~=olive]::before{box-shadow:none}.ui.inverted.olive.popup,.ui.ui.ui.inverted.olive.popup::before,[data-tooltip][data-inverted][data-variation~=olive]::after,[data-tooltip][data-inverted][data-variation~=olive]::before{background:#d9e778;color:#1b1c1d}.ui.inverted.olive.loading.popup,.ui.ui.ui.inverted.olive.loading.popup::before{background:#97a81e}.ui.green.popup,.ui.ui.ui.green.popup::before,[data-tooltip][data-variation~=green]::after,[data-tooltip][data-variation~=green]::before{background:#21ba45;color:#fff;border:none}.ui.green.loading.popup,.ui.ui.ui.green.loading.popup::before{background:#8aeaa0}.ui.ui.ui.green.popup::before,[data-tooltip][data-variation~=green]::before{box-shadow:none}.ui.inverted.green.popup,.ui.ui.ui.inverted.green.popup::before,[data-tooltip][data-inverted][data-variation~=green]::after,[data-tooltip][data-inverted][data-variation~=green]::before{background:#2ecc40;color:#1b1c1d}.ui.inverted.green.loading.popup,.ui.ui.ui.inverted.green.loading.popup::before{background:#124f19}.ui.teal.popup,.ui.ui.ui.teal.popup::before,[data-tooltip][data-variation~=teal]::after,[data-tooltip][data-variation~=teal]::before{background:#00b5ad;color:#fff;border:none}.ui.teal.loading.popup,.ui.ui.ui.teal.loading.popup::before{background:#4ffff7}.ui.ui.ui.teal.popup::before,[data-tooltip][data-variation~=teal]::before{box-shadow:none}.ui.inverted.teal.popup,.ui.ui.ui.inverted.teal.popup::before,[data-tooltip][data-inverted][data-variation~=teal]::after,[data-tooltip][data-inverted][data-variation~=teal]::before{background:#6dffff;color:#1b1c1d}.ui.inverted.teal.loading.popup,.ui.ui.ui.inverted.teal.loading.popup::before{background:#00d3d3}.ui.blue.popup,.ui.ui.ui.blue.popup::before,[data-tooltip][data-variation~=blue]::after,[data-tooltip][data-variation~=blue]::before{background:#2185d0;color:#fff;border:none}.ui.blue.loading.popup,.ui.ui.ui.blue.loading.popup::before{background:#9bcbef}.ui.ui.ui.blue.popup::before,[data-tooltip][data-variation~=blue]::before{box-shadow:none}.ui.inverted.blue.popup,.ui.ui.ui.inverted.blue.popup::before,[data-tooltip][data-inverted][data-variation~=blue]::after,[data-tooltip][data-inverted][data-variation~=blue]::before{background:#54c8ff;color:#1b1c1d}.ui.inverted.blue.loading.popup,.ui.ui.ui.inverted.blue.loading.popup::before{background:#007eba}.ui.ui.ui.violet.popup::before,.ui.violet.popup,[data-tooltip][data-variation~=violet]::after,[data-tooltip][data-variation~=violet]::before{background:#6435c9;color:#fff;border:none}.ui.ui.ui.violet.loading.popup::before,.ui.violet.loading.popup{background:#c1adea}.ui.ui.ui.violet.popup::before,[data-tooltip][data-variation~=violet]::before{box-shadow:none}.ui.inverted.violet.popup,.ui.ui.ui.inverted.violet.popup::before,[data-tooltip][data-inverted][data-variation~=violet]::after,[data-tooltip][data-inverted][data-variation~=violet]::before{background:#a291fb;color:#1b1c1d}.ui.inverted.violet.loading.popup,.ui.ui.ui.inverted.violet.loading.popup::before{background:#2d09ea}.ui.purple.popup,.ui.ui.ui.purple.popup::before,[data-tooltip][data-variation~=purple]::after,[data-tooltip][data-variation~=purple]::before{background:#a333c8;color:#fff;border:none}.ui.purple.loading.popup,.ui.ui.ui.purple.loading.popup::before{background:#daabe9}.ui.ui.ui.purple.popup::before,[data-tooltip][data-variation~=purple]::before{box-shadow:none}.ui.inverted.purple.popup,.ui.ui.ui.inverted.purple.popup::before,[data-tooltip][data-inverted][data-variation~=purple]::after,[data-tooltip][data-inverted][data-variation~=purple]::before{background:#dc73ff;color:#1b1c1d}.ui.inverted.purple.loading.popup,.ui.ui.ui.inverted.purple.loading.popup::before{background:#a300d9}.ui.pink.popup,.ui.ui.ui.pink.popup::before,[data-tooltip][data-variation~=pink]::after,[data-tooltip][data-variation~=pink]::before{background:#e03997;color:#fff;border:none}.ui.pink.loading.popup,.ui.ui.ui.pink.loading.popup::before{background:#f5bddc}.ui.ui.ui.pink.popup::before,[data-tooltip][data-variation~=pink]::before{box-shadow:none}.ui.inverted.pink.popup,.ui.ui.ui.inverted.pink.popup::before,[data-tooltip][data-inverted][data-variation~=pink]::after,[data-tooltip][data-inverted][data-variation~=pink]::before{background:#ff8edf;color:#1b1c1d}.ui.inverted.pink.loading.popup,.ui.ui.ui.inverted.pink.loading.popup::before{background:#f400af}.ui.brown.popup,.ui.ui.ui.brown.popup::before,[data-tooltip][data-variation~=brown]::after,[data-tooltip][data-variation~=brown]::before{background:#a5673f;color:#fff;border:none}.ui.brown.loading.popup,.ui.ui.ui.brown.loading.popup::before{background:#dbb8a2}.ui.ui.ui.brown.popup::before,[data-tooltip][data-variation~=brown]::before{box-shadow:none}.ui.inverted.brown.popup,.ui.ui.ui.inverted.brown.popup::before,[data-tooltip][data-inverted][data-variation~=brown]::after,[data-tooltip][data-inverted][data-variation~=brown]::before{background:#d67c1c;color:#1b1c1d}.ui.inverted.brown.loading.popup,.ui.ui.ui.inverted.brown.loading.popup::before{background:#4f2e0a}.ui.grey.popup,.ui.ui.ui.grey.popup::before,[data-tooltip][data-variation~=grey]::after,[data-tooltip][data-variation~=grey]::before{background:#767676;color:#fff;border:none}.ui.grey.loading.popup,.ui.ui.ui.grey.loading.popup::before{background:#c3c3c3}.ui.ui.ui.grey.popup::before,[data-tooltip][data-variation~=grey]::before{box-shadow:none}.ui.inverted.grey.popup,.ui.ui.ui.inverted.grey.popup::before,[data-tooltip][data-inverted][data-variation~=grey]::after,[data-tooltip][data-inverted][data-variation~=grey]::before{background:#dcddde;color:#1b1c1d}.ui.inverted.grey.loading.popup,.ui.ui.ui.inverted.grey.loading.popup::before{background:#8d9194}.ui.black.popup,.ui.ui.ui.black.popup::before,[data-tooltip][data-variation~=black]::after,[data-tooltip][data-variation~=black]::before{background:#1b1c1d;color:#fff;border:none}.ui.black.loading.popup,.ui.ui.ui.black.loading.popup::before{background:#65696c}.ui.ui.ui.black.popup::before,[data-tooltip][data-variation~=black]::before{box-shadow:none}.ui.inverted.black.popup,.ui.ui.ui.inverted.black.popup::before,[data-tooltip][data-inverted][data-variation~=black]::after,[data-tooltip][data-inverted][data-variation~=black]::before{background:#545454;color:#1b1c1d}.ui.inverted.black.loading.popup,.ui.ui.ui.inverted.black.loading.popup::before{background:#080808}.ui.flowing.popup{max-width:none}.ui.popup{font-size:1rem}.ui.mini.popup{font-size:.78571429rem}[data-tooltip][data-variation~=mini]::after,[data-tooltip][data-variation~=mini]::before{font-size:.78571429rem}.ui.tiny.popup{font-size:.85714286rem}[data-tooltip][data-variation~=tiny]::after,[data-tooltip][data-variation~=tiny]::before{font-size:.85714286rem}.ui.small.popup{font-size:.92857143rem}[data-tooltip][data-variation~=small]::after,[data-tooltip][data-variation~=small]::before{font-size:.92857143rem}.ui.large.popup{font-size:1.14285714rem}[data-tooltip][data-variation~=large]::after,[data-tooltip][data-variation~=large]::before{font-size:1.14285714rem}.ui.big.popup{font-size:1.28571429rem}[data-tooltip][data-variation~=big]::after,[data-tooltip][data-variation~=big]::before{font-size:1.28571429rem}.ui.huge.popup{font-size:1.42857143rem}[data-tooltip][data-variation~=huge]::after,[data-tooltip][data-variation~=huge]::before{font-size:1.42857143rem}.ui.massive.popup{font-size:1.71428571rem}[data-tooltip][data-variation~=massive]::after,[data-tooltip][data-variation~=massive]::before{font-size:1.71428571rem} \ No newline at end of file diff --git a/src/components/semanticUI/popup.min.js b/src/components/semanticUI/popup.min.js new file mode 100644 index 000000000..05625e6fc --- /dev/null +++ b/src/components/semanticUI/popup.min.js @@ -0,0 +1,11 @@ +/* + * # Fomantic UI - 2.9.3 + * https://github.com/fomantic/Fomantic-UI + * https://fomantic-ui.com/ + * + * Copyright 2023 Contributors + * Released under the MIT license + * https://opensource.org/licenses/MIT + * + */ +!function(V,W,M){"use strict";function z(t){return"function"==typeof t&&"number"!=typeof t.nodeType}W=void 0!==W&&W.Math===Math?W:globalThis,V.fn.popup=function(x){var E,t=V(this),k=V(M),S=V(W),A=V("body"),D="ontouchstart"in M.documentElement?"touchstart":"click",O=Date.now(),j=[],F=x,R="string"==typeof F,H=[].slice.call(arguments,1),N=function(t,e){var o;return 0<=[W,M].indexOf(t)?o=V(t):0===(o=V(e.document).find(t)).length&&(o=e.frameElement?N(t,e.parent):A),o};return t.each(function(){var p,s,t,e,o,u=V.isPlainObject(x)?V.extend(!0,{},V.fn.popup.settings,x):V.extend({},V.fn.popup.settings),i=u.selector,c=u.className,d=u.error,f=u.metadata,n=u.namespace,r="."+u.namespace,a="module-"+n,h=V(this),l=N(u.context,W),g=N(u.scrollContext,W),v=N(u.boundary,W),m=u.target?N(u.target,W):h,b=0,w=!1,y=!1,P=this,C=h.data(a),T={initialize:function(){T.debug("Initializing",h),T.createID(),T.bind.events(),!T.exists()&&u.preserve&&T.create(),u.observeChanges&&T.observeChanges(),T.instantiate()},instantiate:function(){T.verbose("Storing instance",T),C=T,h.data(a,C)},observeChanges:function(){"MutationObserver"in W&&((t=new MutationObserver(T.event.documentChanged)).observe(M,{childList:!0,subtree:!0}),T.debug("Setting up mutation observer",t))},refresh:function(){u.popup?p=k.find(u.popup).eq(0):u.inline&&(p=m.nextAll(i.popup).eq(0),u.popup=p),u.popup?(T.set.invisible(),s=T.get.offsetParent(),T.remove.invisible(),u.movePopup&&T.has.popup()&&T.get.offsetParent(p)[0]!==s[0]&&(T.debug("Moving popup to the same offset parent as target"),p.detach().appendTo(s))):s=u.inline?T.get.offsetParent(m):T.has.popup()?T.get.offsetParent(p):A,s.is("html")&&s[0]!==A[0]&&(T.debug("Setting page as offset parent"),s=A),T.get.variation()&&T.set.variation()},reposition:function(){T.refresh(),T.set.position()},destroy:function(){T.debug("Destroying previous module"),t&&t.disconnect(),p&&!u.preserve&&T.removePopup(),clearTimeout(T.hideTimer),clearTimeout(T.showTimer),T.unbind.close(),T.unbind.events(),h.removeData(a)},event:{start:function(t){var e=V.isPlainObject(u.delay)?u.delay.show:u.delay;clearTimeout(T.hideTimer),y&&!u.addTouchEvents||(T.showTimer=setTimeout(function(){T.show()},e))},end:function(){var t=V.isPlainObject(u.delay)?u.delay.hide:u.delay;clearTimeout(T.showTimer),T.hideTimer=setTimeout(function(){T.hide()},t)},touchstart:function(t){y=!0,u.addTouchEvents&&T.show()},resize:function(){T.is.visible()&&T.set.position()},documentChanged:function(t){[].forEach.call(t,function(t){t.removedNodes&&[].forEach.call(t.removedNodes,function(t){(t===P||0").addClass(c.popup).data(f.activator,h).html(o),u.inline?(T.verbose("Inserting popup element inline",p),p.insertAfter(h)):(T.verbose("Appending popup element to body",p),p.appendTo(l)),T.refresh(),T.set.variation(),u.hoverable&&T.bind.popup(),u.onCreate.call(p,P)):u.popup?(k.find(u.popup).data(f.activator,h),T.verbose("Used popup specified in settings"),T.refresh(),u.hoverable&&T.bind.popup()):0":">",'"':""","'":"'","`":"`"};return/["&'<>`]/.test(t)?(t=t.replace(/&(?![\d#a-z]{1,12};)/gi,"&")).replace(/["'<>`]/g,function(t){return e[t]}):t},popup:function(t){var e="",o=V.fn.popup.settings.templates.escape;return void 0!==t&&(t.title&&(t.title=o(t.title),e+='
'+t.title+"
"),t.content&&(t.content=o(t.content),e+='
'+t.content+"
")),e}}}}(jQuery,window,document); \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index 324b55c68..61889c53a 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -95,6 +95,7 @@ require.config({ MetacatUI.root + "/components/semanticUI/transition.min", semanticUIdropdown: MetacatUI.root + "/components/semanticUI/dropdown.min", semanticAPI: `${MetacatUI.root}/components/semanticUI/api.min`, + semanticPopup: `${MetacatUI.root}/components/semanticUI/popup.min`, // To make elements drag and drop, sortable sortable: MetacatUI.root + "/components/sortable.min", //Cesium diff --git a/src/js/collections/searchSelect/SearchSelectOptions.js b/src/js/collections/searchSelect/SearchSelectOptions.js index 0fa13d340..2d4ff1bbc 100644 --- a/src/js/collections/searchSelect/SearchSelectOptions.js +++ b/src/js/collections/searchSelect/SearchSelectOptions.js @@ -108,9 +108,10 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], ( * or label. */ getOptionByLabelOrValue(value) { + const valSearch = typeof value === "boolean" ? value.toString() : value; return this.find( (option) => - option.get("value") === value || option.get("label") === value, + option.get("value") === value || option.get("label") === valSearch, ); }, diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 73a9540cc..9f69917d7 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -1,3 +1,5 @@ +"use strict"; + define([ "jquery", "underscore", @@ -5,9 +7,11 @@ define([ "views/searchSelect/SeparatorView", "models/searchSelect/SearchSelect", "semanticUItransition", - `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, "semanticUIdropdown", + "semanticPopup", + `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, `text!${MetacatUI.root}/components/semanticUI/dropdown.min.css`, + `text!${MetacatUI.root}/components/semanticUI/popup.min.css`, "text!templates/selectUI/searchableSelect.html", ], ( $, @@ -16,19 +20,19 @@ define([ SeparatorView, SearchSelect, _Transition, - TransitionCSS, _Dropdown, + _Popup, + TransitionCSS, DropdownCSS, + PopupCSS, Template, ) => { - // The base class for the searchable select view const BASE_CLASS = "searchable-select"; // Class names that we use in the view, including those from the dropdown // module const CLASS_NAMES = { - tooltip: `${BASE_CLASS}-tooltip`, inputLabel: `${BASE_CLASS}-label`, placeholder: "default text", // Not sure where these come from popout: "popout-mode", @@ -120,18 +124,22 @@ define([ imageHeight: 30, /** - * Can be set to an object to specify API settings for retrieving remote - * selection menu content from an API endpoint. Details of what can be set - * here are specified by the Semantic-UI / Fomantic-UI package. Set to - * false if not retrieving remote content. - * @type {object | booealn} - * @default false - * @since 2.15.0 - * @see - * {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} - * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * Options and selected values for the searchable select interface show a + * tooltip with the description of the option when the user hovers over + * the option. This object is passed to the Formantic UI popup module to + * configure the tooltip. Set to false to disable tooltips. + * @see https://fomantic-ui.com/modules/popup.html#/settings + * @type {object|boolean} + * @since 0.0.0 */ - apiSettings: false, + tooltipSettings: { + position: "top center", + delay: { + show: 500, + hide: 40, + }, + exclusive: true, + }, /** * The primary HTML template for this view. The template follows the @@ -151,6 +159,7 @@ define([ // Add CSS required for this view MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); + MetacatUI.appModel.addCSS(PopupCSS, "semanticUIpopup"); // Set options on the view and create the model const { modelAttrs, viewAttrs } = this.splitModelViewOptions(options); @@ -347,9 +356,6 @@ define([ // Refresh the tooltips on the labels/text - // Ensure tooltips for labels are removed - $(`.${CLASS_NAMES.tooltip}`).remove(); - // Add a tooltip for single select elements (.text) or multi-select // elements (.label). Delay so that to give time for DOM elements to be // added or removed. @@ -364,7 +370,7 @@ define([ } if (textEl) { textEl.each((_i, el) => { - view.addTooltip.call(view, el, "top"); + view.addTooltip.call(view, el); }); } }, 50); @@ -503,57 +509,58 @@ define([ this.showMessage(msg, "error", true); }, + /** + * Get the option model given a dropdown text or label element + * @param {HTMLElement} label The label element + * @returns {SearchSelectOption|null} The option model or null if not + * found + * @since 0.0.0 + */ + optionFromLabel(label) { + const $label = $(label); + if (!$label) return null; + const value = $label.data("value"); + if (!value) return null; + return this.model.get("options").getOptionByLabelOrValue(value); + }, + + /** + * Create HTML for a tooltip for a given option. By default this method + * returns the description of the option, but can be overridden in + * extended SearchableSelectViews to return a custom HTML string based on + * the option. + * @param {SearchSelectOption} option The option to create a tooltip for + * @returns {string|null} An HTML string to use for the content of the + * tooltip. + * @since 0.0.0 + */ + tooltipHTML(option) { + return option?.get("description") || null; + }, + /** * Add a tooltip to a given element using the description in the options * object that's set on the view. * @param {HTMLElement} element The HTML element a tooltip should be * added - * @param {"top"|"bottom"|"left"|"right"} position Tooltip position - * @returns {jQuery} The element with a tooltip wrapped by jQuery + * @param {object} settings Additional settings to override those set in + * view.tooltipSettings. */ - addTooltip(element, position = "bottom") { - const $element = $(element); - - if (!element) return $element; - - // Find the description in the options object, using the data-value - // attribute set in the template. The data-value attribute is either the - // label, or the value, depending on if a value is provided. - let valueOrLabel = $element.data("value"); + addTooltip(element, settings) { + // Tooltips are disabled when tooltipSettings is false + const viewSettings = this.tooltipSettings; + if (!viewSettings) return; - // if undefined, return the element unchanged - if (typeof valueOrLabel === "undefined") return $element; - if (typeof valueOrLabel === "boolean") { - valueOrLabel = valueOrLabel.toString(); - } - - const opt = this.model - .get("options") - .getOptionByLabelOrValue(valueOrLabel); - const description = opt?.get("description"); - - if (!description) return $element; - - $element - .tooltip({ - title: description, - placement: position, - container: "body", - delay: { - show: 900, - hide: 50, - }, - }) - .on("show.bs.popover", (e) => { - const $el = $(e.target); - // Allow time for the popup to be added to the DOM - setTimeout(() => { - // Add class to identify popups when they need to be removed. - $el.data("tooltip").$tip.addClass(CLASS_NAMES.tooltip); - }, 10); - }); - - return $element; + const $element = $(element); + const opt = this.optionFromLabel(element); + const html = this.tooltipHTML(opt); + if (!html) return; + + $element.popup({ + content: html, + ...viewSettings, + ...settings, + }); }, /** diff --git a/src/js/views/searchSelect/SeparatorView.js b/src/js/views/searchSelect/SeparatorView.js index 867cad255..a002c7431 100644 --- a/src/js/views/searchSelect/SeparatorView.js +++ b/src/js/views/searchSelect/SeparatorView.js @@ -1,8 +1,12 @@ +"use strict"; + define([ "backbone", "semanticUItransition", + "semanticUIpopup", `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, -], (Backbone, _Transition, TransitionCSS) => { + `text!${MetacatUI.root}/components/semanticUI/popup.min.css`, +], (Backbone, _Transition, _Popup, TransitionCSS, PopupCSS) => { // Default class names for the separator element const BASE_CLASS = "separator"; const CLASS_NAMES = { @@ -34,18 +38,19 @@ define([ tagName: "span", /** - * The number of milliseconds to wait before showing the tooltip when the - * hovers over this separator element. - * @type {number} - */ - tooltipShowDelay: 600, - - /** - * The number of milliseconds to wait before hiding the tooltip when the - * hovers over this separator element. - * @type {number} + * Settings is passed to the Formantic UI popup module to configure a + * tooltip shown when the user hovers over the separator. Set to `false` + * to disable tooltips. + * @see https://fomantic-ui.com/modules/popup.html#/settings + * @type {object|boolean} */ - tooltipHideDelay: 80, + tooltipSettings: { + content: "Click to switch the operator", + delay: { + show: 400, + hide: 40, + }, + }, /** * Callback function to run when the user hovers. If not set, the default @@ -61,17 +66,10 @@ define([ */ mouseOutCallback: null, - /** - * For separators that are changeable (see - * {@link SearchableSelect#canChangeSeparator}), optional tooltip text to - * show when a user hovers over. - * @type {string} - */ - tooltipText: "Click to switch the operator", - /** @inheritdoc */ initialize(opts) { MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); + MetacatUI.appModel.addCSS(PopupCSS, "semanticUIpopup"); // Set all the options on the view Object.keys(opts).forEach((key) => { this[key] = opts[key]; @@ -136,7 +134,6 @@ define([ /** Remove event listeners and visual indicators */ deactivate() { - this.removeTooltip(); this.$el.css("cursor", "default"); this.$el.off("click mouseenter mouseout"); this.stopListening(this.model); @@ -144,22 +141,9 @@ define([ /** Create and attach a tooltip */ addTooltip() { - const view = this; - const { tooltipText } = this; - if (!tooltipText) return; - this.$el.tooltip("destroy"); - this.$el.tooltip({ - title: tooltipText, - delay: { - show: view.tooltipShowDelay || 0, - hide: view.tooltipHideDelay || 0, - }, - }); - }, - - /** Remove the tooltip */ - removeTooltip() { - this.$el.tooltip("destroy"); + const settings = this.tooltipSettings; + if (!settings) return; + this.$el.popup(settings); }, /** Visually emphasize the separator */ From 2edec8023d8f19a96ea19b57ef6d2a38937af315 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 16:33:25 -0400 Subject: [PATCH 085/169] Add QueryFieldSelect model; simplify views - The QueryFieldSearchSelect model handles manipulating the Solr Query Field options for the QueryFieldSeachSelect view - Move inputLabel and placeHolder text to Search Select models - Adapt Query Field tooltips to semantic UI popup module - Simplify the Search Selects code where possible Issue #2253 --- src/components/semanticUI/card.min.css | 9 + .../searchSelect/QueryFieldSearchSelect.js | 299 ++++++++++++ src/js/models/searchSelect/SearchSelect.js | 60 +-- .../searchSelect/QueryFieldSelectView.js | 440 +++--------------- .../searchSelect/SearchableSelectView.js | 121 ++--- 5 files changed, 458 insertions(+), 471 deletions(-) create mode 100644 src/components/semanticUI/card.min.css create mode 100644 src/js/models/searchSelect/QueryFieldSearchSelect.js diff --git a/src/components/semanticUI/card.min.css b/src/components/semanticUI/card.min.css new file mode 100644 index 000000000..9456831fb --- /dev/null +++ b/src/components/semanticUI/card.min.css @@ -0,0 +1,9 @@ +/*! + * # Fomantic-UI 2.9.3 - Card + * https://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * https://opensource.org/licenses/MIT + * + */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:flex;flex-direction:column;width:290px;min-height:0;background:#fff;padding:0;border:none;border-radius:.28571429rem;box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;transition:box-shadow .1s ease,transform .1s ease;z-index:"";word-wrap:break-word}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:flex;margin:-.875em -.5em;flex-wrap:wrap}.ui.cards>.card{display:flex;margin:.875em .5em;float:none}.ui.card::after,.ui.cards::after{display:block;content:" ";height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.28571429rem .28571429rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .28571429rem .28571429rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.28571429rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content::after,.ui.cards>.card>.content::after{display:block;content:" ";height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:"";font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.28571429em;margin-top:-.21425em;line-height:1.28571429em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:""}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:"";transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:""}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card>.button:last-child,.ui.card>.buttons:last-child,.ui.cards>.card>.button:last-child,.ui.cards>.card>.buttons:last-child{margin-bottom:-1px}.ui.cards:not(.raised)>.basic.card:not(.raised),.ui.ui.ui.basic.card:not(.raised),.ui.ui.ui.basic.cards:not(.raised)>.card:not(.raised){box-shadow:none}.ui.cards:not(.raised)>.basic.card:not(.raised)>.button,.ui.cards:not(.raised)>.basic.card:not(.raised)>.buttons,.ui.ui.ui.basic.card:not(.raised)>.button,.ui.ui.ui.basic.card:not(.raised)>.buttons,.ui.ui.ui.basic.cards:not(.raised)>.card:not(.raised)>.button,.ui.ui.ui.basic.cards:not(.raised)>.card:not(.raised)>.buttons{margin:0;width:100%}.ui.ui.ui.ui.ui.basic.card:not(.raised):hover,.ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover{box-shadow:none}.ui.card .dimmer,.ui.cards>.card .dimmer{background:"";z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);box-shadow:none;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.disabled.card{opacity:.45;color:rgba(40,40,40,.3);pointer-events:none}.ui.loading.card{position:relative;cursor:default;pointer-events:none;transition:all 0s linear}.ui.loading.card::before{position:absolute;content:"";top:0;left:0;background:rgba(255,255,255,.8);width:100%;height:100%;border-radius:.28571429rem;z-index:100}.ui.loading.card::after{position:absolute;content:"";top:50%;left:50%;margin:-1.5em 0 0 -1.5em;width:3em;height:3em;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}.ui.card.horizontal,.ui.horizontal.cards>.card{flex-flow:row wrap;min-width:270px;width:400px;max-width:100%}.ui.card.horizontal>.image,.ui.horizontal.cards>.card>.image{border-radius:.28571429rem 0 0 .28571429rem;width:150px}.ui.card.horizontal>.image>img,.ui.horizontal.cards>.card>.image>img{background-size:cover;background-repeat:no-repeat;background-position:center;justify-content:center;align-items:center;display:flex;width:100%;border-radius:.28571429rem 0 0 .28571429rem}.ui.card.horizontal>.image:last-child>img,.ui.horizontal.cards>.card>.image:last-child>img{border-radius:0 .28571429rem .28571429rem 0}.ui.horizontal.card>.content,.ui.horizontal.cards>.card>.content{border-top:none;flex-basis:1px}.ui.horizontal.card>.extra,.ui.horizontal.cards>.card>.extra{flex-basis:100%}.ui.cards>.raised.card,.ui.raised.card,.ui.raised.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.raised.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.basic.cards>.raised.card,.ui.basic.raised.card,.ui.basic.raised.cards>.card,.ui.raised.cards>.basic.card{box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.basic.raised.cards a.card:hover,.ui.link.basic.cards .raised.card:hover,.ui.link.basic.raised.card:hover,.ui.link.basic.raised.cards .card:hover,.ui.link.cards .basic.raised.card:hover,a.ui.basic.raised.card:hover{box-shadow:0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.centered.cards{justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:not(.icon):hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#fff;border:none;box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;transform:translateY(-3px)}.ui.cards>.primary.card,.ui.primary.card,.ui.primary.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.cards a.primary.card:hover,.ui.link.cards .primary.card:not(.icon):hover,.ui.link.primary.card:hover,.ui.link.primary.cards .card:not(.icon):hover,.ui.primary.cards a.card:hover,a.ui.primary.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.primary.card,.ui.basic.primary.card,.ui.basic.primary.cards>.card,.ui.cards>.basic.primary.card{background:#54c8ff}.ui.basic.cards a.primary.card:hover,.ui.basic.primary.cards a.card:hover,.ui.cards a.basic.primary.card:hover,.ui.link.basic.cards .primary.card:not(.icon):hover,.ui.link.basic.primary.card:hover,.ui.link.basic.primary.cards .card:not(.icon):hover,.ui.link.cards .basic.primary.card:not(.icon):hover,a.ui.basic.primary.card:hover{background:#21b8ff}.ui.inverted.cards>.primary.card,.ui.inverted.primary.card,.ui.inverted.primary.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555}.ui.inverted.cards a.primary.card:hover,.ui.inverted.primary.cards a.card:hover,.ui.link.inverted.cards .primary.card:not(.icon):hover,.ui.link.inverted.primary.card:hover,.ui.link.inverted.primary.cards .card:not(.icon):hover,a.ui.inverted.primary.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555}.ui.basic.inverted.cards>.primary.card,.ui.basic.inverted.primary.card,.ui.basic.inverted.primary.cards>.card,.ui.inverted.cards>.basic.primary.card{background:#2185d0}.ui.basic.inverted.cards a.primary.card:hover,.ui.basic.inverted.primary.cards a.card:hover,.ui.inverted.cards a.basic.primary.card:hover,.ui.link.basic.inverted.cards .primary.card:not(.icon):hover,.ui.link.basic.inverted.primary.card:hover,.ui.link.basic.inverted.primary.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.primary.card:not(.icon):hover,a.ui.basic.inverted.primary.card:hover{background:#1678c2}.ui.cards>.secondary.card,.ui.secondary.card,.ui.secondary.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.cards a.secondary.card:hover,.ui.link.cards .secondary.card:not(.icon):hover,.ui.link.secondary.card:hover,.ui.link.secondary.cards .card:not(.icon):hover,.ui.secondary.cards a.card:hover,a.ui.secondary.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.secondary.card,.ui.basic.secondary.card,.ui.basic.secondary.cards>.card,.ui.cards>.basic.secondary.card{background:#545454}.ui.basic.cards a.secondary.card:hover,.ui.basic.secondary.cards a.card:hover,.ui.cards a.basic.secondary.card:hover,.ui.link.basic.cards .secondary.card:not(.icon):hover,.ui.link.basic.secondary.card:hover,.ui.link.basic.secondary.cards .card:not(.icon):hover,.ui.link.cards .basic.secondary.card:not(.icon):hover,a.ui.basic.secondary.card:hover{background:#6e6e6e}.ui.inverted.cards>.secondary.card,.ui.inverted.secondary.card,.ui.inverted.secondary.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555}.ui.inverted.cards a.secondary.card:hover,.ui.inverted.secondary.cards a.card:hover,.ui.link.inverted.cards .secondary.card:not(.icon):hover,.ui.link.inverted.secondary.card:hover,.ui.link.inverted.secondary.cards .card:not(.icon):hover,a.ui.inverted.secondary.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6e6e6e,0 0 0 1px #555}.ui.basic.inverted.cards>.secondary.card,.ui.basic.inverted.secondary.card,.ui.basic.inverted.secondary.cards>.card,.ui.inverted.cards>.basic.secondary.card{background:#1b1c1d}.ui.basic.inverted.cards a.secondary.card:hover,.ui.basic.inverted.secondary.cards a.card:hover,.ui.inverted.cards a.basic.secondary.card:hover,.ui.link.basic.inverted.cards .secondary.card:not(.icon):hover,.ui.link.basic.inverted.secondary.card:hover,.ui.link.basic.inverted.secondary.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.secondary.card:not(.icon):hover,a.ui.basic.inverted.secondary.card:hover{background:#27292a}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5}.ui.cards a.red.card:hover,.ui.link.cards .red.card:not(.icon):hover,.ui.link.red.card:hover,.ui.link.red.cards .card:not(.icon):hover,.ui.red.cards a.card:hover,a.ui.red.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.red.card,.ui.basic.red.card,.ui.basic.red.cards>.card,.ui.cards>.basic.red.card{background:#ff695e}.ui.basic.cards a.red.card:hover,.ui.basic.red.cards a.card:hover,.ui.cards a.basic.red.card:hover,.ui.link.basic.cards .red.card:not(.icon):hover,.ui.link.basic.red.card:hover,.ui.link.basic.red.cards .card:not(.icon):hover,.ui.link.cards .basic.red.card:not(.icon):hover,a.ui.basic.red.card:hover{background:#ff392b}.ui.inverted.cards>.red.card,.ui.inverted.red.card,.ui.inverted.red.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff695e,0 0 0 1px #555}.ui.inverted.cards a.red.card:hover,.ui.inverted.red.cards a.card:hover,.ui.link.inverted.cards .red.card:not(.icon):hover,.ui.link.inverted.red.card:hover,.ui.link.inverted.red.cards .card:not(.icon):hover,a.ui.inverted.red.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff392b,0 0 0 1px #555}.ui.basic.inverted.cards>.red.card,.ui.basic.inverted.red.card,.ui.basic.inverted.red.cards>.card,.ui.inverted.cards>.basic.red.card{background:#db2828}.ui.basic.inverted.cards a.red.card:hover,.ui.basic.inverted.red.cards a.card:hover,.ui.inverted.cards a.basic.red.card:hover,.ui.link.basic.inverted.cards .red.card:not(.icon):hover,.ui.link.basic.inverted.red.card:hover,.ui.link.basic.inverted.red.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.red.card:not(.icon):hover,a.ui.basic.inverted.red.card:hover{background:#d01919}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5}.ui.cards a.orange.card:hover,.ui.link.cards .orange.card:not(.icon):hover,.ui.link.orange.card:hover,.ui.link.orange.cards .card:not(.icon):hover,.ui.orange.cards a.card:hover,a.ui.orange.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.orange.card,.ui.basic.orange.card,.ui.basic.orange.cards>.card,.ui.cards>.basic.orange.card{background:#ff851b}.ui.basic.cards a.orange.card:hover,.ui.basic.orange.cards a.card:hover,.ui.cards a.basic.orange.card:hover,.ui.link.basic.cards .orange.card:not(.icon):hover,.ui.link.basic.orange.card:hover,.ui.link.basic.orange.cards .card:not(.icon):hover,.ui.link.cards .basic.orange.card:not(.icon):hover,a.ui.basic.orange.card:hover{background:#e76b00}.ui.inverted.cards>.orange.card,.ui.inverted.orange.card,.ui.inverted.orange.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff851b,0 0 0 1px #555}.ui.inverted.cards a.orange.card:hover,.ui.inverted.orange.cards a.card:hover,.ui.link.inverted.cards .orange.card:not(.icon):hover,.ui.link.inverted.orange.card:hover,.ui.link.inverted.orange.cards .card:not(.icon):hover,a.ui.inverted.orange.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #e76b00,0 0 0 1px #555}.ui.basic.inverted.cards>.orange.card,.ui.basic.inverted.orange.card,.ui.basic.inverted.orange.cards>.card,.ui.inverted.cards>.basic.orange.card{background:#f2711c}.ui.basic.inverted.cards a.orange.card:hover,.ui.basic.inverted.orange.cards a.card:hover,.ui.inverted.cards a.basic.orange.card:hover,.ui.link.basic.inverted.cards .orange.card:not(.icon):hover,.ui.link.basic.inverted.orange.card:hover,.ui.link.basic.inverted.orange.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.orange.card:not(.icon):hover,a.ui.basic.inverted.orange.card:hover{background:#f26202}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5}.ui.cards a.yellow.card:hover,.ui.link.cards .yellow.card:not(.icon):hover,.ui.link.yellow.card:hover,.ui.link.yellow.cards .card:not(.icon):hover,.ui.yellow.cards a.card:hover,a.ui.yellow.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.yellow.card,.ui.basic.yellow.card,.ui.basic.yellow.cards>.card,.ui.cards>.basic.yellow.card{background:#ffe21f}.ui.basic.cards a.yellow.card:hover,.ui.basic.yellow.cards a.card:hover,.ui.cards a.basic.yellow.card:hover,.ui.link.basic.cards .yellow.card:not(.icon):hover,.ui.link.basic.yellow.card:hover,.ui.link.basic.yellow.cards .card:not(.icon):hover,.ui.link.cards .basic.yellow.card:not(.icon):hover,a.ui.basic.yellow.card:hover{background:#ebcd00}.ui.inverted.cards>.yellow.card,.ui.inverted.yellow.card,.ui.inverted.yellow.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ffe21f,0 0 0 1px #555}.ui.inverted.cards a.yellow.card:hover,.ui.inverted.yellow.cards a.card:hover,.ui.link.inverted.cards .yellow.card:not(.icon):hover,.ui.link.inverted.yellow.card:hover,.ui.link.inverted.yellow.cards .card:not(.icon):hover,a.ui.inverted.yellow.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ebcd00,0 0 0 1px #555}.ui.basic.inverted.cards>.yellow.card,.ui.basic.inverted.yellow.card,.ui.basic.inverted.yellow.cards>.card,.ui.inverted.cards>.basic.yellow.card{background:#fbbd08}.ui.basic.inverted.cards a.yellow.card:hover,.ui.basic.inverted.yellow.cards a.card:hover,.ui.inverted.cards a.basic.yellow.card:hover,.ui.link.basic.inverted.cards .yellow.card:not(.icon):hover,.ui.link.basic.inverted.yellow.card:hover,.ui.link.basic.inverted.yellow.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.yellow.card:not(.icon):hover,a.ui.basic.inverted.yellow.card:hover{background:#eaae00}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5}.ui.cards a.olive.card:hover,.ui.link.cards .olive.card:not(.icon):hover,.ui.link.olive.card:hover,.ui.link.olive.cards .card:not(.icon):hover,.ui.olive.cards a.card:hover,a.ui.olive.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.olive.card,.ui.basic.olive.card,.ui.basic.olive.cards>.card,.ui.cards>.basic.olive.card{background:#d9e778}.ui.basic.cards a.olive.card:hover,.ui.basic.olive.cards a.card:hover,.ui.cards a.basic.olive.card:hover,.ui.link.basic.cards .olive.card:not(.icon):hover,.ui.link.basic.olive.card:hover,.ui.link.basic.olive.cards .card:not(.icon):hover,.ui.link.cards .basic.olive.card:not(.icon):hover,a.ui.basic.olive.card:hover{background:#d2e745}.ui.inverted.cards>.olive.card,.ui.inverted.olive.card,.ui.inverted.olive.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d9e778,0 0 0 1px #555}.ui.inverted.cards a.olive.card:hover,.ui.inverted.olive.cards a.card:hover,.ui.link.inverted.cards .olive.card:not(.icon):hover,.ui.link.inverted.olive.card:hover,.ui.link.inverted.olive.cards .card:not(.icon):hover,a.ui.inverted.olive.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d2e745,0 0 0 1px #555}.ui.basic.inverted.cards>.olive.card,.ui.basic.inverted.olive.card,.ui.basic.inverted.olive.cards>.card,.ui.inverted.cards>.basic.olive.card{background:#b5cc18}.ui.basic.inverted.cards a.olive.card:hover,.ui.basic.inverted.olive.cards a.card:hover,.ui.inverted.cards a.basic.olive.card:hover,.ui.link.basic.inverted.cards .olive.card:not(.icon):hover,.ui.link.basic.inverted.olive.card:hover,.ui.link.basic.inverted.olive.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.olive.card:not(.icon):hover,a.ui.basic.inverted.olive.card:hover{background:#a7bd0d}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5}.ui.cards a.green.card:hover,.ui.green.cards a.card:hover,.ui.link.cards .green.card:not(.icon):hover,.ui.link.green.card:hover,.ui.link.green.cards .card:not(.icon):hover,a.ui.green.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.green.card,.ui.basic.green.card,.ui.basic.green.cards>.card,.ui.cards>.basic.green.card{background:#2ecc40}.ui.basic.cards a.green.card:hover,.ui.basic.green.cards a.card:hover,.ui.cards a.basic.green.card:hover,.ui.link.basic.cards .green.card:not(.icon):hover,.ui.link.basic.green.card:hover,.ui.link.basic.green.cards .card:not(.icon):hover,.ui.link.cards .basic.green.card:not(.icon):hover,a.ui.basic.green.card:hover{background:#1ea92e}.ui.inverted.cards>.green.card,.ui.inverted.green.card,.ui.inverted.green.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #2ecc40,0 0 0 1px #555}.ui.inverted.cards a.green.card:hover,.ui.inverted.green.cards a.card:hover,.ui.link.inverted.cards .green.card:not(.icon):hover,.ui.link.inverted.green.card:hover,.ui.link.inverted.green.cards .card:not(.icon):hover,a.ui.inverted.green.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #1ea92e,0 0 0 1px #555}.ui.basic.inverted.cards>.green.card,.ui.basic.inverted.green.card,.ui.basic.inverted.green.cards>.card,.ui.inverted.cards>.basic.green.card{background:#21ba45}.ui.basic.inverted.cards a.green.card:hover,.ui.basic.inverted.green.cards a.card:hover,.ui.inverted.cards a.basic.green.card:hover,.ui.link.basic.inverted.cards .green.card:not(.icon):hover,.ui.link.basic.inverted.green.card:hover,.ui.link.basic.inverted.green.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.green.card:not(.icon):hover,a.ui.basic.inverted.green.card:hover{background:#16ab39}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5}.ui.cards a.teal.card:hover,.ui.link.cards .teal.card:not(.icon):hover,.ui.link.teal.card:hover,.ui.link.teal.cards .card:not(.icon):hover,.ui.teal.cards a.card:hover,a.ui.teal.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.teal.card,.ui.basic.teal.card,.ui.basic.teal.cards>.card,.ui.cards>.basic.teal.card{background:#6dffff}.ui.basic.cards a.teal.card:hover,.ui.basic.teal.cards a.card:hover,.ui.cards a.basic.teal.card:hover,.ui.link.basic.cards .teal.card:not(.icon):hover,.ui.link.basic.teal.card:hover,.ui.link.basic.teal.cards .card:not(.icon):hover,.ui.link.cards .basic.teal.card:not(.icon):hover,a.ui.basic.teal.card:hover{background:#3affff}.ui.inverted.cards>.teal.card,.ui.inverted.teal.card,.ui.inverted.teal.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6dffff,0 0 0 1px #555}.ui.inverted.cards a.teal.card:hover,.ui.inverted.teal.cards a.card:hover,.ui.link.inverted.cards .teal.card:not(.icon):hover,.ui.link.inverted.teal.card:hover,.ui.link.inverted.teal.cards .card:not(.icon):hover,a.ui.inverted.teal.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #3affff,0 0 0 1px #555}.ui.basic.inverted.cards>.teal.card,.ui.basic.inverted.teal.card,.ui.basic.inverted.teal.cards>.card,.ui.inverted.cards>.basic.teal.card{background:#00b5ad}.ui.basic.inverted.cards a.teal.card:hover,.ui.basic.inverted.teal.cards a.card:hover,.ui.inverted.cards a.basic.teal.card:hover,.ui.link.basic.inverted.cards .teal.card:not(.icon):hover,.ui.link.basic.inverted.teal.card:hover,.ui.link.basic.inverted.teal.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.teal.card:not(.icon):hover,a.ui.basic.inverted.teal.card:hover{background:#009c95}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.blue.cards a.card:hover,.ui.cards a.blue.card:hover,.ui.link.blue.card:hover,.ui.link.blue.cards .card:not(.icon):hover,.ui.link.cards .blue.card:not(.icon):hover,a.ui.blue.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.basic.blue.card,.ui.basic.blue.cards>.card,.ui.basic.cards>.blue.card,.ui.cards>.basic.blue.card{background:#54c8ff}.ui.basic.blue.cards a.card:hover,.ui.basic.cards a.blue.card:hover,.ui.cards a.basic.blue.card:hover,.ui.link.basic.blue.card:hover,.ui.link.basic.blue.cards .card:not(.icon):hover,.ui.link.basic.cards .blue.card:not(.icon):hover,.ui.link.cards .basic.blue.card:not(.icon):hover,a.ui.basic.blue.card:hover{background:#21b8ff}.ui.inverted.blue.card,.ui.inverted.blue.cards>.card,.ui.inverted.cards>.blue.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555}.ui.inverted.blue.cards a.card:hover,.ui.inverted.cards a.blue.card:hover,.ui.link.inverted.blue.card:hover,.ui.link.inverted.blue.cards .card:not(.icon):hover,.ui.link.inverted.cards .blue.card:not(.icon):hover,a.ui.inverted.blue.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555}.ui.basic.inverted.blue.card,.ui.basic.inverted.blue.cards>.card,.ui.basic.inverted.cards>.blue.card,.ui.inverted.cards>.basic.blue.card{background:#2185d0}.ui.basic.inverted.blue.cards a.card:hover,.ui.basic.inverted.cards a.blue.card:hover,.ui.inverted.cards a.basic.blue.card:hover,.ui.link.basic.inverted.blue.card:hover,.ui.link.basic.inverted.blue.cards .card:not(.icon):hover,.ui.link.basic.inverted.cards .blue.card:not(.icon):hover,.ui.link.inverted.cards .basic.blue.card:not(.icon):hover,a.ui.basic.inverted.blue.card:hover{background:#1678c2}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5}.ui.cards a.violet.card:hover,.ui.link.cards .violet.card:not(.icon):hover,.ui.link.violet.card:hover,.ui.link.violet.cards .card:not(.icon):hover,.ui.violet.cards a.card:hover,a.ui.violet.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.violet.card,.ui.basic.violet.card,.ui.basic.violet.cards>.card,.ui.cards>.basic.violet.card{background:#a291fb}.ui.basic.cards a.violet.card:hover,.ui.basic.violet.cards a.card:hover,.ui.cards a.basic.violet.card:hover,.ui.link.basic.cards .violet.card:not(.icon):hover,.ui.link.basic.violet.card:hover,.ui.link.basic.violet.cards .card:not(.icon):hover,.ui.link.cards .basic.violet.card:not(.icon):hover,a.ui.basic.violet.card:hover{background:#745aff}.ui.inverted.cards>.violet.card,.ui.inverted.violet.card,.ui.inverted.violet.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #a291fb,0 0 0 1px #555}.ui.inverted.cards a.violet.card:hover,.ui.inverted.violet.cards a.card:hover,.ui.link.inverted.cards .violet.card:not(.icon):hover,.ui.link.inverted.violet.card:hover,.ui.link.inverted.violet.cards .card:not(.icon):hover,a.ui.inverted.violet.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #745aff,0 0 0 1px #555}.ui.basic.inverted.cards>.violet.card,.ui.basic.inverted.violet.card,.ui.basic.inverted.violet.cards>.card,.ui.inverted.cards>.basic.violet.card{background:#6435c9}.ui.basic.inverted.cards a.violet.card:hover,.ui.basic.inverted.violet.cards a.card:hover,.ui.inverted.cards a.basic.violet.card:hover,.ui.link.basic.inverted.cards .violet.card:not(.icon):hover,.ui.link.basic.inverted.violet.card:hover,.ui.link.basic.inverted.violet.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.violet.card:not(.icon):hover,a.ui.basic.inverted.violet.card:hover{background:#5829bb}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5}.ui.cards a.purple.card:hover,.ui.link.cards .purple.card:not(.icon):hover,.ui.link.purple.card:hover,.ui.link.purple.cards .card:not(.icon):hover,.ui.purple.cards a.card:hover,a.ui.purple.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.purple.card,.ui.basic.purple.card,.ui.basic.purple.cards>.card,.ui.cards>.basic.purple.card{background:#dc73ff}.ui.basic.cards a.purple.card:hover,.ui.basic.purple.cards a.card:hover,.ui.cards a.basic.purple.card:hover,.ui.link.basic.cards .purple.card:not(.icon):hover,.ui.link.basic.purple.card:hover,.ui.link.basic.purple.cards .card:not(.icon):hover,.ui.link.cards .basic.purple.card:not(.icon):hover,a.ui.basic.purple.card:hover{background:#cf40ff}.ui.inverted.cards>.purple.card,.ui.inverted.purple.card,.ui.inverted.purple.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dc73ff,0 0 0 1px #555}.ui.inverted.cards a.purple.card:hover,.ui.inverted.purple.cards a.card:hover,.ui.link.inverted.cards .purple.card:not(.icon):hover,.ui.link.inverted.purple.card:hover,.ui.link.inverted.purple.cards .card:not(.icon):hover,a.ui.inverted.purple.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #cf40ff,0 0 0 1px #555}.ui.basic.inverted.cards>.purple.card,.ui.basic.inverted.purple.card,.ui.basic.inverted.purple.cards>.card,.ui.inverted.cards>.basic.purple.card{background:#a333c8}.ui.basic.inverted.cards a.purple.card:hover,.ui.basic.inverted.purple.cards a.card:hover,.ui.inverted.cards a.basic.purple.card:hover,.ui.link.basic.inverted.cards .purple.card:not(.icon):hover,.ui.link.basic.inverted.purple.card:hover,.ui.link.basic.inverted.purple.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.purple.card:not(.icon):hover,a.ui.basic.inverted.purple.card:hover{background:#9627ba}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5}.ui.cards a.pink.card:hover,.ui.link.cards .pink.card:not(.icon):hover,.ui.link.pink.card:hover,.ui.link.pink.cards .card:not(.icon):hover,.ui.pink.cards a.card:hover,a.ui.pink.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.pink.card,.ui.basic.pink.card,.ui.basic.pink.cards>.card,.ui.cards>.basic.pink.card{background:#ff8edf}.ui.basic.cards a.pink.card:hover,.ui.basic.pink.cards a.card:hover,.ui.cards a.basic.pink.card:hover,.ui.link.basic.cards .pink.card:not(.icon):hover,.ui.link.basic.pink.card:hover,.ui.link.basic.pink.cards .card:not(.icon):hover,.ui.link.cards .basic.pink.card:not(.icon):hover,a.ui.basic.pink.card:hover{background:#ff5bd1}.ui.inverted.cards>.pink.card,.ui.inverted.pink.card,.ui.inverted.pink.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff8edf,0 0 0 1px #555}.ui.inverted.cards a.pink.card:hover,.ui.inverted.pink.cards a.card:hover,.ui.link.inverted.cards .pink.card:not(.icon):hover,.ui.link.inverted.pink.card:hover,.ui.link.inverted.pink.cards .card:not(.icon):hover,a.ui.inverted.pink.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff5bd1,0 0 0 1px #555}.ui.basic.inverted.cards>.pink.card,.ui.basic.inverted.pink.card,.ui.basic.inverted.pink.cards>.card,.ui.inverted.cards>.basic.pink.card{background:#e03997}.ui.basic.inverted.cards a.pink.card:hover,.ui.basic.inverted.pink.cards a.card:hover,.ui.inverted.cards a.basic.pink.card:hover,.ui.link.basic.inverted.cards .pink.card:not(.icon):hover,.ui.link.basic.inverted.pink.card:hover,.ui.link.basic.inverted.pink.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.pink.card:not(.icon):hover,a.ui.basic.inverted.pink.card:hover{background:#e61a8d}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5}.ui.brown.cards a.card:hover,.ui.cards a.brown.card:hover,.ui.link.brown.card:hover,.ui.link.brown.cards .card:not(.icon):hover,.ui.link.cards .brown.card:not(.icon):hover,a.ui.brown.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd}.ui.basic.brown.card,.ui.basic.brown.cards>.card,.ui.basic.cards>.brown.card,.ui.cards>.basic.brown.card{background:#d67c1c}.ui.basic.brown.cards a.card:hover,.ui.basic.cards a.brown.card:hover,.ui.cards a.basic.brown.card:hover,.ui.link.basic.brown.card:hover,.ui.link.basic.brown.cards .card:not(.icon):hover,.ui.link.basic.cards .brown.card:not(.icon):hover,.ui.link.cards .basic.brown.card:not(.icon):hover,a.ui.basic.brown.card:hover{background:#b0620f}.ui.inverted.brown.card,.ui.inverted.brown.cards>.card,.ui.inverted.cards>.brown.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d67c1c,0 0 0 1px #555}.ui.inverted.brown.cards a.card:hover,.ui.inverted.cards a.brown.card:hover,.ui.link.inverted.brown.card:hover,.ui.link.inverted.brown.cards .card:not(.icon):hover,.ui.link.inverted.cards .brown.card:not(.icon):hover,a.ui.inverted.brown.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #b0620f,0 0 0 1px #555}.ui.basic.inverted.brown.card,.ui.basic.inverted.brown.cards>.card,.ui.basic.inverted.cards>.brown.card,.ui.inverted.cards>.basic.brown.card{background:#a5673f}.ui.basic.inverted.brown.cards a.card:hover,.ui.basic.inverted.cards a.brown.card:hover,.ui.inverted.cards a.basic.brown.card:hover,.ui.link.basic.inverted.brown.card:hover,.ui.link.basic.inverted.brown.cards .card:not(.icon):hover,.ui.link.basic.inverted.cards .brown.card:not(.icon):hover,.ui.link.inverted.cards .basic.brown.card:not(.icon):hover,a.ui.basic.inverted.brown.card:hover{background:#975b33}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5}.ui.cards a.grey.card:hover,.ui.grey.cards a.card:hover,.ui.link.cards .grey.card:not(.icon):hover,.ui.link.grey.card:hover,.ui.link.grey.cards .card:not(.icon):hover,a.ui.grey.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd}.ui.basic.cards>.grey.card,.ui.basic.grey.card,.ui.basic.grey.cards>.card,.ui.cards>.basic.grey.card{background:#dcddde}.ui.basic.cards a.grey.card:hover,.ui.basic.grey.cards a.card:hover,.ui.cards a.basic.grey.card:hover,.ui.link.basic.cards .grey.card:not(.icon):hover,.ui.link.basic.grey.card:hover,.ui.link.basic.grey.cards .card:not(.icon):hover,.ui.link.cards .basic.grey.card:not(.icon):hover,a.ui.basic.grey.card:hover{background:#c2c4c5}.ui.inverted.cards>.grey.card,.ui.inverted.grey.card,.ui.inverted.grey.cards>.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dcddde,0 0 0 1px #555}.ui.inverted.cards a.grey.card:hover,.ui.inverted.grey.cards a.card:hover,.ui.link.inverted.cards .grey.card:not(.icon):hover,.ui.link.inverted.grey.card:hover,.ui.link.inverted.grey.cards .card:not(.icon):hover,a.ui.inverted.grey.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #c2c4c5,0 0 0 1px #555}.ui.basic.inverted.cards>.grey.card,.ui.basic.inverted.grey.card,.ui.basic.inverted.grey.cards>.card,.ui.inverted.cards>.basic.grey.card{background:#767676}.ui.basic.inverted.cards a.grey.card:hover,.ui.basic.inverted.grey.cards a.card:hover,.ui.inverted.cards a.basic.grey.card:hover,.ui.link.basic.inverted.cards .grey.card:not(.icon):hover,.ui.link.basic.inverted.grey.card:hover,.ui.link.basic.inverted.grey.cards .card:not(.icon):hover,.ui.link.inverted.cards .basic.grey.card:not(.icon):hover,a.ui.basic.inverted.grey.card:hover{background:#838383}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.black.cards a.card:hover,.ui.cards a.black.card:hover,.ui.link.black.card:hover,.ui.link.black.cards .card:not(.icon):hover,.ui.link.cards .black.card:not(.icon):hover,a.ui.black.card:hover{box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.basic.black.card,.ui.basic.black.cards>.card,.ui.basic.cards>.black.card,.ui.cards>.basic.black.card{background:#545454}.ui.basic.black.card .content,.ui.basic.black.card .description,.ui.basic.black.card .header,.ui.basic.black.card .meta,.ui.basic.black.cards>.card .content,.ui.basic.black.cards>.card .description,.ui.basic.black.cards>.card .header,.ui.basic.black.cards>.card .meta,.ui.basic.cards>.black.card .content,.ui.basic.cards>.black.card .description,.ui.basic.cards>.black.card .header,.ui.basic.cards>.black.card .meta,.ui.cards>.basic.black.card .content,.ui.cards>.basic.black.card .description,.ui.cards>.basic.black.card .header,.ui.cards>.basic.black.card .meta{color:#fff}.ui.basic.black.cards a.card:hover,.ui.basic.cards a.black.card:hover,.ui.cards a.basic.black.card:hover,.ui.link.basic.black.card:hover,.ui.link.basic.black.cards .card:not(.icon):hover,.ui.link.basic.cards .black.card:not(.icon):hover,.ui.link.cards .basic.black.card:not(.icon):hover,a.ui.basic.black.card:hover{background:#000}.ui.inverted.black.card,.ui.inverted.black.cards>.card,.ui.inverted.cards>.black.card{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555}.ui.inverted.black.cards a.card:hover,.ui.inverted.cards a.black.card:hover,.ui.link.inverted.black.card:hover,.ui.link.inverted.black.cards .card:not(.icon):hover,.ui.link.inverted.cards .black.card:not(.icon):hover,a.ui.inverted.black.card:hover{box-shadow:0 1px 3px 0 #555,0 2px 0 0 #000,0 0 0 1px #555}.ui.basic.inverted.black.card,.ui.basic.inverted.black.cards>.card,.ui.basic.inverted.cards>.black.card,.ui.inverted.cards>.basic.black.card{background:#1b1c1d}.ui.basic.inverted.black.cards a.card:hover,.ui.basic.inverted.cards a.black.card:hover,.ui.inverted.cards a.basic.black.card:hover,.ui.link.basic.inverted.black.card:hover,.ui.link.basic.inverted.black.cards .card:not(.icon):hover,.ui.link.basic.inverted.cards .black.card:not(.icon):hover,.ui.link.inverted.cards .basic.black.card:not(.icon):hover,a.ui.basic.inverted.black.card:hover{background:#27292a}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.666666666666664% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.285714285714285% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767.98px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767.98px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em 1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em}.ui.mini.card,.ui.mini.cards .card{font-size:.78571429rem}.ui.tiny.card,.ui.tiny.cards .card{font-size:.85714286rem}.ui.small.card,.ui.small.cards .card{font-size:.92857143rem}.ui.large.card,.ui.large.cards .card{font-size:1.14285714rem}.ui.big.card,.ui.big.cards .card{font-size:1.28571429rem}.ui.huge.card,.ui.huge.cards .card{font-size:1.42857143rem}.ui.massive.card,.ui.massive.cards .card{font-size:1.71428571rem}.ui.inverted.card,.ui.inverted.cards>.card{background:#1b1c1d;box-shadow:0 1px 3px 0 #555,0 0 0 1px #555}.ui.inverted.card>.content,.ui.inverted.cards>.card>.content{border-top:1px solid rgba(255,255,255,.15)}.ui.inverted.card>.content>.header,.ui.inverted.cards>.card>.content>.header{color:rgba(255,255,255,.9)}.ui.inverted.card>.content>a.header,.ui.inverted.cards>.card>.content>a.header{color:rgba(255,255,255,.9)}.ui.inverted.card>.content>a.header:hover,.ui.inverted.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.inverted.card>.content>.description,.ui.inverted.cards>.card>.content>.description{color:rgba(255,255,255,.8)}.ui.inverted.card .meta,.ui.inverted.cards>.card .meta{color:rgba(255,255,255,.7)}.ui.inverted.card .meta>a:not(.ui),.ui.inverted.cards>.card .meta>a:not(.ui){color:rgba(255,255,255,.7)}.ui.inverted.card .meta>a:not(.ui):hover,.ui.inverted.cards>.card .meta>a:not(.ui):hover{color:#fff}.ui.inverted.card>.extra,.ui.inverted.cards>.card>.extra{border-top:1px solid rgba(255,255,255,.15)!important;color:rgba(255,255,255,.7)}.ui.inverted.card>.extra a:not(.ui),.ui.inverted.cards>.card>.extra a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.card>.extra a:not(.ui):hover,.ui.inverted.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.inverted.cards a.card:hover,.ui.inverted.link.card:hover,.ui.inverted.link.cards .card:not(.icon):hover,a.inverted.ui.card:hover{background:#1b1c1d}.ui.inverted.loading.card{color:#fff}.ui.inverted.loading.card::before{background:rgba(0,0,0,.85)} \ No newline at end of file diff --git a/src/js/models/searchSelect/QueryFieldSearchSelect.js b/src/js/models/searchSelect/QueryFieldSearchSelect.js new file mode 100644 index 000000000..7902fde06 --- /dev/null +++ b/src/js/models/searchSelect/QueryFieldSearchSelect.js @@ -0,0 +1,299 @@ +"use strict"; + +define([ + "models/searchSelect/SearchSelect", + "collections/queryFields/QueryFields", +], (SearchSelect, QueryFields) => { + /** + * @class QueryFieldSearchSelect + * @classdesc An extension of SearchSelect that sets the options to the query + * fields (e.g. Solr fields) available for searching. + * @classcategory Models/SearchSelect + * @since 0.0.0 + * @augments Backbone.Model + */ + const QueryFieldSearchSelect = SearchSelect.extend({ + /** @lends QueryFieldSearchSelect.prototype */ + + /** + * An additional field object contains the properties an additional query + * field to add that are required to render it correctly. An additional + * query field is one that does not actually exist in the query service + * index. + * @typedef {object} AdditionalField + * @property {string} name - A unique ID to represent this field. It must + * not match the name of any other query fields. + * @property {string[]} fields - The list of real query fields that this + * abstracted field will represent. It must exactly match the names of the + * query fields that actually exist. + * @property {string} label - A user-facing label to display. + * @property {string} description - A description for this field. + * @property {string} category - The name of the category under which to + * place this field. It must match one of the category names for an existing + * query field. + * @since 2.15.0 + */ + + /** + * @returns {object} The default attributes for this model + * @property {AdditionalField[]} addFields - A list of additional fields + * which are not retrieved from the query service index, but which should be + * added to the list of options. This can be used to add abstracted fields + * which are a combination of multiple query fields, or to add a duplicate + * field that has a different label. + * @property {string[]} commonFields - A list of query fields names to + * display at the top of the menu, above all other category headers + * @property {string[]} categoriesToAlphabetize - The names of categories + * that should have items sorted alphabetically. Names must exactly match + * those in the {@link QueryField#categoriesMap Query Field model} + * @property {boolean} excludeNonSearchable - Whether or not to exclude + * fields which are not searchable. Set to false to keep query fields that + * are not searchable in the returned list + * @property {string} submenuStyle - The submenu style is set to "accordion" + * by default for this submodel + * @property {string[]} excludeFields - A list of query field names to + * exclude from the list of options. + */ + defaults() { + return { + ...SearchSelect.prototype.defaults(), + placeholderText: "Search for or select a field", + inputLabel: "Select one or more metadata fields to query", + addFields: [], + commonFields: ["text", "documents-special-field"], + categoriesToAlphabetize: ["General"], + excludeNonSearchable: true, + submenuStyle: "accordion", + excludeFields: [], + }; + }, + + /** + * Initializes the QueryFieldSearchSelect model + * @param {object} attributes - A literal object with model attributes + * @param {object} options - A literal object with options + * @param {boolean} options.collectionQuery - Set this to true to + * automatically set the excludeFields and addFields to the collection query + * defaults set in the appModel. See + * {@link AppModel#collectionQueryExcludeFields} and + * {@link AppModel#collectionQuerySpecialFields}. + */ + initialize(attributes, options = {}) { + if (options.collectionQuery) { + this.set( + "excludeFields", + MetacatUI.appModel.get("collectionQueryExcludeFields"), + ); + this.set( + "addFields", + MetacatUI.appModel.get("collectionQuerySpecialFields"), + ); + } + this.getQueryFieldOptions(); + SearchSelect.prototype.initialize.call(this, attributes, options); + }, + + /** + * Fetches the query fields from the query service, converts them to the + * format required by the SearchableSelectView, and sets them as the options + * for this model + */ + async getQueryFieldOptions() { + try { + const queryFields = await this.fetchQueryFields(); + const fields = queryFields.toJSON(); + const excludedFields = this.excludeFields(fields); + const addedFields = this.addFields(excludedFields); + const options = addedFields.map(this.fieldToOption); + const sortedOptions = this.sortFields(options); + this.updateOptions(sortedOptions); + } catch (error) { + this.set("error", error); + } + }, + + /** + * Fetches the query fields from the query service + * @returns {Promise} A promise that resolves with the query fields + * collection + */ + async fetchQueryFields() { + if (MetacatUI.queryFields?.length) { + return MetacatUI.queryFields; + } + MetacatUI.queryFields = new QueryFields(); + return MetacatUI.queryFields.fetch(); + }, + + /** + * Filters out any objects in the fieldsJSON array that have a ".name" + * property that matches one of the strings in the fieldsToExclude array + * @param {object[]} fieldsJSON - JSON returned from QueryFields.toJSON() + * @returns {object[]} The filtered fieldsJSON array + */ + excludeFields(fieldsJSON) { + const fieldsToExclude = this.get("excludeFields"); + const excludeNonSearchable = this.get("excludeNonSearchable"); + + let filteredJSON = fieldsJSON; + if (fieldsToExclude?.length) { + filteredJSON = fieldsJSON.filter( + (field) => !fieldsToExclude.includes(field.name), + ); + } + if (excludeNonSearchable) { + filteredJSON = filteredJSON.filter( + (field) => field.searchable !== false && field.searchable !== "false", + ); + } + return filteredJSON; + }, + + /** + * Adds fields to the fieldsJSON array that are specified in the addFields + * property of this model + * @param {object[]} fieldsJSON - JSON returned from QueryFields.toJSON() + * @returns {object[]} The fieldsJSON array with additional fields added + */ + addFields(fieldsJSON) { + const fieldsToAdd = this.get("addFields"); + if (!fieldsToAdd?.length) return fieldsJSON; + + const fieldsWithCategoryInfo = fieldsToAdd.map((fieldToAdd) => { + const field = { ...fieldToAdd }; + if (field.category) { + const categoryInfo = fieldsJSON.find( + (f) => f.category === field.category, + ); + if (categoryInfo) { + field.icon = field.icon || categoryInfo.icon; + field.categoryOrder = + field.categoryOrder || categoryInfo.categoryOrder; + } + } + return field; + }); + + return fieldsJSON.concat(fieldsWithCategoryInfo); + }, + + /** + * Converts an object that represents a QueryField model to the format + * specified by the SearchableSelectView.options + * @param {object} field An object with properties corresponding to a + * QueryField model + * @returns {object} An object with properties that match the format + * specified by the SearchableSelectView.options + */ + fieldToOption(field) { + if (!field) return {}; + return { + label: field.label || field.name, + value: field.name, + description: field.friendlyDescription || field.description, + icon: field.icon, + category: field.category, + categoryOrder: field.categoryOrder, + type: field.type, + }; + }, + + /** + * Sorts the fieldsJSON array by categoryOrder and then alphabetically + * within each category if the category is specified in the + * categoriesToAlphabetize property of this model. + * @param {object[]} unsortedOptions - An array of objects that represent + * attributes for SearchSelectOptions. + * @returns {object[]} The sorted options + */ + sortFields(unsortedOptions) { + const options = unsortedOptions; + const commonFields = this.get("commonFields"); + if (commonFields?.length) { + commonFields.forEach((commonFieldName) => { + const i = options.findIndex( + (field) => field.value === commonFieldName, + ); + if (i > 0) { + options[i] = { + ...options[i], + category: "", + categoryOrder: 0, + icon: "star", + }; + } + }); + } + + options.sort((a, b) => a.categoryOrder - b.categoryOrder); + + const sortCategories = this.get("categoriesToAlphabetize"); + if (sortCategories?.length) { + sortCategories.forEach((categoryName) => { + const category = options.filter( + (field) => field.category === categoryName, + ); + category.sort((a, b) => + a.label.toLowerCase().localeCompare(b.label.toLowerCase()), + ); + const categoryIndex = options.findIndex( + (field) => field.category === categoryName, + ); + options.splice(categoryIndex, category.length, ...category); + }); + } + + return options; + }, + + /** + * For options that are added fields, not real query fields from the query + * service, this method sets fields and types attributes on the option model + * that are the real query fields that the added field represents. + * @param {SearchSelectOption} option - The option model to update + */ + setAddedFieldDetails(option) { + const addFields = this.get("addFields"); + const addedField = addFields?.find( + (field) => field.name === option?.get("value"), + ); + if (!addedField) return; + + const specialField = { ...addedField }; + const { fields } = specialField; + + const types = fields.map((fieldName) => { + const realField = MetacatUI.queryFields.findWhere({ name: fieldName }); + return realField ? realField.get("type") : "special field"; + }); + + option.set({ + fields, + types, + }); + }, + + /** + * Extends the isValidValue method of the SearchSelect model to allow for + * the addition of fields that are excluded by default, if they are selected + * @param {string} value - The value to check + * @returns {boolean} - Returns true if the value is valid, false otherwise + */ + isValidValue(value) { + const excludedFields = this.get("excludeFields"); + + if (!excludedFields || !excludedFields.includes(value)) { + return SearchSelect.prototype.isValidValue.call(this, value); + } + + let newField = MetacatUI.queryFields.findWhere({ name: value }); + if (newField) { + newField = this.fieldToOption(newField.toJSON()); + } + this.get("options").add(newField); + return true; + }, + }); + + return QueryFieldSearchSelect; +}); diff --git a/src/js/models/searchSelect/SearchSelect.js b/src/js/models/searchSelect/SearchSelect.js index f03ad8b13..019061586 100644 --- a/src/js/models/searchSelect/SearchSelect.js +++ b/src/js/models/searchSelect/SearchSelect.js @@ -16,7 +16,7 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( /** @lends SearchSelect.prototype */ /** - * Default properties for the SearchableSelectModel. + * @returns {object} Default attributes for a SearchSelect model. * @property {boolean} allowMulti - Whether to allow users to select more * than one value. * @property {boolean} allowAdditions - Allows users to add their own @@ -44,20 +44,29 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( * be set automatically by the model during initialization. * @property {object|boolean} apiSettings - Settings for retrieving data via * API, false if not using remote content. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * @property {string} placeholderText Text to show in the input field + * before any value has been entered. + * @property {string} inputLabel Label for the input element. */ - defaults: { - allowMulti: true, - allowAdditions: false, - clearable: true, - submenuStyle: "list", - hideEmptyCategoriesOnSearch: true, - options: new SearchSelectOptions(), - selected: [], - separatorOptions: ["AND", "OR"], - separator: "", - searchTerm: "", - originalSubmenuStyle: "", - apiSettings: false, + defaults() { + return { + allowMulti: true, + allowAdditions: false, + clearable: true, + submenuStyle: "list", + hideEmptyCategoriesOnSearch: true, + options: new SearchSelectOptions(), + selected: [], + separatorOptions: ["AND", "OR"], + separator: "", + searchTerm: "", + originalSubmenuStyle: "", + apiSettings: false, + placeholderText: "Search for or select a value", + inputLabel: "Select a value", + }; }, /** @inheritdoc */ @@ -185,24 +194,15 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], ( }, /** - * Checks whether a separator should be created for the label that was just - * created, but not yet attached to the DOM - * @returns {boolean} - Returns true if a separator should be created, false - * otherwise. + * Determines if a separator is needed for the newly created, yet to be attached label. + * @param {string} value - The value of the label. + * @returns {boolean} - Returns true if a separator should be created, otherwise false. */ - separatorRequired() { + separatorRequired(value) { const selected = this.get("selected"); - if ( - // Separators not required if only one selection is allowed - !this.get("allowMulti") || - // Need the list of selected values to determine the value's position - !selected || - // Separator is only required between two or more values - selected.length < 2 - ) { - return false; - } - return true; + return ( + this.get("allowMulti") && selected?.length > 1 && selected[0] !== value + ); }, /** diff --git a/src/js/views/searchSelect/QueryFieldSelectView.js b/src/js/views/searchSelect/QueryFieldSelectView.js index 85554028c..fd5e595ec 100644 --- a/src/js/views/searchSelect/QueryFieldSelectView.js +++ b/src/js/views/searchSelect/QueryFieldSelectView.js @@ -1,408 +1,72 @@ define([ - "jquery", "underscore", - "backbone", "views/searchSelect/SearchableSelectView", - "collections/queryFields/QueryFields", -], function ($, _, Backbone, SearchableSelect, QueryFields) { + "models/searchSelect/QueryFieldSearchSelect", +], (_, SearchableSelect, QueryFieldSearchSelect) => { + // The classes for the semantic/formantic UI card component + const CARD_CLASSES = { + card: "ui card", + content: "content", + header: "header", + meta: "meta", + description: "description", + extra: "extra content", + }; + /** * @class QueryFieldSelectView - * @classdesc A select interface that allows the user to search for and - * select metadata field(s). + * @classdesc A select interface that allows the user to search for and select + * metadata field(s). * @classcategory Views/SearchSelect - * @extends SearchableSelect - * @constructor + * @augments SearchableSelect + * @class * @since 2.14.0 * @screenshot views/searchSelect/QueryFieldSelectView.png */ - var QueryFieldSelectView = SearchableSelect.extend( + const QueryFieldSelectView = SearchableSelect.extend( /** @lends QueryFieldSelectView.prototype */ { - /** - * The type of View this is - * @type {string} - */ + /** @inheritdoc */ type: "QueryFieldSelect", - /** - * className - the class names for this view element - * @type {string} - */ - className: SearchableSelect.prototype.className + " query-field-select", - - /** - * Text to show in the input field before any value has been entered - * @type {string} - */ - placeholderText: "Search for or select a field", - - /** - * Label for the input element - * @type {string} - */ - inputLabel: "Select one or more metadata fields to query", - - /** - * @see SearchableSelectView#submenuStyle - * @default "accordion" - */ - submenuStyle: "accordion", - - /** - * A list of query fields names to exclude from the list of options - * @type {string[]} - */ - excludeFields: [], - - /** - * An additional field object contains the properties an additional query field to - * add that are required to render it correctly. An additional query field is one - * that does not actually exist in the query service index. - * - * @typedef {Object} AdditionalField - * - * @property {string} name - A unique ID to represent this field. It must not - * match the name of any other query fields. - * @property {string[]} fields - The list of real query fields that this - * abstracted field will represent. It must exactly match the names of the query - * fields that actually exist. - * @property {string} label - A user-facing label to display. - * @property {string} description - A description for this field. - * @property {string} category - The name of the category under which to place - * this field. It must match one of the category names for an existing query - * field. - * - * @since 2.15.0 - */ - - /** - * A list of additional fields which are not retrieved from the query service - * index, but which should be added to the list of options. This can be used to - * add abstracted fields which are a combination of multiple query fields, or to - * add a duplicate field that has a different label. - * - * @type {AdditionalField[]} - * @since 2.15.0 - */ - addFields: [], - - /** - * A list of query fields names to display at the top of the menu, above - * all other category headers - * @type {string[]} - */ - commonFields: ["text", "documents-special-field"], - - /** - * The names of categories that should have items sorted alphabetically. Names - * must exactly match those in the - * {@link QueryField#categoriesMap Query Field model} - * @type {string[]} - * @since 2.15.0 - */ - categoriesToAlphabetize: ["General"], + /** @inheritdoc */ + className: `${SearchableSelect.prototype.className} query-field-select`, - /** - * Whether or not to exclude fields which are not searchable. Set to - * false to keep query fields that are not searchable in the returned list - * @type {boolean} - */ - excludeNonSearchable: true, + /** @inheritdoc */ + ModelType: QueryFieldSearchSelect, - /** - * Creates a new QueryFieldSelectView - * @param {Object} opts - A literal object with options to pass to the view - */ - initialize: function (opts) { - const options = opts || {}; - // Ensure the query fields are cached - if (typeof MetacatUI.queryFields === "undefined") { - MetacatUI.queryFields = new QueryFields(); - MetacatUI.queryFields.fetch(); - } - - // TODO: Until we move these fields to a model, they are set on the view for this subclass - const modelAttrNames = [ - "allowMulti", - "allowAdditions", - "clearable", - "submenuStyle", - "hideEmptyCategoriesOnSearch", - ]; - modelAttrNames.forEach((attrName) => { - if (options[attrName] === undefined) { - options[attrName] = this[attrName]; - } - }); - - SearchableSelect.prototype.initialize.call(this, options); - - this.processFields(); + /** @inheritdoc */ + tooltipSettings: { + ...SearchableSelect.prototype.tooltipSettings, + // remove padding because the card has its own padding + onCreate() { + this.css({ padding: 0 }); + }, }, - /** - * Retrieves the queryFields collection if not already fetched, then organizes the - * fields based on the options passed to this view. - * @since 2.17.0 - */ - processFields: function () { - var view = this; - - // Ensure the query fields are cached for the Query Field Select - // View and the Query Rule View - if ( - typeof MetacatUI.queryFields === "undefined" || - MetacatUI.queryFields.length === 0 - ) { - if (typeof MetacatUI.queryFields === "undefined") { - MetacatUI.queryFields = new QueryFields(); - } - this.listenToOnce(MetacatUI.queryFields, "sync", this.processFields); - MetacatUI.queryFields.fetch(); - return; - } - - // Convert the queryFields collection to an object formatted for the - // SearchableSelect view. - var fieldsJSON = MetacatUI.queryFields.toJSON(); - // Process & add additional fields set on this view (these are fields not - // retrieved from the query service API) - if (this.addFields && Array.isArray(this.addFields)) { - // For each added field, find the icon and category order from the already - // existing fields with the same category. - this.addFields = _.map( - this.addFields, - function (field) { - if (field.category) { - var categoryInfo = _.findWhere(fieldsJSON, { - category: field.category, - }); - ["icon", "categoryOrder"].forEach(function (prop) { - if (!field[prop]) { - field[prop] = categoryInfo[prop]; - } - }); - } - return field; - }, - this, - ); - // Add the additional fields to the array of fields fetched from the - // query service API - fieldsJSON = fieldsJSON.concat(this.addFields); - } - - // Move common fields to the top of the menu, outside of any - // category headers, so that they are easy to find - if (this.commonFields && Array.isArray(this.commonFields)) { - this.commonFields.forEach(function (commonFieldName) { - var i = _.findIndex(fieldsJSON, { name: commonFieldName }); - if (i > 0) { - // If the category name is an empty string, no header will - // be created in the menu - fieldsJSON[i].category = ""; - // The min categoryOrder in the QueryFields collection is 1 - fieldsJSON[i].categoryOrder = 0; - fieldsJSON[i].icon = "star"; - } - }); - } - - // Filter out non-searchable fields (if option is true), - // and fields that should be excluded - var processedFields = _(fieldsJSON) - .chain() - .sortBy("categoryOrder") - .filter(function (filter) { - if (this.excludeNonSearchable) { - if (["false", false].includes(filter.searchable)) { - return false; - } - } - if (this.excludeFields && this.excludeFields.length) { - if (this.excludeFields.includes(filter.name)) { - return false; - } - } - return true; - }, this) - .map(view.fieldToOption) - .groupBy("categoryOrder") - .value(); - - // Rename the grouped categories - for (const [key, value] of Object.entries(processedFields)) { - processedFields[value[0].category] = value; - delete processedFields[key]; - } - - // Sort items alphabetically for the specified categories - if ( - this.categoriesToAlphabetize && - this.categoriesToAlphabetize.length - ) { - this.categoriesToAlphabetize.forEach(function (categoryName) { - // Sort by category label - processedFields[categoryName].sort(function (a, b) { - // Ignore upper and lowercase - var nameA = a.label.toUpperCase(); - var nameB = b.label.toUpperCase(); - if (nameA < nameB) return -1; - if (nameA > nameB) return 1; - return 0; - }); - }); - } - this.model.updateOptions(processedFields); - }, - - /** - * fieldToOption - Converts an object that represents a QueryField model in the - * format specified by the SearchableSelectView.options - * - * @param {object} field An object with properties corresponding to a QueryField - * model - * @return {object} An object in the format specified by - * SearchableSelectView.options - */ - fieldToOption: function (field) { - return { - label: field.label ? field.label : field.name, - value: field.name, - description: field.friendlyDescription - ? field.friendlyDescription - : field.description, - icon: field.icon, - category: field.category, - categoryOrder: field.categoryOrder, - type: field.type, - }; - }, - - /** - * addTooltip - Add a tooltip to a given element using the description in the - * options object that's set on the view. This overwrites the prototype addTooltip - * function so that we can use popovers with more details for query select fields. - * - * @param {HTMLElement} element The HTML element a tooltip should be added - * @param {string} position how to position the tooltip - top | bottom | left | - * right - * @return {jQuery} The element with a tooltip wrapped by jQuery - */ - addTooltip: function (element, position = "bottom") { - if (!element) { - return; - } - - // Find the description in the options object. - const valueOrLabel = $(element).data("value"); - const opt = this.model.get("options").getOptionByLabelOrValue(valueOrLabel); - - const label = opt.get("label"); - const value = opt.get("value"); - const type = opt.get("type"); - const description = opt.get("description") || ""; - - // For added fields, the value set on the options.value element is just a - // unique identifier. The values that should be used to build a query are saved - // in the addFields array set on this view. - if (this.addFields && Array.isArray(this.addFields)) { - var specialField = _.findWhere(this.addFields, { - name: valueOrLabel, - }); - if (specialField) { - value = specialField.fields; - type = []; - specialField.fields.forEach(function (fieldName) { - var realField = MetacatUI.queryFields.findWhere({ - name: fieldName, - }); - if (realField) { - type.push(realField.get("type")); - } else { - type.push("special field"); - } - }, this); - type = type.join(", "); - } - } - - var contentEl = $(document.createElement("div")), - titleEl = $("
" + label + "
"), - valueEl = $("" + value + ""), - typeEl = $( - "Type: " + type + "", - ), - descriptionEl = $("

" + description + "

"); - - titleEl.append(valueEl); - contentEl.append(descriptionEl, typeEl); - - $(element) - .popover({ - title: titleEl, - content: contentEl, - html: true, - trigger: "hover", - placement: position, - container: "body", - delay: { - show: 1100, - hide: 50, - }, - }) - .on("show.bs.popover", function () { - var $el = $(this); - // Allow time for the popup to be added to the DOM - setTimeout(function () { - // Then add some css rules, and a special class to identify - // these popups if they need to be removed. - $el - .data("popover") - .$tip.css({ - maxWidth: "400px", - pointerEvents: "none", - }) - .addClass("search-select-tooltip"); - }, 10); - }); - - return $(element); - }, - - /** - * Checks if a value is one of the values given in view.options - * @param {string} value The value to check - * @return {boolean} returns true if the value is one of the values given in view.options - */ - isValidOption: function (value) { - // TODO: Move to model - - var view = this; - - // First check if the value is one of the fields that's excluded. - if (view.excludeFields.includes(value)) { - // If it is, then add it to the list of options - var newField = MetacatUI.queryFields.findWhere({ - name: value, - }); - if (newField) { - newField = view.fieldToOption(newField.toJSON()); - } - view.options[newField.category].push(newField); - view.updateMenu(); - // Make sure the new menu is attached before updating the selections - setTimeout(function () { - view.addSelected(value, true); - }, 25); - return true; - } else { - var isValid = SearchableSelect.prototype.isValidOption.call( - view, - value, - ); - return isValid; - } + /** @inheritdoc */ + tooltipHTML(option) { + // If this option is one of the addedFields (an abstracted field), then + // we need to check the QueryFields model for the actual fields and + // field types this option represents. + this.model.setAddedFieldDetails(option); + + const label = option.get("label") || ""; + const value = option.get("fields") || option.get("value") || ""; + const type = option.get("types") || option.get("type") || ""; + const description = option.get("description") || ""; + + const htmlStr = ` +
+
+
${label}
+
${value}
+
${description}
+
+
Type: ${type}
+
`; + + return htmlStr; }, }, ); diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index 9f69917d7..d7752f9c8 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -12,6 +12,7 @@ define([ `text!${MetacatUI.root}/components/semanticUI/transition.min.css`, `text!${MetacatUI.root}/components/semanticUI/dropdown.min.css`, `text!${MetacatUI.root}/components/semanticUI/popup.min.css`, + `text!${MetacatUI.root}/components/semanticUI/card.min.css`, "text!templates/selectUI/searchableSelect.html", ], ( $, @@ -25,6 +26,7 @@ define([ TransitionCSS, DropdownCSS, PopupCSS, + CardCSS, Template, ) => { // The base class for the searchable select view @@ -44,8 +46,8 @@ define([ dropdown: $().dropdown.settings.className, }; - // This is missing from older version of the dropdown module - // TODO: On updating to new version, this should be available + // This is missing from older version of the dropdown module TODO: On updating + // to new version, this should be available CLASS_NAMES.dropdown.text = "text"; // Selectors for the dropdown module @@ -100,28 +102,19 @@ define([ className: BASE_CLASS, /** - * Text to show in the input field before any value has been entered - * @type {string} - */ - placeholderText: "Search for or select a value", - - /** - * Label for the input element - * @type {string} - */ - inputLabel: "Select a value", - - /** - * The maximum width of images used for each option, in pixels - * @type {number} + * The constructor function for the model that this view uses. Must be a + * SearchSelect or an extension of it. + * @type {Backbone.Model} + * @since 0.0.0 */ - imageWidth: 30, + ModelType: SearchSelect, /** - * The maximum height of images used for each option, in pixels - * @type {number} + * The max height and width of images used for each option in pixels, respectively + * @type {number[]} + * @since 0.0.0 */ - imageHeight: 30, + imageSize: [30, 30], /** * Options and selected values for the searchable select interface show a @@ -133,10 +126,10 @@ define([ * @since 0.0.0 */ tooltipSettings: { - position: "top center", + position: "top left", delay: { - show: 500, - hide: 40, + show: 450, + hide: 10, }, exclusive: true, }, @@ -156,10 +149,11 @@ define([ initialize(opts) { const options = opts || {}; - // Add CSS required for this view + // TODO: Make a bundle of required CSS files for semantic UI MetacatUI.appModel.addCSS(TransitionCSS, "semanticUItransition"); MetacatUI.appModel.addCSS(DropdownCSS, "semanticUIdropdown"); MetacatUI.appModel.addCSS(PopupCSS, "semanticUIpopup"); + MetacatUI.appModel.addCSS(CardCSS, "semanticUIcard"); // Set options on the view and create the model const { modelAttrs, viewAttrs } = this.splitModelViewOptions(options); @@ -174,7 +168,7 @@ define([ * @since 0.0.0 */ splitModelViewOptions(options) { - const modelAttrNames = Object.keys(SearchSelect.prototype.defaults); + const modelAttrNames = Object.keys(this.ModelType.prototype.defaults()); const modelAttrs = _.pick(options, modelAttrNames); const viewAttrs = _.omit(options, modelAttrNames); return { modelAttrs, viewAttrs }; @@ -198,15 +192,15 @@ define([ if (modelAttrs.selected) { modelAttrs.selected = _.clone(options.selected); } - this.model = new SearchSelect(modelAttrs); + this.model = new this.ModelType(modelAttrs); }, /** @inheritdoc */ render() { const view = this; - // TODO: - if (view.apiSettings && !view.semanticAPILoaded) { + // If we're using remote content, load the semantic API module + if (view.model.get("apiSettings") && !view.semanticAPILoaded) { // eslint-disable-next-line import/no-dynamic-require require(["semanticAPI"], (_SemanticAPI) => { view.semanticAPILoaded = true; @@ -228,16 +222,9 @@ define([ this.listenToModel(); this.listenToSelectUI(); - // Add tool tips for the description - const items = this.$el.find(`.${CLASS_NAMES.dropdown.item}`); - items.each((_i, item) => view.addTooltip(item)); - - const invalidSelections = view.model.hasInvalidSelections(); - if (invalidSelections) { - view.showInvalidSelectionError(invalidSelections); - } - - this.updateSubmenuStyle(); + this.updateSubmenuStyle(true); + this.addTooltipsToItems(); + this.checkForInvalidSelections(); this.enable(); this.hideLoading(); @@ -255,7 +242,7 @@ define([ // So that a user may enter search text using a comma delimiter: false, }, - apiSettings: this.apiSettings, + apiSettings: this.model.get("apiSettings"), fullTextSearch: true, duration: 90, forceSelection: false, @@ -288,6 +275,15 @@ define([ this.$selectUI.dropdown("save defaults"); }, + /** + * Callback when a label is created in the dropdown interface. This + * function adds a separator between labels if required. + * @param {string} value The value of the label that was created + * @param {string} _text The text of the label that was created + * @param {JQuery} $label The label element that was created + * @returns {JQuery} The updated label element + * @since 0.0.0 + */ onLabelCreate(value, _text, $label) { const view = this; // Callback when a label is created *for multi-select inputs only* @@ -301,7 +297,7 @@ define([ let $updatedLabel = $label; - if (view.model.separatorRequired()) { + if (view.model.separatorRequired(value)) { // Create the separator element. const separator = view.createSeparator(); if (separator) { @@ -382,7 +378,7 @@ define([ */ listenToModel() { const view = this; - this.listenTo(this.model, "change:options", this.updateMenu); + this.listenTo(this.model, "change:options", this.render); this.listenTo( this.model, "change:submenuStyle", @@ -447,15 +443,28 @@ define([ }, /** - * Re-render the menu of options. Useful after changing the options that - * are set on the view. + * Show an error message if the user has selected an invalid value * @since 0.0.0 */ - updateMenu() { - const menuClass = CLASS_NAMES.dropdown.menu; - const html = $(this.renderTemplate().trim()); - const menu = html.find(`.${menuClass}`)[0].innerHTML; - this.$el.find(`.${menuClass}`).html(menu); + checkForInvalidSelections() { + const view = this; + const invalidSelections = view.model.hasInvalidSelections(); + if (invalidSelections) { + view.showInvalidSelectionError(invalidSelections); + } else { + // clear any error messages + view.removeMessages(); + } + }, + + /** + * Add tooltips to the items in the dropdown menu + * @since 0.0.0 + */ + addTooltipsToItems() { + const view = this; + const items = this.$el.find(`.${CLASS_NAMES.dropdown.item}`); + items.each((_i, item) => view.addTooltip(item)); }, /** @@ -468,6 +477,10 @@ define([ allowMulti: this.model.get("allowMulti"), options: this.model.optionsAsJSON(true), classes: CLASS_NAMES, + placeholderText: this.model.get("placeholderText"), + inputLabel: this.model.get("inputLabel"), + imageHeight: this.imageSize?.[0] || 30, + imageWidth: this.imageSize?.[1] || 30, }; const templateOptions = _.extend({}, this, templateOptionsFromModel); return this.template(templateOptions); @@ -475,13 +488,15 @@ define([ /** * Convert the submenu style to the style set in the model + * @param {boolean} [force] Set to true to force the view to update * @since 0.0.0 */ - updateSubmenuStyle() { - const subMenuStyle = this.model.get("submenuStyle"); - if (subMenuStyle === "popout") { + updateSubmenuStyle(force = false) { + if (force === true) this.currentSubmenuMode = null; + const submenuStyle = this.model.get("submenuStyle"); + if (submenuStyle === "popout") { this.convertToPopout(); - } else if (subMenuStyle === "accordion") { + } else if (submenuStyle === "accordion") { this.convertToAccordion(); } else { this.convertToList(); @@ -557,7 +572,7 @@ define([ if (!html) return; $element.popup({ - content: html, + html, ...viewSettings, ...settings, }); From 9188461c4481a1925730874a78dad3cd2c4ff625 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 19:41:21 -0400 Subject: [PATCH 086/169] Move AcountSelect logic to model from view Issue #2253 --- .../searchSelect/AccountSearchSelect.js | 163 +++++++++ .../views/searchSelect/AccountSelectView.js | 327 +----------------- 2 files changed, 174 insertions(+), 316 deletions(-) create mode 100644 src/js/models/searchSelect/AccountSearchSelect.js diff --git a/src/js/models/searchSelect/AccountSearchSelect.js b/src/js/models/searchSelect/AccountSearchSelect.js new file mode 100644 index 000000000..5ef17b821 --- /dev/null +++ b/src/js/models/searchSelect/AccountSearchSelect.js @@ -0,0 +1,163 @@ +"use strict"; + +define(["models/searchSelect/SearchSelect", "models/LookupModel"], ( + SearchSelect, + LookupModel, +) => { + /** + * @class AccountSearchSelect + * @classdesc An extension of SearchSelect that sets the options to the query + * fields (e.g. Solr fields) available for searching. + * @classcategory Models/SearchSelect + * @since 0.0.0 + * @augments Backbone.Model + */ + const AccountSearchSelect = SearchSelect.extend({ + /** @lends AccountSearchSelect.prototype */ + + /** @inheritdoc */ + defaults() { + return { + ...SearchSelect.prototype.defaults(), + placeholderText: "Start typing a name", + inputLabel: "Search for a person or group", + allowMulti: true, + allowAdditions: true, + apiSettings: { + responseAsync: this.responseAsync.bind(this), + }, + }; + }, + + /** @inheritdoc */ + initialize() { + if (!MetacatUI.appLookupModel) + MetacatUI.appLookupModel = new LookupModel(); + this.setOptionsForPreselected(); + SearchSelect.prototype.initialize.call(this); + }, + + /** + * Handles the async response for the Accounts lookup + * @param {object} settings - The settings object passed by Formantic-UI + * @param {Function} callback - The callback function passed by Formantic-UI + */ + responseAsync(settings, callback) { + const model = this; + + // The search term that the user has typed into the input + const searchTerm = settings.urlData.query; + // To return, fail unless we have results + const results = { success: false }; + + // Only use the account lookup service is the user has typed at least two + // characters. Otherwise, the callback function is never called. + if (searchTerm.length < 2) callback(results); + + model + .getAccountDetails(searchTerm) + .then((response) => { + if (response && response.length) { + results.results = model.formatResults(response, false); + results.success = true; + } + callback(results); + }) + .catch(() => { + callback(results); + }); + }, + + /** + * Formats the results from the account lookup service for the dropdown + * @param {object[]} results - The results from the account lookup service + * @param {boolean} forTemplate - Whether to format the results for the + * template in the SearchSelect view or directly for Formantic-UI + * @returns {object[]} - The formatted results + */ + formatResults(results, forTemplate = false) { + return results.map((result) => this.formatResult(result, forTemplate)); + }, + + /** + * Formats a single result from the account lookup service + * @param {object} rawResult - The result from the account lookup service + * @param {boolean} forTemplate - See formatResults + * @returns {object} - The formatted result + */ + formatResult(rawResult, forTemplate = false) { + // clone the result + const result = { ...rawResult }; + + let icon = ""; + if (result.type === "person") { + icon = "user"; + } else if (result.type === "group") { + icon = "group"; + } + + // Get the ID which is saved in the parentheses of the label + const idRegex = /\(([^)]+)\)$/; + const match = result.label.match(idRegex); + const id = match?.[1] || ""; + + // The label will be the name without the ID + const accountName = result.label.replace(idRegex, "").trim(); + + // Result for the template in the SearchSelect view + if (forTemplate) { + return { + ...result, + description: `Account ID: ${id}`, + label: accountName, + icon, + }; + } + // Result for a Formantic-UI item + const formatIcon = icon + ? `` + : ""; + const formatId = id ? `${id}` : ""; + return { + name: `${formatIcon} ${accountName} ${formatId}`, + value: result.value, + }; + }, + + /** + * Promisify the getAccountsAutocomplete function from the LookupModel + * @param {string} searchTerm - The account ID, name, or partial name to search for + * @returns {Promise} - A promise that resolves with the results + */ + async getAccountDetails(searchTerm) { + return new Promise((resolve, reject) => { + MetacatUI.appLookupModel.getAccountsAutocomplete( + { term: searchTerm }, + (results) => { + if (results) { + resolve(results); + } else { + reject(new Error("Failed to fetch account details")); + } + }, + ); + }); + }, + + /** + * Use the account lookup service to match the pre-selected values to the + * account holder's name to use as a label. + */ + async setOptionsForPreselected() { + const selected = this.get("selected"); + if (!selected?.length) return; + const results = await Promise.all( + selected.map((accountId) => this.getAccountDetails(accountId)), + ); + const formattedResults = this.formatResults(results.flat(), true); + this.updateOptions(formattedResults); + }, + }); + + return AccountSearchSelect; +}); diff --git a/src/js/views/searchSelect/AccountSelectView.js b/src/js/views/searchSelect/AccountSelectView.js index a733d69ef..a4d80e986 100644 --- a/src/js/views/searchSelect/AccountSelectView.js +++ b/src/js/views/searchSelect/AccountSelectView.js @@ -1,337 +1,32 @@ define([ - "jquery", - "underscore", - "backbone", "views/searchSelect/SearchableSelectView", - "models/LookupModel", -], function ($, _, Backbone, SearchableSelect, LookupModel) { + "models/searchSelect/AccountSearchSelect", +], (SearchableSelect, AccountSearchSelect) => { /** * @class AccountSelectView * @classdesc A select interface that allows the user to search for and select one or * more accountIDs * @classcategory Views/SearchSelect - * @extends SearchableSelect - * @constructor + * @augments SearchableSelect + * @class * @since 2.15.0 * @screenshot views/searchSelect/AccountSelectViewView.png */ - var AccountSelectView = SearchableSelect.extend( + const AccountSelectView = SearchableSelect.extend( /** @lends AccountSelectViewView.prototype */ { - /** - * The type of View this is - * @type {string} - * @since 2.15.0 - */ + /** @inheritdoc */ type: "AccountSelect", - /** - * The HTML class names for this view element - * @type {string} - * @since 2.15.0 - */ - className: SearchableSelect.prototype.className + " account-select", + /** @inheritdoc */ + ModelType: AccountSearchSelect, - /** - * Text to show in the input field before any value has been entered - * @type {string} - * @default "Start typing a name" - * @since 2.15.0 - */ - placeholderText: "Start typing a name", - - /** - * Label for the input element - * @type {string} - * @default "Search for a person or group" - * @since 2.15.0 - */ - inputLabel: "Search for a person or group", - - /** - * Whether to allow users to select more than one value - * @type {boolean} - * @default true - * @since 2.15.0 - */ - allowMulti: true, - - /** - * Setting to true gives users the ability to add their own options that - * are not listed in this.options. This can work with either single - * or multiple search select dropdowns - * @type {boolean} - * @default true - */ - allowAdditions: true, - - /** - * Can be set to an object to specify API settings for retrieving remote selection - * menu content from an API endpoint. Details of what can be set here are - * specified by the Semantic-UI / Fomantic-UI package. Set to false if not - * retrieving remote content. - * @type {Object|booealn} - * @since 2.15.0 - * @see {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} - * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} - */ - apiSettings: { - // Use the Accounts lookup to search for a person or group when the user types - // something into the input - responseAsync: function (settings, callback) { - var view = $(this).data("view"); - - // The search term that the user has typed into the input - var searchTerm = settings.urlData.query; - - // Only use the account lookup service is the user has typed at least two - // characters. Otherwise, the callback function is never called. - if (searchTerm.length < 2) { - callback({ - success: false, - }); - return; - } - - // For search terms at least 2 characters long, use the Lookup Model - MetacatUI.appLookupModel.getAccountsAutocomplete( - { term: searchTerm }, - function (results) { - // If no match was found to the search term - if (results && results.length < 1) { - callback({ - success: false, - }); - return; - } - - // If there were results, format for the semantic UI dropdown function - results = view.formatResults(results); - - callback({ - success: true, - results: results, - }); - }, - ); - }, - }, - - /** - * Creates a new SearchableSelectView - * @param {Object} options - A literal object with options to pass to the view - * @since 2.15.0 - */ - initialize: function (options) { - try { - var view = this; - - // Ensure there is a lookup model ready for this view to use. - if (MetacatUI.appLookupModel === "undefined") { - MetacatUI.appLookupModel = new LookupModel(); - } - - SearchableSelect.prototype.initialize.call(view, options); - } catch (e) { - console.log( - "Failed to initialize an Account Select view, error message:", - e, - ); - } - }, - - /** - * Takes the results returned from from - * {@link LookupModel#getAccountsAutocomplete} and re-formats them for other - * functions. When the forTemplate argument is false, the results are formatted as - * a list mapping dropdown content specifically for the FomanticUI API. When - * forTemplate is true, then the results are formatted for use in the - * SearchableSelectView template: {@link SearchableSelectView#template}. - * - * @param {Object[]} results The response from - * {@link LookupModel#getAccountsAutocomplete} - * @param {boolean} forTemplate=false Whether or not to format the results for - * the {@link SearchableSelectView#template} - * @return {Object[]} The re-formatted results - * - * @see {@link https://fomantic-ui.com/modules/dropdown.html#remote-settings} - * @since 2.15.0 - */ - formatResults: function (results, forTemplate = false) { - results = _.map(results, function (result) { - if (forTemplate) { - // Get the ID which is saved in the parentheses - var regExp = /\(([^)]+)\)$/; - var matches = regExp.exec(result.label); - //matches[1] contains the value between the parentheses - result.description = "Account ID: " + matches[1]; - result.label = result.label.replace(regExp, ""); - result.label = result.label.trim(); - } else { - result.label = result.label.replace( - "(", - '', - ); - result.label = result.label.replace(")", ""); - } - - var icon = ""; - - if (result.type === "person") { - icon = "user"; - } - if (result.type === "group") { - icon = "group"; - } - - if (icon) { - if (forTemplate) { - result.icon = icon; - } else { - result.label = - '' + - result.label; - } - } - - if (!forTemplate) { - result = { - name: result.label, - value: result.value, - }; - } - return result; - }); - - return results; - }, - - /** - * Render the view - * - * @return {AccountSelectView} Returns the view - * @since 2.15.0 - */ - render: function () { - var view = this; - - // Use the account lookup service to match the pre-selected values to - // the account holder's name to use as a label. - - // If we haven't started looking up user/organization names yet... - if (typeof view.labelsToFetch === "undefined") { - // Keep a count of the number of accounts we need to lookup - const selected = this.model.get("selected"); - view.labelsToFetch = selected ? selected : 0; - - if (view.labelsToFetch > 0) { - view.options = []; - - selected.forEach(function (accountId) { - MetacatUI.appLookupModel.getAccountsAutocomplete( - { term: accountId }, - function (results) { - // The value should match only one account (since the value is an - // account ID). If we found the match, format it for the - // SearchableSelectView, and the icon and tooltip will automatically be - // added to the pre-selected labels. - if (results && results.length === 1) { - results = view.formatResults(results, true); - view.options.push(results[0]); - } - // Whether or not we found a match, count this lookup as complete - --view.labelsToFetch; - - // Once we've looked up all of the accounts, call this render function - // again - if (view.labelsToFetch === 0) { - view.render(); - } - }, - ); - }); - - return; - } - } - - // Once we've fetched the labels for any pre-selected account IDs, - // render as usual - SearchableSelect.prototype.render.call(view); - }, - - /** - * addTooltip - Add a tooltip to a given element using the description in the - * options object that's set on the view. - * - * @param {HTMLElement} element The HTML element a tooltip should be added - * @param {string} position how to position the tooltip - top | bottom | left | - * right - * @return {jQuery} The element with a tooltip wrapped by jQuery - * @since 2.15.0 - */ - addTooltip: function (element, position = "bottom") { - try { - if (!element) { - return; - } - - // The account ID is saved in a element in the label with the - // description class when the label is added from the list of search results - var descEl = $(element).find(".description"); - var id = descEl.text(); - descEl.remove(); - - // Otherwise, the ID is always saved as a data attribute - if (!id) { - id = $(element).attr("data-value"); - } - - // Show the account ID as a tooltip rather than in the label. Otherwise - // the input gets too crowded. - $(element) - .tooltip({ - title: id ? "Account ID: " + id : "", - placement: position, - container: "body", - delay: { - show: 900, - hide: 50, - }, - }) - .on("show.bs.popover", function () { - var $el = $(this); - // Allow time for the popup to be added to the DOM - setTimeout(function () { - // Then add a special class to identify - // these popups if they need to be removed. - $el.data("tooltip").$tip.addClass("search-select-tooltip"); - }, 10); - }); - - return $(element); - } catch (e) { - console.log( - "Failed to add tooltips in a searchable select view, error message: " + - e, - ); - } - }, + /** @inheritdoc */ + className: `${SearchableSelect.prototype.className} account-select`, // TODO: We may want to add a custom is valid option to warn the user when // a value entered cannot be found in the accounts lookup service. - - // /** - // * isValidOption - Checks if a value is one of the values given in view.options - // * - // * @param {string} value The value to check - // * @return {boolean} returns true if the value is one of the values given in - // * view.options - // */ - // isValidOption: function(value){ - // }, + // isValidOption (value) {...} }, ); From 83a7411fcac356fd56936ff9245b4a6b943ed5c9 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 19:58:26 -0400 Subject: [PATCH 087/169] Clean up & simplify the NodeSelectView Issue #2253 --- src/js/views/searchSelect/NodeSelectView.js | 110 +++++++----------- .../searchSelect/SearchableSelectView.js | 5 +- 2 files changed, 43 insertions(+), 72 deletions(-) diff --git a/src/js/views/searchSelect/NodeSelectView.js b/src/js/views/searchSelect/NodeSelectView.js index 45b2812d7..52bfd8a8f 100644 --- a/src/js/views/searchSelect/NodeSelectView.js +++ b/src/js/views/searchSelect/NodeSelectView.js @@ -1,98 +1,68 @@ -define([ - "jquery", - "underscore", - "backbone", - "views/searchSelect/SearchableSelectView", - "models/NodeModel", -], function ($, _, Backbone, SearchableSelect, NodeModel) { +define(["views/searchSelect/SearchableSelectView", "models/NodeModel"], ( + SearchableSelect, + NodeModel, +) => { /** * @class NodeSelect * @classdesc A select interface that allows the user to search for and * select a member node * @classcategory Views/SearchSelect - * @extends SearchableSelect - * @constructor + * @augments SearchableSelect + * @class * @since 2.14.0 * @screenshot views/searchSelect/NodeSelectView.png */ - var NodeSelect = SearchableSelect.extend( + const NodeSelect = SearchableSelect.extend( /** @lends NodeSelectView.prototype */ { - /** - * The type of View this is - * @type {string} - */ + /** @inheritdoc */ type: "NodeSelect", - /** - * className - Returns the class names for this view element - * - * @return {string} class names - */ - className: SearchableSelect.prototype.className + " node-select", + /** @inheritdoc */ + className: `${SearchableSelect.prototype.className} node-select`, - /** - * Text to show in the input field before any value has been entered - * @type {string} - */ - placeholderText: "Select a DataONE repository", + /** @inheritdoc */ + initialize(options = {}) { + this.getNodeOptions(); - /** - * Label for the input element - * @type {string} - */ - inputLabel: "Select a DataONE repository", - - /** - * Whether to allow users to select more than one value - * @type {boolean} - */ - allowMulti: true, + const opts = { + placeholderText: "Select a DataONE repository", + inputLabel: "Select a DataONE repository", + allowMulti: true, + allowAdditions: true, + options: this.getNodeOptions(), + ...options, + }; - /** - * Setting to true gives users the ability to add their own options that - * are not listed in this.options. This can work with either single - * or multiple search select dropxdowns - * @type {boolean} - * @default true - */ - allowAdditions: true, + SearchableSelect.prototype.initialize.call(this, opts); + }, /** - * Creates a new NodeSelectView - * @param {Object} options - A literal object with options to pass to the view + * Fetch the member nodes from the NodeModel and convert them to options + * for the searchSelect component. + * @returns {object[]} An array of objects representing the member nodes + * @since 0.0.0 */ - initialize: function (options) { - const opts = options || {}; - // Ensure the query fields are cached - if (typeof MetacatUI.nodeModel === "undefined") { - MetacatUI.nodeModel = new NodeModel(); - } - - var members = MetacatUI.nodeModel.get("members"); + getNodeOptions() { + if (!MetacatUI.nodeModel) MetacatUI.nodeModel = new NodeModel(); + const members = MetacatUI.nodeModel.get("members") || []; - // Maps the nodeModel member attributes (keys) to the searchSelect - // dropdown options properties (values) - var map = Object.entries({ + const attributeMap = { logo: "image", name: "label", description: "description", identifier: "value", + }; + // Convert nodeModel members to options of searchSelect using map + const options = members.map((member) => { + const option = {}; + Object.entries(attributeMap).forEach(([oldName, newName]) => { + option[newName] = member[oldName]; + }); + return option; }); - const selectOptions = []; - - // Convert nodeModel members to options of searchSelect - members.forEach((member, i) => { - selectOptions[i] = {}; - for (const [oldName, newName] of map) { - selectOptions[i][newName] = member[oldName]; - } - }); - - opts.options = selectOptions; - - SearchableSelect.prototype.initialize.call(this, opts); + return options; }, }, ); diff --git a/src/js/views/searchSelect/SearchableSelectView.js b/src/js/views/searchSelect/SearchableSelectView.js index d7752f9c8..661090217 100644 --- a/src/js/views/searchSelect/SearchableSelectView.js +++ b/src/js/views/searchSelect/SearchableSelectView.js @@ -545,11 +545,12 @@ define([ * extended SearchableSelectViews to return a custom HTML string based on * the option. * @param {SearchSelectOption} option The option to create a tooltip for + * @param {JQuery} _$element The element to attach the tooltip to * @returns {string|null} An HTML string to use for the content of the * tooltip. * @since 0.0.0 */ - tooltipHTML(option) { + tooltipHTML(option, _$element) { return option?.get("description") || null; }, @@ -568,7 +569,7 @@ define([ const $element = $(element); const opt = this.optionFromLabel(element); - const html = this.tooltipHTML(opt); + const html = this.tooltipHTML(opt, $element); if (!html) return; $element.popup({ From 3c743947179e2ff35ee643325681dced288582a8 Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 20:14:53 -0400 Subject: [PATCH 088/169] Clean up & simplify ObjectFormatSelectView Issue #2253 --- .../searchSelect/ObjectFormatSelectView.js | 111 ++++++------------ 1 file changed, 37 insertions(+), 74 deletions(-) diff --git a/src/js/views/searchSelect/ObjectFormatSelectView.js b/src/js/views/searchSelect/ObjectFormatSelectView.js index 0d88268ca..6ee00ad24 100644 --- a/src/js/views/searchSelect/ObjectFormatSelectView.js +++ b/src/js/views/searchSelect/ObjectFormatSelectView.js @@ -1,71 +1,38 @@ define([ - "jquery", - "underscore", - "backbone", "views/searchSelect/SearchableSelectView", "collections/ObjectFormats", -], function ($, _, Backbone, SearchableSelect, ObjectFormats) { +], (SearchableSelect, ObjectFormats) => { /** * @class ObjectFormatSelect * @classdesc A select interface that allows the user to search for and * select a DataONE object format * @classcategory Views/SearchSelect - * @extends SearchableSelect - * @constructor + * @augments SearchableSelect + * @class * @since 2.15.0 * @screenshot views/searchSelect/ObjectFormatSelectView.png */ - var ObjectFormatSelect = SearchableSelect.extend( + const ObjectFormatSelect = SearchableSelect.extend( /** @lends ObjectFormatSelectView.prototype */ { - /** - * The type of View this is - * @type {string} - */ + /** @inheritdoc */ type: "ObjectFormatSelect", - /** - * className - Returns the class names for this view element - * - * @return {string} class names - */ - className: SearchableSelect.prototype.className + " object-format-select", - - /** - * Label for the input element - * @type {string} - * @since 2.15.0 - */ - inputLabel: "Select one or more metadata types", - - /** - * Text to show in the input field before any value has been entered - * @type {string} - * @since 2.15.0 - */ - placeholderText: "Type in a metadata type", - - /** - * Whether to allow users to select more than one value - * @type {boolean} - * @since 2.15.0 - */ - allowMulti: true, - - /** - * Setting to true gives users the ability to add their own options that - * are not listed in this.options. This can work with either single - * or multiple search select dropdowns - * @type {boolean} - * @default true - * @since 2.15.0 - */ - allowAdditions: true, + /** @inheritdoc */ + className: `${SearchableSelect.prototype.className} object-format-select`, /** @inheritdoc */ - initialize: function () { + initialize(options = {}) { + const opts = { + inputLabel: "Select one or more metadata types", + placeholderText: "Type in a metadata type", + allowMulti: true, + allowAdditions: true, + ...options, + }; + + SearchableSelect.prototype.initialize.call(this, opts); this.getObjectFormats(); - SearchableSelect.prototype.initialize.call(this); }, /** @@ -73,20 +40,16 @@ define([ * select options on the model * @since 0.0.0 */ - getObjectFormats: function () { + getObjectFormats() { const view = this; // Ensure the object formats are cached - if (typeof MetacatUI.objectFormats === "undefined") { + if (!MetacatUI.objectFormats) MetacatUI.objectFormats = new ObjectFormats(); - } - // If not already synced, then get the object formats - if ( - MetacatUI.objectFormats.length === 0 && - !( - MetacatUI.objectFormats._events && - MetacatUI.objectFormats._events.sync - ) - ) { + + // eslint-disable-next-line no-underscore-dangle + const events = MetacatUI.objectFormats._events; + + if (!MetacatUI.objectFormats.length && !(events && events.sync)) { view.listenToOnce( MetacatUI.objectFormats, "sync error", @@ -95,19 +58,19 @@ define([ MetacatUI.objectFormats.fetch(); return; } - var formatIds = MetacatUI.objectFormats.toJSON(); - var options = _.chain(formatIds) - // Since the Query Rules automatically include a rule for formatType = - // "METADATA", only allow filtering datasets by specific metadata type. - .where({ formatType: "METADATA" }) - .map(function (format) { - return { - label: format.formatName, - value: format.formatId, - description: format.formatId, - }; - }) - .value(); + + const formatIds = MetacatUI.objectFormats.toJSON(); + + const options = formatIds + // Query Rules automatically include a rule for formatType="METADATA" + // so subset to only METADATA formats + .filter((format) => format.formatType === "METADATA") + // Reformat for a SearchableSelect + .map((format) => ({ + label: format.formatName, + value: format.formatId, + description: format.formatId, + })); view.updateOptions(options); }, From 20a492465f4499d84dce9d647efeeda78f9f031c Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 21:28:01 -0400 Subject: [PATCH 089/169] Add tests for new searchSelect models Issue #2253 --- .../searchSelect/QueryFieldSearchSelect.js | 33 ++-- .../models/searchSelect/SearchSelectOption.js | 18 ++- test/config/tests.json | 6 +- .../searchSelect/AccountSearchSelect.spec.js | 63 ++++++++ .../QueryFieldSearchSelect.spec.js | 148 ++++++++++++++++++ .../models/searchSelect/SearchSelect.spec.js | 124 +++++++++++++++ .../searchSelect/SearchSelectOption.spec.js | 30 ++++ 7 files changed, 397 insertions(+), 25 deletions(-) create mode 100644 test/js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js create mode 100644 test/js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js create mode 100644 test/js/specs/unit/models/searchSelect/SearchSelect.spec.js create mode 100644 test/js/specs/unit/models/searchSelect/SearchSelectOption.spec.js diff --git a/src/js/models/searchSelect/QueryFieldSearchSelect.js b/src/js/models/searchSelect/QueryFieldSearchSelect.js index 7902fde06..a27ce54f0 100644 --- a/src/js/models/searchSelect/QueryFieldSearchSelect.js +++ b/src/js/models/searchSelect/QueryFieldSearchSelect.js @@ -99,17 +99,13 @@ define([ * for this model */ async getQueryFieldOptions() { - try { - const queryFields = await this.fetchQueryFields(); - const fields = queryFields.toJSON(); - const excludedFields = this.excludeFields(fields); - const addedFields = this.addFields(excludedFields); - const options = addedFields.map(this.fieldToOption); - const sortedOptions = this.sortFields(options); - this.updateOptions(sortedOptions); - } catch (error) { - this.set("error", error); - } + const queryFields = await this.fetchQueryFields(); + const fields = queryFields.toJSON(); + const excludedFields = this.excludeFields(fields); + const addedFields = this.addFields(excludedFields); + const options = addedFields.map(this.fieldToOption); + const sortedOptions = this.sortFields(options); + this.updateOptions(sortedOptions); }, /** @@ -118,11 +114,16 @@ define([ * collection */ async fetchQueryFields() { - if (MetacatUI.queryFields?.length) { - return MetacatUI.queryFields; - } - MetacatUI.queryFields = new QueryFields(); - return MetacatUI.queryFields.fetch(); + return new Promise((resolve) => { + if (MetacatUI.queryFields?.length) { + resolve(MetacatUI.queryFields); + } + MetacatUI.queryFields = new QueryFields(); + this.listenToOnce(MetacatUI.queryFields, "sync", () => { + resolve(MetacatUI.queryFields); + }); + MetacatUI.queryFields.fetch(); + }); }, /** diff --git a/src/js/models/searchSelect/SearchSelectOption.js b/src/js/models/searchSelect/SearchSelectOption.js index 65460802b..22563e86a 100644 --- a/src/js/models/searchSelect/SearchSelectOption.js +++ b/src/js/models/searchSelect/SearchSelectOption.js @@ -12,7 +12,7 @@ define(["backbone"], (Backbone) => { /** @lends SearchSelectOption.prototype */ /** - * Default properties for the SelectOptionModel. + * @returns {Object} The default properties for a SearchSelectOption * @property {string} icon - The name of a Font Awesome 3.2.1 icon to display to * the left of the label (e.g. "lemon", "heart") * @property {string} image - The complete path to an image to use instead of an @@ -25,13 +25,15 @@ define(["backbone"], (Backbone) => { * @property {string} category - If the option is part of a category, the name of * the category to display in the dropdown */ - defaults: { - icon: "", - image: "", - label: "", - description: "", - value: "", - category: "", + defaults() { + return { + icon: "", + image: "", + label: "", + description: "", + value: "", + category: "", + }; }, }); diff --git a/test/config/tests.json b/test/config/tests.json index e92d9f8d4..f48c264e8 100644 --- a/test/config/tests.json +++ b/test/config/tests.json @@ -74,7 +74,11 @@ "./js/specs/unit/views/maps/legend/LayerLegendView.spec.js", "./js/specs/unit/views/maps/legend/LegendContainerView.spec.js", "./js/specs/unit/views/maps/legend/CategoricalSwatchView.spec.js", - "./js/specs/unit/views/maps/legend/ContinuousSwatchView.spec.js" + "./js/specs/unit/views/maps/legend/ContinuousSwatchView.spec.js", + "./js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js", + "./js/specs/unit/models/searchSelect/SearchSelectOption.spec.js", + "./js/specs/unit/models/searchSelect/SearchSelect.spec.js", + "./js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js" ], "integration": [ "./js/specs/integration/collections/SolrResults.spec.js", diff --git a/test/js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js b/test/js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js new file mode 100644 index 000000000..6698d94ac --- /dev/null +++ b/test/js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js @@ -0,0 +1,63 @@ +"use strict"; + +define([ + "/test/js/specs/shared/clean-state.js", + "models/searchSelect/AccountSearchSelect", +], (cleanState, AccountSearchSelect) => { + const should = chai.should(); + const expect = chai.expect; + + const state = cleanState(() => { + const accountSearchSelect = new AccountSearchSelect(); + return { accountSearchSelect }; + }, beforeEach); + + describe("AccountSearchSelect Test Suite", () => { + it("creates an AccountSearchSelect instance", () => { + state.accountSearchSelect.should.be.instanceof(AccountSearchSelect); + }); + + it("has default properties", () => { + const defaults = state.accountSearchSelect.defaults(); + expect(defaults).to.have.property("placeholderText"); + expect(defaults).to.have.property("inputLabel"); + expect(defaults).to.have.property("allowMulti"); + expect(defaults).to.have.property("allowAdditions"); + expect(defaults).to.have.property("apiSettings"); + }); + + it("fetches account details", () => { + const accountDetails = + state.accountSearchSelect.getAccountDetails("searchTerm"); + accountDetails.should.be.instanceof(Promise); + }); + + it("formats a result", () => { + const result = { label: "John Doe (123)", type: "person" }; + const formattedResult = state.accountSearchSelect.formatResult(result); + formattedResult.should.have.property("name"); + formattedResult.should.have.property("value"); + }); + + it("formats results", () => { + const results = [ + { label: "John Doe (123)", type: "person" }, + { label: "Group (456)", type: "group" }, + ]; + const formattedResults = state.accountSearchSelect.formatResults( + results, + true, + ); + formattedResults.should.have.lengthOf(2); + formattedResults[0].should.have.property("icon"); + formattedResults[0].should.have.property("description"); + formattedResults[0].should.have.property("label"); + }); + + it("promisifies getAccountsAutocomplete", () => { + const accountDetails = + state.accountSearchSelect.getAccountDetails("searchTerm"); + accountDetails.should.be.instanceof(Promise); + }); + }); +}); diff --git a/test/js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js b/test/js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js new file mode 100644 index 000000000..0f7e07e21 --- /dev/null +++ b/test/js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js @@ -0,0 +1,148 @@ +"use strict"; + +define([ + "/test/js/specs/shared/clean-state.js", + "models/searchSelect/QueryFieldSearchSelect", +], (cleanState, QueryFieldSearchSelect) => { + const should = chai.should(); + const expect = chai.expect; + + const state = cleanState(() => { + const queryFieldSearchSelect = new QueryFieldSearchSelect(); + return { queryFieldSearchSelect }; + }, beforeEach); + + describe("QueryFieldSearchSelect Test Suite", () => { + it("creates a QueryFieldSearchSelect instance", () => { + state.queryFieldSearchSelect.should.be.instanceof(QueryFieldSearchSelect); + }); + + it("has default properties", () => { + const defaults = state.queryFieldSearchSelect.defaults(); + expect(defaults).to.have.property("addFields"); + expect(defaults).to.have.property("commonFields"); + expect(defaults).to.have.property("categoriesToAlphabetize"); + expect(defaults).to.have.property("excludeNonSearchable"); + expect(defaults).to.have.property("submenuStyle"); + expect(defaults).to.have.property("excludeFields"); + }); + + it("fetches query fields", () => { + const queryFields = state.queryFieldSearchSelect.fetchQueryFields(); + queryFields.should.be.instanceof(Promise); + }); + + // check that the promise resolves with a QueryFields collection + it("fetches query fields", async () => { + const queryFields = await state.queryFieldSearchSelect.fetchQueryFields(); + queryFields.models.should.have.lengthOf.above(0); + queryFields.models[0].get("name").should.be.a("string"); + }); + + it("excludes fields", () => { + const fieldsJSON = [ + { name: "field1" }, + { name: "field2", searchable: false }, + ]; + state.queryFieldSearchSelect.set("excludeFields", ["field2"]); + const excludedFields = + state.queryFieldSearchSelect.excludeFields(fieldsJSON); + excludedFields.should.have.lengthOf(1); + excludedFields[0].name.should.equal("field1"); + }); + + it("adds fields", () => { + const fieldsJSON = [{ name: "field1" }, { name: "field2" }]; + state.queryFieldSearchSelect.set("addFields", [ + { name: "field3", fields: ["field1", "field2"] }, + ]); + const addedFields = state.queryFieldSearchSelect.addFields(fieldsJSON); + addedFields.should.have.lengthOf(3); + addedFields[2].name.should.equal("field3"); + }); + + it("converts field to option", () => { + const field = { + name: "field1", + label: "Field 1", + description: "Description", + icon: "icon", + category: "Category", + categoryOrder: 1, + type: "Type", + }; + const option = state.queryFieldSearchSelect.fieldToOption(field); + option.label.should.equal("Field 1"); + option.value.should.equal("field1"); + option.description.should.equal("Description"); + option.icon.should.equal("icon"); + option.category.should.equal("Category"); + option.categoryOrder.should.equal(1); + option.type.should.equal("Type"); + }); + + it("sorts fields", () => { + const unsortedOptions = [ + { + label: "Zebra", + category: "Category 1", + categoryOrder: 1, + value: "field2", + }, + { + label: "CommonField", + category: "Category 1", + categoryOrder: 1, + value: "field0", + }, + { + label: "Banana", + category: "Category 2", + categoryOrder: 2, + value: "field3", + }, + { + label: "Apple", + category: "Category 1", + categoryOrder: 1, + value: "field1", + }, + ]; + state.queryFieldSearchSelect.set("commonFields", ["field0"]); + state.queryFieldSearchSelect.set("categoriesToAlphabetize", [ + "Category 1", + ]); + const sortedOptions = + state.queryFieldSearchSelect.sortFields(unsortedOptions); + sortedOptions[0].value.should.equal("field0"); + sortedOptions[1].value.should.equal("field1"); + sortedOptions[2].value.should.equal("field2"); + sortedOptions[3].value.should.equal("field3"); + }); + + it("adds extra fields to the query field options", () => { + state.queryFieldSearchSelect.set("addFields", [ + { + name: "specialField", + fields: ["field1", "field2"], + label: "Special Field", + description: "Description", + category: "Category", + }, + ]); + const updatedJSON = state.queryFieldSearchSelect.addFields([]); + updatedJSON.should.have.lengthOf(1); + }); + + it("checks if a value is valid", async () => { + // Make sure the query field options are fetched before testing + state.queryFieldSearchSelect.listenToOnce( + state.queryFieldSearchSelect, + "change:options", + () => { + state.queryFieldSearchSelect.isValidValue("text").should.be.true; + }, + ); + }); + }); +}); diff --git a/test/js/specs/unit/models/searchSelect/SearchSelect.spec.js b/test/js/specs/unit/models/searchSelect/SearchSelect.spec.js new file mode 100644 index 000000000..11f483bcf --- /dev/null +++ b/test/js/specs/unit/models/searchSelect/SearchSelect.spec.js @@ -0,0 +1,124 @@ +"use strict"; + +define([ + "/test/js/specs/shared/clean-state.js", + "models/searchSelect/SearchSelect", +], (cleanState, SearchSelect) => { + const should = chai.should(); + const expect = chai.expect; + + describe("SearchSelect Test Suite", () => { + const state = cleanState(() => { + const searchSelect = new SearchSelect({ + submenuStyle: "popout", + }); + return { searchSelect }; + }, beforeEach); + + it("creates a SearchSelect instance", () => { + state.searchSelect.should.be.instanceof(SearchSelect); + }); + + it("updates options for the dropdown", () => { + const options = [ + { label: "Option 1", value: "option1" }, + { label: "Option 2", value: "option2" }, + ]; + state.searchSelect.updateOptions(options); + const searchSelectOptions = state.searchSelect.get("options"); + searchSelectOptions.should.have.lengthOf(2); + searchSelectOptions.at(0).get("label").should.equal("Option 1"); + searchSelectOptions.at(1).get("label").should.equal("Option 2"); + }); + + it("should save the original submenu style", () => { + state.searchSelect.get("originalSubmenuStyle").should.equal("popout"); + }); + + it("should change submenu style when search term is present", () => { + state.searchSelect.set("searchTerm", "some term"); + state.searchSelect.get("submenuStyle").should.equal("list"); + }); + + it("should revert to original submenu style when search term is removed", () => { + state.searchSelect.set("searchTerm", "jdlkasa"); + state.searchSelect.set("searchTerm", ""); + state.searchSelect.get("submenuStyle").should.equal("popout"); + }); + + it("returns options as JSON", () => { + const options = [ + { label: "Option 1", value: "option1" }, + { label: "Option 2", value: "option2" }, + ]; + state.searchSelect.updateOptions(options); + const optionsJSON = state.searchSelect.optionsAsJSON(); + optionsJSON.should.have.lengthOf(2); + optionsJSON[0].label.should.equal("Option 1"); + optionsJSON[1].label.should.equal("Option 2"); + }); + + it("checks if a value is valid", () => { + const options = [ + { label: "Option 1", value: "option1" }, + { label: "Option 2", value: "option2" }, + ]; + state.searchSelect.updateOptions(options); + state.searchSelect.isValidValue("option1").should.be.true; + state.searchSelect.isValidValue("invalid").should.be.false; + }); + + it("checks if there are any invalid selections", () => { + const options = [ + { label: "Option 1", value: "option1" }, + { label: "Option 2", value: "option2" }, + ]; + state.searchSelect.updateOptions(options); + state.searchSelect.setSelected(["option1", "invalid"]); + state.searchSelect.hasInvalidSelections().should.deep.equal(["invalid"]); + }); + + it("adds a selected value", () => { + state.searchSelect.addSelected("option1"); + state.searchSelect.get("selected").should.deep.equal(["option1"]); + }); + + it("replaces existing value if not multi-select", () => { + state.searchSelect.set("allowMulti", false); + state.searchSelect.addSelected("option1"); + state.searchSelect.addSelected("option2"); + state.searchSelect.get("selected").should.deep.equal(["option2"]); + }); + + it("adds multiple values if multi-select", () => { + state.searchSelect.addSelected("option1"); + state.searchSelect.addSelected("option2"); + state.searchSelect + .get("selected") + .should.deep.equal(["option1", "option2"]); + }); + + it("changes the selected values", () => { + state.searchSelect.setSelected(["option1", "option2"]); + state.searchSelect + .get("selected") + .should.deep.equal(["option1", "option2"]); + }); + + it("removes a selected value", () => { + state.searchSelect.setSelected(["option1", "option2"]); + state.searchSelect.removeSelected("option1"); + state.searchSelect.get("selected").should.deep.equal(["option2"]); + }); + + it("checks if a separator is required", () => { + state.searchSelect.set("selected", ["option1", "option2"]); + state.searchSelect.separatorRequired("option1").should.be.false; + state.searchSelect.separatorRequired("option2").should.be.true; + }); + + it("checks if separator can be changed", () => { + state.searchSelect.canChangeSeparator().should.be.true; + }); + }); +}); diff --git a/test/js/specs/unit/models/searchSelect/SearchSelectOption.spec.js b/test/js/specs/unit/models/searchSelect/SearchSelectOption.spec.js new file mode 100644 index 000000000..7e3a0ae9f --- /dev/null +++ b/test/js/specs/unit/models/searchSelect/SearchSelectOption.spec.js @@ -0,0 +1,30 @@ +"use strict"; + +define([ + "/test/js/specs/shared/clean-state.js", + "models/searchSelect/SearchSelectOption", +], (cleanState, SearchSelectOption) => { + const should = chai.should(); + const expect = chai.expect; + + describe("SearchSelectOption Test Suite", () => { + const state = cleanState(() => { + const searchSelectOption = new SearchSelectOption(); + return { searchSelectOption }; + }, beforeEach); + + it("creates a SearchSelectOption instance", () => { + state.searchSelectOption.should.be.instanceof(SearchSelectOption); + }); + + it("has default properties", () => { + const defaults = state.searchSelectOption.defaults(); + expect(defaults).to.have.property("icon"); + expect(defaults).to.have.property("image"); + expect(defaults).to.have.property("label"); + expect(defaults).to.have.property("description"); + expect(defaults).to.have.property("value"); + expect(defaults).to.have.property("category"); + }); + }); +}); From 2c55f81aefde96602c29e0f7432cdcbe6402d0ea Mon Sep 17 00:00:00 2001 From: robyngit Date: Tue, 23 Jul 2024 21:38:05 -0400 Subject: [PATCH 090/169] Add unit tests for SearchSelectOptions collection Issue #2253 --- test/config/tests.json | 3 +- .../searchSelect/SearchSelectOptions.spec.js | 84 +++++++++++++++++++ 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 test/js/specs/unit/collections/searchSelect/SearchSelectOptions.spec.js diff --git a/test/config/tests.json b/test/config/tests.json index f48c264e8..dad87c1c1 100644 --- a/test/config/tests.json +++ b/test/config/tests.json @@ -78,7 +78,8 @@ "./js/specs/unit/models/searchSelect/AccountSearchSelect.spec.js", "./js/specs/unit/models/searchSelect/SearchSelectOption.spec.js", "./js/specs/unit/models/searchSelect/SearchSelect.spec.js", - "./js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js" + "./js/specs/unit/models/searchSelect/QueryFieldSearchSelect.spec.js", + "./js/specs/unit/collections/searchSelect/SearchSelectOptions.spec.js" ], "integration": [ "./js/specs/integration/collections/SolrResults.spec.js", diff --git a/test/js/specs/unit/collections/searchSelect/SearchSelectOptions.spec.js b/test/js/specs/unit/collections/searchSelect/SearchSelectOptions.spec.js new file mode 100644 index 000000000..621ade3ed --- /dev/null +++ b/test/js/specs/unit/collections/searchSelect/SearchSelectOptions.spec.js @@ -0,0 +1,84 @@ +"use strict"; + +define([ + "/test/js/specs/shared/clean-state.js", + "collections/searchSelect/SearchSelectOptions", +], (cleanState, SearchSelectOptions) => { + const should = chai.should(); + const expect = chai.expect; + + const state = cleanState(() => { + const searchSelectOptions = new SearchSelectOptions([ + { + label: "Option 1", + value: "option1", + category: "Category A", + }, + { + label: "Option 2", + value: "option2", + category: "Category A", + }, + { + label: "Option 3", + value: "option3", + category: "Category B", + }, + ]); + return { searchSelectOptions }; + }, beforeEach); + + describe("SearchSelectOptions Test Suite", () => { + it("creates a SearchSelectOptions instance", () => { + state.searchSelectOptions.should.be.instanceof(SearchSelectOptions); + }); + + it("parses an array of options", () => { + const options = state.searchSelectOptions.parse([ + { label: "Option 1" }, + { label: "Option 2" }, + ]); + options.should.have.lengthOf(2); + }); + + it("parses an object of categorized options", () => { + const options = state.searchSelectOptions.parse({ + "Category A": [{ label: "Option 1" }, { label: "Option 2" }], + "Category B": [{ label: "Option 3" }, { label: "Option 4" }], + }); + options.should.have.lengthOf(4); + }); + + it("gets category names", () => { + const categories = state.searchSelectOptions.getCategoryNames(); + categories.should.have.lengthOf(2); + }); + + it("gets options by category", () => { + const options = + state.searchSelectOptions.getOptionsByCategory("Category A"); + options.should.have.lengthOf(2); + }); + + it("checks if a value is valid", () => { + const isValid = state.searchSelectOptions.isValidValue("option1"); + isValid.should.be.true; + }); + + it("gets an option by label or value", () => { + const option = + state.searchSelectOptions.getOptionByLabelOrValue("option1"); + option.get("label").should.equal("Option 1"); + }); + + it("returns JSON representation of the collection", () => { + const json = state.searchSelectOptions.toJSON(); + json.should.have.lengthOf(3); + }); + + it("returns categorized JSON representation of the collection", () => { + const json = state.searchSelectOptions.toJSON(true); + json.should.have.property("Category A"); + }); + }); +}); From ab13d75959336a9e0cb315e3dfe2cdaca245a2d2 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 24 Jul 2024 09:15:27 -0400 Subject: [PATCH 091/169] Minor fixes to QueryFields search select Issue #2253 --- src/js/collections/queryFields/QueryFields.js | 3 +-- src/js/models/searchSelect/QueryFieldSearchSelect.js | 9 +++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/collections/queryFields/QueryFields.js b/src/js/collections/queryFields/QueryFields.js index 3efc6dfe8..6e7623332 100644 --- a/src/js/collections/queryFields/QueryFields.js +++ b/src/js/collections/queryFields/QueryFields.js @@ -99,8 +99,7 @@ define(["underscore", "backbone", "x2js", "models/queryFields/QueryField"], ( * of fields that are set in {@link QueryField#filterTypesMap}) */ getRequiredFilterType(fields) { - const defaultFilterType = - MetacatUI.queryFields.models[0].defaults().filterType; + const defaultFilterType = this.model.prototype.defaults().filterType; const types = []; // When fields is empty or are different types diff --git a/src/js/models/searchSelect/QueryFieldSearchSelect.js b/src/js/models/searchSelect/QueryFieldSearchSelect.js index a27ce54f0..341378fc8 100644 --- a/src/js/models/searchSelect/QueryFieldSearchSelect.js +++ b/src/js/models/searchSelect/QueryFieldSearchSelect.js @@ -117,12 +117,13 @@ define([ return new Promise((resolve) => { if (MetacatUI.queryFields?.length) { resolve(MetacatUI.queryFields); + return; } - MetacatUI.queryFields = new QueryFields(); - this.listenToOnce(MetacatUI.queryFields, "sync", () => { - resolve(MetacatUI.queryFields); + if(!MetacatUI.queryFields) MetacatUI.queryFields = new QueryFields(); + MetacatUI.queryFields.fetch({ + success: () => resolve(MetacatUI.queryFields), + error: () => resolve([]), }); - MetacatUI.queryFields.fetch(); }); }, From 7813a359aa1521d91fdde067bb526fae6e5935e6 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 24 Jul 2024 17:01:38 -0400 Subject: [PATCH 092/169] Update Formantic UI components to 2.9 And fix bugs; simplify the search select Issue #2253 --- src/components/semanticUI/api.min.js | 12 +- src/components/semanticUI/dropdown.min.css | 10 +- src/components/semanticUI/dropdown.min.js | 12 +- src/components/semanticUI/transition.min.css | 8 +- src/components/semanticUI/transition.min.js | 12 +- .../searchSelect/SearchSelectOptions.js | 14 +- .../searchSelect/QueryFieldSearchSelect.js | 2 +- src/js/models/searchSelect/SearchSelect.js | 5 +- .../searchSelect/SearchableSelectView.js | 257 ++++++------------ 9 files changed, 131 insertions(+), 201 deletions(-) diff --git a/src/components/semanticUI/api.min.js b/src/components/semanticUI/api.min.js index 4cd81ce17..b9a6cd167 100644 --- a/src/components/semanticUI/api.min.js +++ b/src/components/semanticUI/api.min.js @@ -1,11 +1,11 @@ - /* - * # Fomantic UI - 2.8.6 +/* + * # Fomantic UI - 2.9.3 * https://github.com/fomantic/Fomantic-UI - * http://fomantic-ui.com/ + * https://fomantic-ui.com/ * - * Copyright 2014 Contributors + * Copyright 2023 Contributors * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ -!function(P,j,e,O){"use strict";P.isWindow=P.isWindow||function(e){return null!=e&&e===e.window},j=void 0!==j&&j.Math==Math?j:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),P.api=P.fn.api=function(R){var q,e=P.isFunction(this)?P(j):P(this),x=e.selector||"",S=(new Date).getTime(),A=[],w=R,T="string"==typeof w,k=[].slice.call(arguments,1);return e.each(function(){var s,i,r,e,a,u,c=P.isPlainObject(R)?P.extend(!0,{},P.fn.api.settings,R):P.extend({},P.fn.api.settings),t=c.namespace,n=c.metadata,o=c.selector,d=c.error,l=c.className,f="."+t,g="module-"+t,p=P(this),m=p.closest(o.form),b=c.stateContext?P(c.stateContext):p,v=this,h=b[0],y=p.data(g);u={initialize:function(){T||u.bind.events(),u.instantiate()},instantiate:function(){u.verbose("Storing instance of module",u),y=u,p.data(g,y)},destroy:function(){u.verbose("Destroying previous module for",v),p.removeData(g).off(f)},bind:{events:function(){var e=u.get.event();e?(u.verbose("Attaching API events to element",e),p.on(e+f,u.event.trigger)):"now"==c.on&&(u.debug("Querying API endpoint immediately"),u.query())}},decode:{json:function(e){if(e!==O&&"string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}},read:{cachedResponse:function(e){var t;if(j.Storage!==O)return t=sessionStorage.getItem(e),u.debug("Using cached response",e,t),t=u.decode.json(t);u.error(d.noStorage)}},write:{cachedResponse:function(e,t){t&&""===t?u.debug("Response empty, not caching",t):j.Storage!==O?(P.isPlainObject(t)&&(t=JSON.stringify(t)),sessionStorage.setItem(e,t),u.verbose("Storing cached response for url",e,t)):u.error(d.noStorage)}},query:function(){if(u.is.disabled())u.debug("Element is disabled API request aborted");else{if(u.is.loading()){if(!c.interruptRequests)return void u.debug("Cancelling request, previous request is still pending");u.debug("Interrupting previous request"),u.abort()}if(c.defaultData&&P.extend(!0,c.urlData,u.get.defaultData()),c.serializeForm&&(c.data=u.add.formData(c.data)),!1===(i=u.get.settings()))return u.cancelled=!0,void u.error(d.beforeSend);if(u.cancelled=!1,(r=u.get.templatedURL())||u.is.mocked()){if((r=u.add.urlData(r))||u.is.mocked()){if(i.url=c.base+r,s=P.extend(!0,{},c,{type:c.method||c.type,data:e,url:c.base+r,beforeSend:c.beforeXHR,success:function(){},failure:function(){},complete:function(){}}),u.debug("Querying URL",s.url),u.verbose("Using AJAX settings",s),"local"===c.cache&&u.read.cachedResponse(r))return u.debug("Response returned from local cache"),u.request=u.create.request(),void u.request.resolveWith(h,[u.read.cachedResponse(r)]);c.throttle?c.throttleFirstRequest||u.timer?(u.debug("Throttling request",c.throttle),clearTimeout(u.timer),u.timer=setTimeout(function(){u.timer&&delete u.timer,u.debug("Sending throttled request",e,s.method),u.send.request()},c.throttle)):(u.debug("Sending request",e,s.method),u.send.request(),u.timer=setTimeout(function(){},c.throttle)):(u.debug("Sending request",e,s.method),u.send.request())}}else u.error(d.missingURL)}},should:{removeError:function(){return!0===c.hideError||"auto"===c.hideError&&!u.is.form()}},is:{disabled:function(){return 0*{white-space:nowrap}.ui.dropdown>input:not(.search):first-child,.ui.dropdown>select{display:none!important}.ui.dropdown:not(.labeled)>.dropdown.icon{position:relative;width:auto;font-size:.85714286em;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon{width:auto;float:right;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon+.text{margin-right:1em}.ui.dropdown>.text{display:inline-block;-webkit-transition:none;transition:none}.ui.dropdown .menu>.item{position:relative;cursor:pointer;display:block;border:none;height:auto;min-height:2.57142857rem;text-align:left;border-top:none;line-height:1em;font-size:1rem;color:rgba(0,0,0,.87);padding:.78571429rem 1.14285714rem!important;text-transform:none;font-weight:400;-webkit-box-shadow:none;box-shadow:none;-webkit-touch-callout:none}.ui.dropdown .menu>.item:first-child{border-top-width:0}.ui.dropdown .menu>.item.vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui.dropdown .menu .item>[class*="right floated"],.ui.dropdown>.text>[class*="right floated"]{float:right!important;margin-right:0!important;margin-left:1em!important}.ui.dropdown .menu .item>[class*="left floated"],.ui.dropdown>.text>[class*="left floated"]{float:left!important;margin-left:0!important;margin-right:1em!important}.ui.dropdown .menu .item>.flag.floated,.ui.dropdown .menu .item>.image.floated,.ui.dropdown .menu .item>i.icon.floated,.ui.dropdown .menu .item>img.floated{margin-top:0}.ui.dropdown .menu>.header{margin:1rem 0 .75rem;padding:0 1.14285714rem;font-weight:700;text-transform:uppercase}.ui.dropdown .menu>.header:not(.ui){color:rgba(0,0,0,.85);font-size:.78571429em}.ui.dropdown .menu>.divider{border-top:1px solid rgba(34,36,38,.1);height:0;margin:.5em 0}.ui.dropdown .menu>.horizontal.divider{border-top:none}.ui.dropdown.dropdown .menu>.input{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;margin:1.14285714rem .78571429rem;min-width:10rem}.ui.dropdown .menu>.header+.input{margin-top:0}.ui.dropdown .menu>.input:not(.transparent) input{padding:.5em 1em}.ui.dropdown .menu>.input:not(.transparent) .button,.ui.dropdown .menu>.input:not(.transparent) .label,.ui.dropdown .menu>.input:not(.transparent) i.icon{padding-top:.5em;padding-bottom:.5em}.ui.dropdown .menu>.item>.description,.ui.dropdown>.text>.description{float:right;margin:0 0 0 1em;color:rgba(0,0,0,.4)}.ui.dropdown .menu>.item.vertical>.description{margin:0}.ui.dropdown .menu>.item.vertical>.text{margin-bottom:.25em}.ui.dropdown .menu>.message{padding:.78571429rem 1.14285714rem;font-weight:400}.ui.dropdown .menu>.message:not(.ui){color:rgba(0,0,0,.4)}.ui.dropdown .menu .menu{top:0;left:100%;right:auto;margin:0 -.5em!important;border-radius:.28571429rem!important;z-index:21!important}.ui.dropdown .menu .menu:after{display:none}.ui.dropdown>.text>.flag,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>i.icon,.ui.dropdown>.text>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>i.icon,.ui.dropdown .menu>.item>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>i.icon,.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.flag,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>i.icon,.ui.dropdown>.text>img{margin-left:0;float:none;margin-right:.78571429rem}.ui.dropdown .menu>.item>.image:not(.icon),.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.image:not(.icon),.ui.dropdown>.text>img{display:inline-block;vertical-align:top;width:auto;margin-top:-.5em;margin-bottom:-.5em;max-height:2em}.ui.dropdown .ui.menu>.item:before,.ui.menu .ui.dropdown .menu>.item:before{display:none}.ui.menu .ui.dropdown .menu .active.item{border-left:none}.ui.buttons>.ui.dropdown:last-child>.menu:not(.left),.ui.menu .right.dropdown.item>.menu:not(.left),.ui.menu .right.menu .dropdown:last-child>.menu:not(.left){left:auto;right:0}.ui.label.dropdown .menu{min-width:100%}.ui.dropdown.icon.button>.dropdown.icon{margin:0}.ui.button.dropdown .menu{min-width:100%}select.ui.dropdown{height:38px;padding:.5em;border:1px solid rgba(34,36,38,.15);visibility:visible}.ui.selection.dropdown{cursor:pointer;word-wrap:break-word;line-height:1em;white-space:normal;outline:0;-webkit-transform:rotateZ(0);transform:rotateZ(0);min-width:14em;min-height:2.71428571em;background:#fff;display:inline-block;padding:.78571429em 3.2em .78571429em 1em;color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;-webkit-transition:width .1s ease,-webkit-box-shadow .1s ease;transition:width .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,width .1s ease;transition:box-shadow .1s ease,width .1s ease,-webkit-box-shadow .1s ease}.ui.selection.dropdown.active,.ui.selection.dropdown.visible{z-index:10}.ui.selection.dropdown>.delete.icon,.ui.selection.dropdown>.dropdown.icon,.ui.selection.dropdown>.search.icon{cursor:pointer;position:absolute;width:auto;height:auto;line-height:1.21428571em;top:.78571429em;right:1em;z-index:3;margin:-.78571429em;padding:.91666667em;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.compact.selection.dropdown{min-width:0}.ui.selection.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch;border-top-width:0!important;width:auto;outline:0;margin:0 -1px;min-width:calc(100% + 2px);width:calc(100% + 2px);border-radius:0 0 .28571429rem .28571429rem;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.selection.dropdown .menu:after,.ui.selection.dropdown .menu:before{display:none}.ui.selection.dropdown .menu>.message{padding:.78571429rem 1.14285714rem}@media only screen and (max-width:767.98px){.ui.selection.dropdown.short .menu{max-height:6.01071429rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:4.00714286rem}.ui.selection.dropdown .menu{max-height:8.01428571rem}.ui.selection.dropdown.long .menu{max-height:16.02857143rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:24.04285714rem}}@media only screen and (min-width:768px){.ui.selection.dropdown.short .menu{max-height:8.01428571rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:5.34285714rem}.ui.selection.dropdown .menu{max-height:10.68571429rem}.ui.selection.dropdown.long .menu{max-height:21.37142857rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:32.05714286rem}}@media only screen and (min-width:992px){.ui.selection.dropdown.short .menu{max-height:12.02142857rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:8.01428571rem}.ui.selection.dropdown .menu{max-height:16.02857143rem}.ui.selection.dropdown.long .menu{max-height:32.05714286rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:48.08571429rem}}@media only screen and (min-width:1920px){.ui.selection.dropdown.short .menu{max-height:16.02857143rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:10.68571429rem}.ui.selection.dropdown .menu{max-height:21.37142857rem}.ui.selection.dropdown.long .menu{max-height:42.74285714rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:64.11428571rem}}.ui.selection.dropdown .menu>.item{border-top:1px solid #fafafa;padding:.78571429rem 1.14285714rem!important;white-space:normal;word-wrap:normal}.ui.selection.dropdown .menu>.hidden.addition.item{display:none}.ui.selection.dropdown:hover{border-color:rgba(34,36,38,.35);-webkit-box-shadow:none;box-shadow:none}.ui.selection.active.dropdown{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.dropdown:focus{border-color:#96c8da;-webkit-box-shadow:none;box-shadow:none}.ui.selection.dropdown:focus .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.visible.dropdown>.text:not(.default){font-weight:400;color:rgba(0,0,0,.8)}.ui.selection.active.dropdown:hover{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown:hover .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.active.selection.dropdown>.dropdown.icon,.ui.visible.selection.dropdown>.dropdown.icon{opacity:'';z-index:3}.ui.active.selection.dropdown{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.active.empty.selection.dropdown{border-radius:.28571429rem!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.active.empty.selection.dropdown .menu{border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}@supports (-webkit-touch-callout:none) or (-webkit-overflow-scrolling:touch) or (-moz-appearance:none){@media (-moz-touch-enabled),(pointer:coarse){.ui.dropdown .scrollhint.menu:not(.hidden):before{-webkit-animation:scrollhint 2s ease 2;animation:scrollhint 2s ease 2;content:'';z-index:15;display:block;position:absolute;opacity:0;right:.25em;top:0;height:100%;border-right:.25em solid;border-left:0;-webkit-border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0))) 1 100%;-webkit-border-image:-webkit-linear-gradient(top,rgba(0,0,0,.75),rgba(0,0,0,0)) 1 100%;-o-border-image:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0)) 1 100%;border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0))) 1 100%;border-image:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0)) 1 100%}.ui.inverted.dropdown .scrollhint.menu:not(.hidden):before{-webkit-border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.75)),to(rgba(255,255,255,0))) 1 100%;-webkit-border-image:-webkit-linear-gradient(top,rgba(255,255,255,.75),rgba(255,255,255,0)) 1 100%;-o-border-image:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,0)) 1 100%;border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.75)),to(rgba(255,255,255,0))) 1 100%;border-image:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,0)) 1 100%}@-webkit-keyframes scrollhint{0%{opacity:1;top:100%}100%{opacity:0;top:0}}@keyframes scrollhint{0%{opacity:1;top:100%}100%{opacity:0;top:0}}}}.ui.search.dropdown{min-width:''}.ui.search.dropdown>input.search{background:none transparent!important;border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;cursor:text;top:0;left:1px;width:100%;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);padding:inherit}.ui.search.dropdown>input.search{position:absolute;z-index:2}.ui.search.dropdown>.text{cursor:text;position:relative;left:1px;z-index:auto}.ui.search.selection.dropdown>input.search{line-height:1.21428571em;padding:.67857143em 3.2em .67857143em 1em}.ui.search.selection.dropdown>span.sizer{line-height:1.21428571em;padding:.67857143em 3.2em .67857143em 1em;display:none;white-space:pre}.ui.search.dropdown.active>input.search,.ui.search.dropdown.visible>input.search{cursor:auto}.ui.search.dropdown.active>.text,.ui.search.dropdown.visible>.text{pointer-events:none}.ui.active.search.dropdown input.search:focus+.text .flag,.ui.active.search.dropdown input.search:focus+.text i.icon{opacity:.45}.ui.active.search.dropdown input.search:focus+.text{color:rgba(115,115,115,.87)!important}.ui.search.dropdown.button>span.sizer{display:none}.ui.search.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch}@media only screen and (max-width:767.98px){.ui.search.dropdown .menu{max-height:8.01428571rem}}@media only screen and (min-width:768px){.ui.search.dropdown .menu{max-height:10.68571429rem}}@media only screen and (min-width:992px){.ui.search.dropdown .menu{max-height:16.02857143rem}}@media only screen and (min-width:1920px){.ui.search.dropdown .menu{max-height:21.37142857rem}}.ui.dropdown>.remove.icon{cursor:pointer;font-size:.85714286em;margin:-.78571429em;padding:.91666667em;right:3em;top:.78571429em;position:absolute;opacity:.6;z-index:3}.ui.clearable.dropdown .text,.ui.clearable.dropdown a:last-of-type{margin-right:1.5em}.ui.dropdown input:not([value])~.remove.icon,.ui.dropdown input[value='']~.remove.icon,.ui.dropdown select.noselection~.remove.icon,.ui.dropdown.loading>.remove.icon{display:none}.ui.ui.multiple.dropdown{padding:.22619048em 3.2em .22619048em .35714286em}.ui.multiple.dropdown .menu{cursor:auto}.ui.multiple.dropdown>.label{display:inline-block;white-space:normal;font-size:1em;padding:.35714286em .78571429em;margin:.14285714rem .28571429rem .14285714rem 0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.multiple.dropdown .dropdown.icon{margin:'';padding:''}.ui.multiple.dropdown>.text{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.dropdown>.text.default{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui.multiple.dropdown>.label~input.search{margin-left:.14285714em!important}.ui.multiple.dropdown>.label~.text{display:none}.ui.multiple.dropdown>.label:not(.image)>img:not(.centered){margin-right:.78571429rem}.ui.multiple.dropdown>.label:not(.image)>img.ui:not(.avatar){margin-bottom:.39285714rem}.ui.multiple.dropdown>.image.label img{margin:-.35714286em .78571429em -.35714286em -.78571429em;height:1.71428571em}.ui.multiple.search.dropdown,.ui.multiple.search.dropdown>input.search{cursor:text}.ui.multiple.search.dropdown>.text{display:inline-block;position:absolute;top:0;left:0;padding:inherit;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.search.dropdown>.label~.text{display:none}.ui.multiple.search.dropdown>input.search{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;width:2.2em;line-height:1.21428571em}.ui.multiple.search.dropdown.button{min-width:14em}.ui.inline.dropdown{cursor:pointer;display:inline-block;color:inherit}.ui.inline.dropdown .dropdown.icon{margin:0 .21428571em 0 .21428571em;vertical-align:baseline}.ui.inline.dropdown>.text{font-weight:700}.ui.inline.dropdown .menu{cursor:auto;margin-top:.21428571em;border-radius:.28571429rem}.ui.dropdown .menu .active.item{background:0 0;font-weight:700;color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none;z-index:12}.ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);z-index:13}.ui.default.dropdown:not(.button)>.text,.ui.dropdown:not(.button)>.default.text{color:rgba(191,191,191,.87)}.ui.default.dropdown:not(.button)>input:focus~.text,.ui.dropdown:not(.button)>input:focus~.default.text{color:rgba(115,115,115,.87)}.ui.loading.dropdown>i.icon{height:1em!important}.ui.loading.selection.dropdown>i.icon{padding:1.5em 1.28571429em!important}.ui.loading.dropdown>i.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.dropdown>i.icon:after{position:absolute;content:'';top:50%;left:50%;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem}.ui.loading.dropdown.button>i.icon:after,.ui.loading.dropdown.button>i.icon:before{display:none}.ui.loading.dropdown>.text{-webkit-transition:none;transition:none}.ui.dropdown .loading.menu{display:block;visibility:hidden;z-index:-1}.ui.dropdown>.loading.menu{left:0!important;right:auto!important}.ui.dropdown>.menu .loading.menu{left:100%!important;right:auto!important}.ui.dropdown .menu .selected.item,.ui.dropdown.selected{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.dropdown>.filtered.text{visibility:hidden}.ui.dropdown .filtered.item{display:none!important}.ui.dropdown.error,.ui.dropdown.error>.default.text,.ui.dropdown.error>.text{color:#9f3a38}.ui.selection.dropdown.error{background:#fff6f6;border-color:#e0b4b4}.ui.selection.dropdown.error:hover{border-color:#e0b4b4}.ui.multiple.selection.error.dropdown>.label{border-color:#e0b4b4}.ui.dropdown.error>.menu,.ui.dropdown.error>.menu .menu{border-color:#e0b4b4}.ui.dropdown.error>.menu>.item{color:#9f3a38}.ui.dropdown.error>.menu>.item:hover{background-color:#fbe7e7}.ui.dropdown.error>.menu .active.item{background-color:#fdcfcf}.ui.dropdown.info,.ui.dropdown.info>.default.text,.ui.dropdown.info>.text{color:#276f86}.ui.selection.dropdown.info{background:#f8ffff;border-color:#a9d5de}.ui.selection.dropdown.info:hover{border-color:#a9d5de}.ui.multiple.selection.info.dropdown>.label{border-color:#a9d5de}.ui.dropdown.info>.menu,.ui.dropdown.info>.menu .menu{border-color:#a9d5de}.ui.dropdown.info>.menu>.item{color:#276f86}.ui.dropdown.info>.menu>.item:hover{background-color:#e9f2fb}.ui.dropdown.info>.menu .active.item{background-color:#cef1fd}.ui.dropdown.success,.ui.dropdown.success>.default.text,.ui.dropdown.success>.text{color:#2c662d}.ui.selection.dropdown.success{background:#fcfff5;border-color:#a3c293}.ui.selection.dropdown.success:hover{border-color:#a3c293}.ui.multiple.selection.success.dropdown>.label{border-color:#a3c293}.ui.dropdown.success>.menu,.ui.dropdown.success>.menu .menu{border-color:#a3c293}.ui.dropdown.success>.menu>.item{color:#2c662d}.ui.dropdown.success>.menu>.item:hover{background-color:#e9fbe9}.ui.dropdown.success>.menu .active.item{background-color:#dafdce}.ui.dropdown.warning,.ui.dropdown.warning>.default.text,.ui.dropdown.warning>.text{color:#573a08}.ui.selection.dropdown.warning{background:#fffaf3;border-color:#c9ba9b}.ui.selection.dropdown.warning:hover{border-color:#c9ba9b}.ui.multiple.selection.warning.dropdown>.label{border-color:#c9ba9b}.ui.dropdown.warning>.menu,.ui.dropdown.warning>.menu .menu{border-color:#c9ba9b}.ui.dropdown.warning>.menu>.item{color:#573a08}.ui.dropdown.warning>.menu>.item:hover{background-color:#fbfbe9}.ui.dropdown.warning>.menu .active.item{background-color:#fdfdce}.ui.dropdown>.clear.dropdown.icon{opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.dropdown>.clear.dropdown.icon:hover{opacity:1}.ui.disabled.dropdown,.ui.dropdown .menu>.disabled.item{cursor:default;pointer-events:none;opacity:.45}.ui.dropdown .menu{left:0}.ui.dropdown .menu .right.menu,.ui.dropdown .right.menu>.menu{left:100%!important;right:auto!important;border-radius:.28571429rem!important}.ui.dropdown>.left.menu{left:auto!important;right:0!important}.ui.dropdown .menu .left.menu,.ui.dropdown>.left.menu .menu{left:auto;right:100%;margin:0 -.5em 0 0!important;border-radius:.28571429rem!important}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon+.text,.ui.dropdown .left.menu .item .dropdown.icon+.text{margin-left:1em;margin-right:0}.ui.upward.dropdown>.menu{top:auto;bottom:100%;-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.08);box-shadow:0 0 3px 0 rgba(0,0,0,.08);border-radius:.28571429rem .28571429rem 0 0}.ui.dropdown .upward.menu{top:auto!important;bottom:0!important}.ui.simple.upward.active.dropdown,.ui.simple.upward.dropdown:hover{border-radius:.28571429rem .28571429rem 0 0!important}.ui.upward.dropdown.button:not(.pointing):not(.floating).active{border-radius:.28571429rem .28571429rem 0 0}.ui.upward.selection.dropdown .menu{border-top-width:1px!important;border-bottom-width:0!important;-webkit-box-shadow:0 -2px 3px 0 rgba(0,0,0,.08);box-shadow:0 -2px 3px 0 rgba(0,0,0,.08)}.ui.upward.selection.dropdown:hover{-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.05);box-shadow:0 0 2px 0 rgba(0,0,0,.05)}.ui.active.upward.selection.dropdown{border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.selection.dropdown.visible{-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.08);box-shadow:0 0 3px 0 rgba(0,0,0,.08);border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.active.selection.dropdown:hover{-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.05);box-shadow:0 0 3px 0 rgba(0,0,0,.05)}.ui.upward.active.selection.dropdown:hover .menu{-webkit-box-shadow:0 -2px 3px 0 rgba(0,0,0,.08);box-shadow:0 -2px 3px 0 rgba(0,0,0,.08)}.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{overflow-x:hidden;overflow-y:auto}.ui.scrolling.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch;min-width:100%!important;width:auto!important}.ui.dropdown .scrolling.menu{position:static;overflow-y:auto;border:none;-webkit-box-shadow:none!important;box-shadow:none!important;border-radius:0!important;margin:0!important;min-width:100%!important;width:auto!important;border-top:1px solid rgba(34,36,38,.15)}.ui.dropdown .scrolling.menu>.item.item.item,.ui.scrolling.dropdown .menu .item.item.item{border-top:none}.ui.dropdown .scrolling.menu .item:first-child,.ui.scrolling.dropdown .menu .item:first-child{border-top:none}.ui.dropdown>.animating.menu .scrolling.menu,.ui.dropdown>.visible.menu .scrolling.menu{display:block}@media all and (-ms-high-contrast:none){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{min-width:calc(100% - 17px)}}@media only screen and (max-width:767.98px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:10.28571429rem}}@media only screen and (min-width:768px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:15.42857143rem}}@media only screen and (min-width:992px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}}@media only screen and (min-width:1920px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}}.ui.column.dropdown>.menu{-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.dropdown[class*="two column"]>.menu>.item{width:50%}.ui.dropdown[class*="three column"]>.menu>.item{width:33%}.ui.dropdown[class*="four column"]>.menu>.item{width:25%}.ui.dropdown[class*="five column"]>.menu>.item{width:20%}.ui.simple.dropdown .menu:after,.ui.simple.dropdown .menu:before{display:none}.ui.simple.dropdown .menu{position:absolute;display:-ms-inline-flexbox!important;display:block;overflow:hidden;top:-9999px;opacity:0;width:0;height:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;margin-top:0!important}.ui.simple.active.dropdown,.ui.simple.dropdown:hover{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.simple.active.dropdown>.menu,.ui.simple.dropdown:hover>.menu{overflow:visible;width:auto;height:auto;top:100%;opacity:1}.ui.simple.dropdown .menu .item:hover>.menu,.ui.simple.dropdown>.menu>.item:active>.menu{overflow:visible;width:auto;height:auto;top:0!important;left:100%;opacity:1}.right.menu .ui.simple.dropdown>.menu .item:hover>.menu:not(.right),.right.menu .ui.simple.dropdown>.menu>.item:active>.menu:not(.right),.ui.simple.dropdown .menu .item:hover>.left.menu,.ui.simple.dropdown>.menu>.item:active>.left.menu{left:auto;right:100%}.ui.simple.disabled.dropdown:hover .menu{display:none;height:0;width:0;overflow:hidden}.ui.simple.visible.dropdown>.menu{display:block}.ui.simple.scrolling.active.dropdown>.menu,.ui.simple.scrolling.dropdown:hover>.menu{overflow-x:hidden;overflow-y:auto}.ui.fluid.dropdown{display:block;width:100%!important;min-width:0}.ui.fluid.dropdown>.dropdown.icon{float:right}.ui.floating.dropdown .menu{left:0;right:auto;-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)!important;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)!important;border-radius:.28571429rem!important}.ui.floating.dropdown>.menu{border-radius:.28571429rem!important}.ui:not(.upward).floating.dropdown>.menu{margin-top:.5em}.ui.upward.floating.dropdown>.menu{margin-bottom:.5em}.ui.pointing.dropdown>.menu{top:100%;margin-top:.78571429rem;border-radius:.28571429rem}.ui.pointing.dropdown>.menu:not(.hidden):after{display:block;position:absolute;pointer-events:none;content:'';visibility:visible;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:.5em;height:.5em;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);background:#fff;z-index:2}.ui.pointing.dropdown>.menu:not(.hidden):after{top:-.25em;left:50%;margin:0 0 0 -.25em}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu:after{top:-.25em;left:1em;right:auto;margin:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.top.right.pointing.dropdown>.menu{top:100%;bottom:auto;right:0;left:auto;margin:1em 0 0}.ui.top.pointing.dropdown>.left.menu:after,.ui.top.right.pointing.dropdown>.menu:after{top:-.25em;left:auto!important;right:1em!important;margin:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.pointing.dropdown>.menu{top:0;left:100%;right:auto;margin:0 0 0 1em}.ui.left.pointing.dropdown>.menu:after{top:1em;left:-.25em;margin:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu{left:auto!important;right:100%!important;margin:0 1em 0 0}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu:after{top:1em;left:auto;right:-.25em;margin:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.ui.right.pointing.dropdown>.menu{top:0;left:auto;right:100%;margin:0 1em 0 0}.ui.right.pointing.dropdown>.menu:after{top:1em;left:auto;right:-.25em;margin:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.ui.bottom.pointing.dropdown>.menu{top:auto;bottom:100%;left:0;right:auto;margin:0 0 1em}.ui.bottom.pointing.dropdown>.menu:after{top:auto;bottom:-.25em;right:auto;margin:0;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.ui.bottom.pointing.dropdown>.menu .menu{top:auto!important;bottom:0!important}.ui.bottom.left.pointing.dropdown>.menu{left:0;right:auto}.ui.bottom.left.pointing.dropdown>.menu:after{left:1em;right:auto}.ui.bottom.right.pointing.dropdown>.menu{right:0;left:auto}.ui.bottom.right.pointing.dropdown>.menu:after{left:auto;right:1em}.ui.pointing.upward.dropdown .menu,.ui.top.pointing.upward.dropdown .menu{top:auto!important;bottom:100%!important;margin:0 0 .78571429rem;border-radius:.28571429rem}.ui.pointing.upward.dropdown .menu:after,.ui.top.pointing.upward.dropdown .menu:after{top:100%!important;bottom:auto!important;-webkit-box-shadow:1px 1px 0 0 rgba(34,36,38,.15);box-shadow:1px 1px 0 0 rgba(34,36,38,.15);margin:-.25em 0 0}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 1em 0 0}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after{top:auto!important;bottom:0!important;margin:0 0 1em 0;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 0 0 1em}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after{top:auto!important;bottom:0!important;margin:0 0 1em 0;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}.ui.dropdown,.ui.dropdown .menu>.item{font-size:1rem}.ui.mini.dropdown,.ui.mini.dropdown .menu>.item{font-size:.78571429rem}.ui.tiny.dropdown,.ui.tiny.dropdown .menu>.item{font-size:.85714286rem}.ui.small.dropdown,.ui.small.dropdown .menu>.item{font-size:.92857143rem}.ui.large.dropdown,.ui.large.dropdown .menu>.item{font-size:1.14285714rem}.ui.big.dropdown,.ui.big.dropdown .menu>.item{font-size:1.28571429rem}.ui.huge.dropdown,.ui.huge.dropdown .menu>.item{font-size:1.42857143rem}.ui.massive.dropdown,.ui.massive.dropdown .menu>.item{font-size:1.71428571rem}.ui.inverted.dropdown .menu{background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(255,255,255,.15)}.ui.inverted.dropdown .menu>.item{color:rgba(255,255,255,.8)}.ui.inverted.dropdown .menu .active.item{background:0 0;color:rgba(255,255,255,.8);-webkit-box-shadow:none;box-shadow:none}.ui.inverted.dropdown .menu>.item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}.ui.inverted.dropdown .menu .selected.item,.ui.inverted.dropdown.selected{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}.ui.inverted.dropdown .menu>.header{color:#fff}.ui.inverted.dropdown .menu>.item>.description,.ui.inverted.dropdown>.text>.description{color:rgba(255,255,255,.5)}.ui.inverted.dropdown .menu>.divider{border-top:1px solid rgba(255,255,255,.15)}.ui.inverted.dropdown .scrolling.menu{border:none;border-top:1px solid rgba(255,255,255,.15)}.ui.inverted.selection.dropdown{border:1px solid rgba(255,255,255,.15);background:#1b1c1d;color:rgba(255,255,255,.8)}.ui.inverted.selection.dropdown:hover{border-color:rgba(255,255,255,.25);-webkit-box-shadow:none;box-shadow:none}.ui.inverted.selection.dropdown input{color:#fff}.ui.inverted.selection.visible.dropdown>.text:not(.default){color:rgba(255,255,255,.9)}.ui.inverted.selection.active.dropdown .menu,.ui.inverted.selection.active.dropdown:hover{border-color:rgba(255,255,255,.15)}.ui.inverted.selection.dropdown .menu>.item{border-top:1px solid #242526}.ui.inverted.default.dropdown:not(.button)>.text,.ui.inverted.dropdown:not(.button)>.default.text{color:rgba(255,255,255,.5)}.ui.inverted.default.dropdown:not(.button)>input:focus~.text,.ui.inverted.dropdown:not(.button)>input:focus~.default.text{color:rgba(255,255,255,.7)}.ui.inverted.active.search.dropdown input.search:focus+.text .flag,.ui.inverted.active.search.dropdown input.search:focus+.text i.icon{opacity:.45}.ui.inverted.active.search.dropdown input.search:focus+.text{color:rgba(255,255,255,.7)!important}.ui.inverted.dropdown .menu>.message:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.dropdown .menu>.item:first-child{border-top-width:0}.ui.inverted.multiple.dropdown>.label{background-color:rgba(255,255,255,.7);background-image:none;color:#000;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0) inset;box-shadow:0 0 0 1px rgba(255,255,255,0) inset}.ui.inverted.multiple.dropdown>.label:hover{background-color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);background-image:none;color:#000}.ui.inverted.multiple.dropdown>.label>.close.icon,.ui.inverted.multiple.dropdown>.label>.delete.icon{opacity:.6}.ui.inverted.multiple.dropdown>.label>.close.icon:hover,.ui.inverted.multiple.dropdown>.label>.delete.icon:hover{opacity:.8}.ui.inverted.dropdown input::-webkit-selection,.ui.inverted.dropdown textarea::-webkit-selection{background-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}.ui.inverted.dropdown input::-moz-selection,.ui.inverted.dropdown textarea::-moz-selection{background-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}.ui.inverted.dropdown input::selection,.ui.inverted.dropdown textarea::selection{background-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}.ui.inverted.dropdown .menu::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.inverted.pointing.dropdown>.menu:after{background:#1b1c1d;-webkit-box-shadow:-1px -1px 0 0 rgba(255,255,255,.15);box-shadow:-1px -1px 0 0 rgba(255,255,255,.15)}@font-face{font-family:Dropdown;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');font-weight:400;font-style:normal}.ui.dropdown>.dropdown.icon{font-family:Dropdown;line-height:1;height:1em;width:1.23em;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.ui.dropdown>.dropdown.icon{width:auto}.ui.dropdown>.dropdown.icon:before{content:'\f0d7'}.ui.dropdown .menu .item .dropdown.icon:before{content:'\f0da'}.ui.dropdown .item .left.dropdown.icon:before,.ui.dropdown .left.menu .item .dropdown.icon:before{content:"\f0d9"}.ui.vertical.menu .dropdown.item>.dropdown.icon:before{content:"\f0da"} - + */.ui.dropdown{cursor:pointer;position:relative;display:inline-block;outline:0;text-align:left;transition:box-shadow .1s ease,width .1s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.dropdown .menu{cursor:auto;position:absolute;display:none;outline:0;top:100%;min-width:-webkit-max-content;min-width:max-content;margin:0;padding:0;background:#fff;font-size:1em;text-shadow:none;text-align:left;box-shadow:0 2px 3px 0 rgba(34,36,38,.15);border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;transition:opacity .1s ease;z-index:11;will-change:transform,opacity}.ui.dropdown .menu>*{white-space:nowrap}.ui.dropdown>input:not(.search):first-child,.ui.dropdown>select{display:none!important}.ui.dropdown:not(.labeled)>.dropdown.icon{position:relative;width:auto;min-width:1em;font-size:.85714286em;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon{width:auto;float:right;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon+.text{margin-right:1em}.ui.dropdown>.text{display:inline-block;transition:none}.ui.dropdown .menu>.item{position:relative;cursor:pointer;display:block;border:none;height:auto;min-height:2.57142857rem;text-align:left;border-top:none;line-height:1em;font-size:1rem;color:rgba(0,0,0,.87);padding:.78571429rem 1.14285714rem;text-transform:none;font-weight:400;box-shadow:none;-webkit-touch-callout:none}.ui.dropdown .menu>.item:first-child{border-top-width:0}.ui.dropdown .menu>.item.vertical{display:flex;flex-direction:column-reverse}.ui.dropdown .menu .item>[class*="right floated"],.ui.dropdown>.text>[class*="right floated"]{float:right!important;margin-right:0!important;margin-left:1em!important}.ui.dropdown .menu .item>[class*="left floated"],.ui.dropdown>.text>[class*="left floated"]{float:left!important;margin-left:0!important;margin-right:1em!important}.ui.dropdown .menu .item>.flag.floated,.ui.dropdown .menu .item>.image.floated,.ui.dropdown .menu .item>i.icon.floated,.ui.dropdown .menu .item>img.floated{margin-top:0}.ui.dropdown .menu>.header{margin:1rem 0 .75rem;padding:0 1.14285714rem;font-weight:700;text-transform:uppercase}.ui.dropdown .menu>.header:not(.ui){color:rgba(0,0,0,.85);font-size:.78571429em}.ui.dropdown .menu>.divider{border-top:1px solid rgba(34,36,38,.1);height:0;margin:.5em 0}.ui.dropdown .menu>.horizontal.divider{border-top:none}.ui.ui.ui.dropdown .menu>.input{width:auto;display:flex;margin:1.14285714rem .78571429rem;min-width:10rem}.ui.dropdown .menu>.header+.input{margin-top:0}.ui.dropdown .menu>.input:not(.transparent) input{padding:.5em 1em}.ui.dropdown .menu>.input:not(.transparent) .button,.ui.dropdown .menu>.input:not(.transparent) .label,.ui.dropdown .menu>.input:not(.transparent) i.icon{padding-top:.5em;padding-bottom:.5em}.ui.dropdown .menu>.item>.description,.ui.dropdown>.text>.description{float:right;margin:0 0 0 1em;color:rgba(0,0,0,.4)}.ui.dropdown .menu>.item.vertical>.description{margin:0}.ui.dropdown .menu>.item.vertical>.text{margin-bottom:.25em}.ui.dropdown .menu>.message{padding:.78571429rem 1.14285714rem;font-weight:400}.ui.dropdown .menu>.message:not(.ui){color:rgba(0,0,0,.4)}.ui.dropdown .menu .menu{top:0;left:100%;right:auto;margin:0 -.5em!important;border-radius:.28571429rem!important;z-index:21!important}.ui.dropdown .menu .menu::after{display:none}.ui.dropdown>.text>.flag,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>i.icon,.ui.dropdown>.text>i.icons,.ui.dropdown>.text>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>i.icon,.ui.dropdown .menu>.item>i.icons,.ui.dropdown .menu>.item>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>i.icon,.ui.dropdown .menu>.item>i.icons,.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.flag,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>i.icon,.ui.dropdown>.text>i.icons,.ui.dropdown>.text>img{margin-left:0;float:none;margin-right:.78571429rem}.ui.dropdown .menu>.item>.image:not(.icon),.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.image:not(.icon),.ui.dropdown>.text>img{display:inline-block;vertical-align:top;width:auto;margin-top:-.5em;margin-bottom:-.5em;max-height:2em}.ui.dropdown .ui.menu>.item::before,.ui.menu .ui.dropdown .menu>.item::before{display:none}.ui.menu .ui.dropdown .menu .active.item{border-left:none}.ui.buttons>.ui.dropdown:last-child>.menu:not(.left),.ui.menu .right.dropdown.item>.menu:not(.left),.ui.menu .right.menu .dropdown:last-child>.menu:not(.left){left:auto;right:0}.ui.label.dropdown .menu{min-width:100%}.ui.dropdown.icon.button>.dropdown.icon{margin:0}.ui.dropdown.button .menu{min-width:100%}.ui.dropdown.button:not(.pointing):not(.floating).active{border-radius:.28571429rem .28571429rem 0 0}.ui.dropdown.button:not(.pointing):not(.floating)>.menu{border-radius:0 0 .28571429rem .28571429rem}select.ui.dropdown{height:38px;padding:.5em;border:1px solid rgba(34,36,38,.15);visibility:visible}.ui.selection.dropdown{cursor:pointer;word-wrap:break-word;line-height:1em;white-space:normal;outline:0;transform:rotateZ(0);min-width:14em;min-height:2.71428571em;background:#fff;display:inline-block;padding:.78571429em 3.2em .78571429em 1em;color:rgba(0,0,0,.87);box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;transition:box-shadow .1s ease,width .1s ease}.ui.selection.dropdown.active,.ui.selection.dropdown.visible{z-index:10}.ui.selection.dropdown>.delete.icon,.ui.selection.dropdown>.dropdown.icon,.ui.selection.dropdown>.search.icon{cursor:pointer;position:absolute;width:auto;height:auto;line-height:1.21428571em;top:.78571429em;right:1em;z-index:3;margin:-.78571429em;padding:.91666667em;opacity:.8;transition:opacity .1s ease}.ui.compact.selection.dropdown{min-width:0}.ui.compact.selection.dropdown>.menu{width:auto}.ui.compact.selection.dropdown>.menu:not(.multiline){width:-webkit-max-content;width:max-content}.ui.selection.dropdown:not(.unlimited) .menu{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.selection.dropdown .menu{outline:0;margin:0 -1px;min-width:calc(100% + 2px);width:calc(100% + 2px);box-shadow:0 2px 3px 0 rgba(34,36,38,.15);transition:opacity .1s ease}.ui.selection.dropdown:not(.pointing):not(.floating) .menu{border-top-width:0;border-radius:0 0 .28571429rem .28571429rem}.ui.selection.dropdown .menu::after,.ui.selection.dropdown .menu::before{display:none}.ui.selection.dropdown .menu>.message{padding:.78571429rem 1.14285714rem}@media only screen and (max-width:767.98px){.ui.selection.dropdown.short .menu{max-height:6.01071429rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:4.00714286rem}.ui.selection.dropdown:not(.unlimited) .menu{max-height:8.01428571rem}.ui.selection.dropdown.long .menu{max-height:16.02857143rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:24.04285714rem}}@media only screen and (min-width:768px){.ui.selection.dropdown.short .menu{max-height:8.01428571rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:5.34285714rem}.ui.selection.dropdown:not(.unlimited) .menu{max-height:10.68571429rem}.ui.selection.dropdown.long .menu{max-height:21.37142857rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:32.05714286rem}}@media only screen and (min-width:992px){.ui.selection.dropdown.short .menu{max-height:12.02142857rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:8.01428571rem}.ui.selection.dropdown:not(.unlimited) .menu{max-height:16.02857143rem}.ui.selection.dropdown.long .menu{max-height:32.05714286rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:48.08571429rem}}@media only screen and (min-width:1920px){.ui.selection.dropdown.short .menu{max-height:16.02857143rem}.ui.selection.dropdown[class*="very short"] .menu{max-height:10.68571429rem}.ui.selection.dropdown:not(.unlimited) .menu{max-height:21.37142857rem}.ui.selection.dropdown.long .menu{max-height:42.74285714rem}.ui.selection.dropdown[class*="very long"] .menu{max-height:64.11428571rem}}.ui.selection.dropdown .menu>.item{border-top:1px solid #fafafa;padding:.78571429rem 1.14285714rem;white-space:normal;word-wrap:normal}.ui.selection.floating.dropdown .menu>.item:first-child,.ui.selection.pointing.dropdown .menu>.item:first-child{border-top:none}.ui.selection.dropdown .menu>.hidden.addition.item{display:none}.ui.dropdown>.menu>.stuck.addition.item:first-child{position:sticky;top:0;box-shadow:0 2px 3px 0 rgba(34,36,38,.15);background:#fff;z-index:14}.ui.selection.dropdown:hover{border-color:rgba(34,36,38,.35);box-shadow:none}.ui.selection.active.dropdown,.ui.selection.simple.dropdown:hover{border-color:#96c8da;box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown .menu,.ui.selection.simple.dropdown:hover .menu{border-color:#96c8da;box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.dropdown:focus{border-color:#96c8da;box-shadow:none}.ui.selection.dropdown:focus .menu{border-color:#96c8da;box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.visible.dropdown>.text:not(.default){font-weight:400;color:rgba(0,0,0,.8)}.ui.selection.active.dropdown:hover{border-color:#96c8da;box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown:hover .menu{border-color:#96c8da;box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.active.selection.dropdown>.dropdown.icon,.ui.visible.selection.dropdown>.dropdown.icon{opacity:"";z-index:3}.ui.active.selection.dropdown:not(.pointing):not(.floating){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.active.empty.selection.dropdown{border-radius:.28571429rem!important;box-shadow:none!important}.ui.active.empty.selection.dropdown .menu{border:none!important;box-shadow:none!important}@supports (-webkit-touch-callout:none) or (-moz-appearance:none){@media (-moz-touch-enabled),(pointer:coarse){.ui.dropdown .scrollhint.menu:not(.hidden)::before{animation:scrollhint 2s ease 2;content:"";z-index:15;display:block;position:absolute;opacity:0;right:.25em;top:0;height:100%;border-right:.25em solid;border-left:0;border-image:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0)) 1 100%}.ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before{border-image:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,0)) 1 100%}@keyframes scrollhint{0%{opacity:1;top:100%}100%{opacity:0;top:0}}}}.ui.search.dropdown{min-width:""}.ui.search.dropdown>input.search{background:none transparent!important;border:none!important;box-shadow:none!important;cursor:text;top:0;left:1px;width:100%;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);padding:inherit}.ui.search.dropdown>input.search{position:absolute;z-index:2}.ui.search.dropdown>.text{cursor:text;position:relative;left:1px;z-index:auto}.ui.search.selection.dropdown>input.search{line-height:1.21428571em;padding:.67857143em 3.2em .67857143em 1em}.ui.search.selection.dropdown>span.sizer{line-height:1.21428571em;padding:.67857143em 3.2em .67857143em 1em;display:none;white-space:pre}.ui.search.dropdown.active>input.search,.ui.search.dropdown.visible>input.search{cursor:auto}.ui.search.dropdown.active>.text,.ui.search.dropdown.visible>.text{pointer-events:none}.ui.active.search.dropdown input.search:focus+.text .flag,.ui.active.search.dropdown input.search:focus+.text i.icon{opacity:.45}.ui.active.search.dropdown input.search:focus+.text{color:rgba(115,115,115,.87)!important}.ui.search.dropdown.button>span.sizer{display:none}.ui.search.dropdown:not(.unlimited) .menu{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}@media only screen and (max-width:767.98px){.ui.search.dropdown:not(.unlimited) .menu{max-height:8.01428571rem}}@media only screen and (min-width:768px){.ui.search.dropdown:not(.unlimited) .menu{max-height:10.68571429rem}}@media only screen and (min-width:992px){.ui.search.dropdown:not(.unlimited) .menu{max-height:16.02857143rem}}@media only screen and (min-width:1920px){.ui.search.dropdown:not(.unlimited) .menu{max-height:21.37142857rem}}.ui.dropdown>.remove.icon{cursor:pointer;font-size:.85714286em;margin:-.78571429em;padding:.91666667em;right:2em;top:.78571429em;position:absolute;opacity:.6;z-index:3}.ui.selection.dropdown>.remove.icon{right:3em}.ui.inline.dropdown>.remove.icon{right:2.2em}.ui.clearable.dropdown .text,.ui.clearable.dropdown a:last-of-type{margin-right:1.5em}.ui.dropdown input:not([value])~.remove.icon,.ui.dropdown input[value=""]~.remove.icon,.ui.dropdown select.noselection~.remove.icon,.ui.dropdown.loading>.remove.icon{display:none}.ui.dropdown:not(.selection)>.remove.icon~.dropdown.icon{margin-left:1.5em}.ui.dropdown:not(.selection):not(.multiple)>.remove.icon{margin-top:-1.35em}.ui.ui.multiple.dropdown{padding:.22619048em 3.2em .22619048em .35714286em}.ui.multiple.dropdown .menu{cursor:auto}.ui.multiple.dropdown>.label{display:inline-block;white-space:normal;font-size:1em;padding:.35714286em .78571429em;margin:.14285714rem .28571429rem .14285714rem 0;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.multiple.dropdown .dropdown.icon{margin:"";padding:""}.ui.multiple.dropdown>.text{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.dropdown>.text.default{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui.multiple.dropdown>.label~input.search{margin-left:.14285714em!important}.ui.multiple.dropdown>.label~.text{display:none}.ui.multiple.dropdown>.label:not(.image)>img:not(.centered){margin-right:.78571429rem}.ui.multiple.dropdown>.label:not(.image)>img.ui:not(.avatar){margin-bottom:.39285714rem}.ui.multiple.dropdown>.image.label img{margin:-.35714286em .78571429em -.35714286em -.78571429em;height:1.71428571em}.ui.multiple.dropdown:not(.selection):not(.labeled)>.dropdown.icon{right:-1.5em}.ui.multiple.dropdown:not(.selection):not(.labeled)>.remove.icon{margin-right:-1.5em}.ui.multiple.dropdown:not(.selection):not(.labeled):not(.search)>.remove.icon~.text.default,.ui.multiple.dropdown:not(.selection):not(.labeled)>.text.default:first-child{overflow:inherit}.ui.multiple.search.dropdown,.ui.multiple.search.dropdown>input.search{cursor:text}.ui.multiple.search.dropdown>.text{display:inline-block;position:absolute;top:0;left:0;padding:inherit;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.search.dropdown>.label~.text{display:none}.ui.multiple.search.dropdown>input.search{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;width:2.2em;line-height:1.21428571em}.ui.multiple.search.dropdown.button{min-width:14em}.ui.multiple.search.dropdown>span.sizer{display:none}.ui.multiple.search.dropdown:not(.selection)>.remove.icon+input.search,.ui.multiple.search.dropdown:not(.selection)>input.search:first-child{min-width:5.05em}.ui.inline.dropdown{cursor:pointer;display:inline-block;color:inherit}.ui.inline.dropdown .dropdown.icon{margin:0 .21428571em;vertical-align:baseline}.ui.inline.dropdown>.text{font-weight:700}.ui.inline.dropdown .menu{cursor:auto;margin-top:.21428571em;border-radius:.28571429rem}.ui.dropdown .menu .active.item{background:0 0;font-weight:700;color:rgba(0,0,0,.95);box-shadow:none;z-index:12}.ui.dropdown .menu>.item:hover{background:#f2f2f2;color:rgba(0,0,0,.95);z-index:13}.ui.default.dropdown:not(.button)>.text,.ui.dropdown:not(.button)>.default.text{color:rgba(191,191,191,.87)}.ui.default.dropdown:not(.button)>input:focus~.text,.ui.dropdown:not(.button)>input:focus~.default.text{color:rgba(115,115,115,.87)}.ui.loading.dropdown>i.icon{height:1em!important}.ui.loading.selection.dropdown>i.icon{padding:1.5em 1.28571429em!important}.ui.loading.dropdown>i.icon::before{position:absolute;content:"";top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.dropdown>i.icon::after{position:absolute;content:"";top:50%;left:50%;box-shadow:0 0 0 1px transparent;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem}.ui.loading.dropdown.button>i.icon::after,.ui.loading.dropdown.button>i.icon::before{display:none}.ui.loading.dropdown>.text{transition:none}.ui.dropdown .loading.menu{display:block;visibility:hidden;z-index:-1}.ui.dropdown>.loading.menu{left:0!important;right:auto!important}.ui.dropdown>.menu .loading.menu{left:100%!important;right:auto!important}.ui.dropdown .menu .selected.item,.ui.dropdown.selected{background:#f7f7f7;color:rgba(0,0,0,.95)}.ui.dropdown>.filtered.text{visibility:hidden}.ui.dropdown .filtered.item{display:none!important}.ui.dropdown.error,.ui.dropdown.error>.default.text,.ui.dropdown.error>.text{color:#9f3a38}.ui.selection.dropdown.error{background:#fff6f6;border-color:#e0b4b4}.ui.selection.dropdown.error:hover{border-color:#e0b4b4}.ui.multiple.selection.error.dropdown>.label{border-color:#e0b4b4}.ui.dropdown.error>.menu,.ui.dropdown.error>.menu .menu{border-color:#e0b4b4}.ui.dropdown.error>.menu>.item{color:#9f3a38}.ui.dropdown.error>.menu>.item:hover{background-color:#fbe7e7}.ui.dropdown.error>.menu .active.item{background-color:#fdcfcf}.ui.dropdown.info,.ui.dropdown.info>.default.text,.ui.dropdown.info>.text{color:#276f86}.ui.selection.dropdown.info{background:#f8ffff;border-color:#a9d5de}.ui.selection.dropdown.info:hover{border-color:#a9d5de}.ui.multiple.selection.info.dropdown>.label{border-color:#a9d5de}.ui.dropdown.info>.menu,.ui.dropdown.info>.menu .menu{border-color:#a9d5de}.ui.dropdown.info>.menu>.item{color:#276f86}.ui.dropdown.info>.menu>.item:hover{background-color:#e9f2fb}.ui.dropdown.info>.menu .active.item{background-color:#cef1fd}.ui.dropdown.success,.ui.dropdown.success>.default.text,.ui.dropdown.success>.text{color:#2c662d}.ui.selection.dropdown.success{background:#fcfff5;border-color:#a3c293}.ui.selection.dropdown.success:hover{border-color:#a3c293}.ui.multiple.selection.success.dropdown>.label{border-color:#a3c293}.ui.dropdown.success>.menu,.ui.dropdown.success>.menu .menu{border-color:#a3c293}.ui.dropdown.success>.menu>.item{color:#2c662d}.ui.dropdown.success>.menu>.item:hover{background-color:#e9fbe9}.ui.dropdown.success>.menu .active.item{background-color:#dafdce}.ui.dropdown.warning,.ui.dropdown.warning>.default.text,.ui.dropdown.warning>.text{color:#573a08}.ui.selection.dropdown.warning{background:#fffaf3;border-color:#c9ba9b}.ui.selection.dropdown.warning:hover{border-color:#c9ba9b}.ui.multiple.selection.warning.dropdown>.label{border-color:#c9ba9b}.ui.dropdown.warning>.menu,.ui.dropdown.warning>.menu .menu{border-color:#c9ba9b}.ui.dropdown.warning>.menu>.item{color:#573a08}.ui.dropdown.warning>.menu>.item:hover{background-color:#fbfbe9}.ui.dropdown.warning>.menu .active.item{background-color:#fdfdce}.ui.dropdown>.clear.dropdown.icon,.ui.dropdown>.remove.icon{opacity:.6;transition:opacity .1s ease}.ui.dropdown>.clear.dropdown.icon:hover,.ui.dropdown>.remove.icon:hover{opacity:1}.ui.disabled.dropdown,.ui.dropdown .menu>.disabled.item{cursor:default;pointer-events:none;opacity:.45}.ui.read-only.dropdown{cursor:default;pointer-events:none}.ui.disabled.dropdown>.label>.delete.icon,.ui.disabled.dropdown>.remove.icon,.ui.read-only.dropdown>.label>.delete.icon,.ui.read-only.dropdown>.remove.icon{display:none}.ui.dropdown .menu{left:0}.ui.dropdown .menu .right.menu,.ui.dropdown .right.menu>.menu{left:100%!important;right:auto!important;border-radius:.28571429rem!important}.ui.dropdown>.left.menu{left:auto!important;right:0!important}.ui.dropdown .menu .left.menu,.ui.dropdown>.left.menu .menu{left:auto;right:100%;margin:0 -.5em 0 0!important;border-radius:.28571429rem!important}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon+.text,.ui.dropdown .left.menu .item .dropdown.icon+.text{margin-left:1em;margin-right:0}.ui.upward.dropdown>.menu{top:auto;bottom:100%;box-shadow:0 0 3px 0 rgba(0,0,0,.08)}.ui.dropdown .upward.menu{top:auto!important;bottom:0!important}.ui.simple.upward.active.dropdown,.ui.simple.upward.dropdown:hover{border-radius:0 0 .28571429rem .28571429rem}.ui.upward.dropdown.button:not(.pointing):not(.floating).active{border-radius:0 0 .28571429rem .28571429rem}.ui.upward.dropdown.button:not(.pointing):not(.floating)>.menu{border-radius:.28571429rem .28571429rem 0 0}.ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu{border-top-width:1px;border-bottom-width:0;box-shadow:0 -2px 3px 0 rgba(0,0,0,.08);border-radius:.28571429rem .28571429rem 0 0}.ui.upward.selection.dropdown:hover{box-shadow:0 0 2px 0 rgba(0,0,0,.05)}.ui.active.upward.selection.dropdown:not(.pointing):not(.floating){border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.selection.dropdown.visible{box-shadow:0 0 3px 0 rgba(0,0,0,.08)}.ui.upward.selection.dropdown.visible:not(.pointing):not(.floating){border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.active.selection.dropdown:hover{box-shadow:0 0 3px 0 rgba(0,0,0,.05)}.ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu{box-shadow:0 -2px 3px 0 rgba(0,0,0,.08)}.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:100%!important;width:auto!important}.ui.dropdown .scrolling.menu{position:static;border:none;box-shadow:none!important;border-radius:0 0 .28571429rem .28571429rem!important;margin:0!important;border-top:1px solid rgba(34,36,38,.15)}.ui.ui.ui.dropdown .scrolling.menu>.item,.ui.ui.ui.scrolling.dropdown .menu .item{border-top:none}.ui.dropdown .scrolling.menu .item:first-child,.ui.scrolling.dropdown .menu .item:first-child{border-top:none}.ui.dropdown>.animating.menu .scrolling.menu,.ui.dropdown>.visible.menu .scrolling.menu{display:block}@media all and (-ms-high-contrast:none){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{min-width:calc(100% - 17px)}}@media only screen and (max-width:767.98px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:10.28571429rem}.ui.dropdown .scrolling.resizable.menu,.ui.scrolling.resizable.dropdown .menu{height:10.28571429rem}}@media only screen and (min-width:768px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:15.42857143rem}.ui.dropdown .scrolling.resizable.menu,.ui.scrolling.resizable.dropdown .menu{height:15.42857143rem}}@media only screen and (min-width:992px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}.ui.dropdown .scrolling.resizable.menu,.ui.scrolling.resizable.dropdown .menu{height:20.57142857rem}}@media only screen and (min-width:1920px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}.ui.dropdown .scrolling.resizable.menu,.ui.scrolling.resizable.dropdown .menu{height:20.57142857rem}}.ui.dropdown .scrolling.resizable.menu,.ui.scrolling.resizable.dropdown .menu{resize:vertical;max-height:none}.ui.labeled.input:not([class*="corner labeled"]) .label:first-child+.dropdown{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:transparent}.ui[class*="right labeled"].input>.dropdown:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right-color:transparent!important}.ui[class*="right labeled"].input>.dropdown+.label{border-top-left-radius:0;border-bottom-left-radius:0}.ui.column.dropdown>.menu{flex-wrap:wrap}.ui.dropdown[class*="two column"]>.menu>.item{width:50%}.ui.dropdown[class*="three column"]>.menu>.item{width:33%}.ui.dropdown[class*="four column"]>.menu>.item{width:25%}.ui.dropdown[class*="five column"]>.menu>.item{width:20%}.ui.simple.dropdown .menu::after,.ui.simple.dropdown .menu::before{display:none}.ui.simple.dropdown .menu{position:absolute;display:-ms-inline-flexbox!important;display:block;overflow:hidden;top:-9999px;opacity:0;width:0;height:0;transition:opacity .1s ease;margin-top:0!important}.ui.simple.dropdown .upward.menu{margin-bottom:1.5em}.ui.simple.selection.dropdown .upward.menu{margin-bottom:2.5em}.ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu{margin-bottom:2.8em}.ui.simple.active.dropdown,.ui.simple.dropdown:hover{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.simple.active.dropdown>.menu,.ui.simple.dropdown:hover>.menu{overflow:visible;width:auto;height:auto;top:100%;opacity:1}.ui.simple.dropdown .menu .item:hover>.menu,.ui.simple.dropdown>.menu>.item:active>.menu{overflow:visible;width:auto;height:auto;top:0!important;left:100%;opacity:1}.ui.simple.selection.active.dropdown>.menu,.ui.simple.selection.dropdown .menu .item:hover>.menu,.ui.simple.selection.dropdown:hover>.menu,.ui.simple.selection.dropdown>.menu>.item:active>.menu{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:none}.right.menu .ui.simple.dropdown>.menu .item:hover>.menu:not(.right),.right.menu .ui.simple.dropdown>.menu>.item:active>.menu:not(.right),.ui.simple.dropdown .menu .item:hover>.left.menu,.ui.simple.dropdown>.menu>.item:active>.left.menu{left:auto;right:100%}.ui.simple.disabled.dropdown:hover .menu{display:none;height:0;width:0;overflow:hidden}.ui.simple.visible.dropdown>.menu{display:block}.ui.simple.scrolling.active.dropdown>.menu,.ui.simple.scrolling.dropdown:hover>.menu{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none}.ui.fluid.dropdown{display:block;width:100%!important;min-width:0}.ui.fluid.dropdown>.dropdown.icon{float:right}.ui.floating.dropdown>.menu{left:0;right:auto;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)!important;border-radius:.28571429rem!important}.ui:not(.upward).floating.dropdown>.menu{margin-top:.5em}.ui.upward.floating.dropdown:not(.simple)>.menu{margin-bottom:.5em}.ui.pointing.dropdown>.menu{top:100%;margin-top:.78571429rem;border-radius:.28571429rem}.ui.pointing.dropdown>.menu:not(.hidden)::after{display:block;position:absolute;pointer-events:none;content:"";visibility:visible;transform:rotate(45deg);width:.5em;height:.5em;box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);background:#fff;z-index:2}@supports selector(:has(.f)){.ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,.ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after{background:#f2f2f2}.ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,.ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after{background:#f7f7f7}}.ui.selection.pointing.dropdown>.menu::after{box-shadow:-1px -1px 0 0 #96c8da}.ui.pointing.dropdown>.menu:not(.hidden)::after{top:-.25em;left:50%;margin:0 0 0 -.25em}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu::after{top:-.25em;left:1em;right:auto;margin:0;transform:rotate(45deg)}.ui.top.right.pointing.dropdown>.menu{top:100%;bottom:auto;right:0;left:auto;margin:1em 0 0}.ui.top.pointing.dropdown>.left.menu::after,.ui.top.right.pointing.dropdown>.menu::after{top:-.25em;left:auto!important;right:1em!important;margin:0;transform:rotate(45deg)}.ui.left.pointing.dropdown>.menu{top:0;left:100%;right:auto;margin:0 0 0 1em}.ui.left.pointing.dropdown>.menu::after{top:1em;left:-.25em;margin:0;transform:rotate(-45deg)}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu{left:auto!important;right:100%!important;margin:0 1em 0 0}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu::after{top:1em;left:auto;right:-.25em;margin:0;transform:rotate(135deg)}.ui.right.pointing.dropdown>.menu{top:0;left:auto;right:100%;margin:0 1em 0 0}.ui.right.pointing.dropdown>.menu::after{top:1em;left:auto;right:-.25em;margin:0;transform:rotate(135deg)}.ui.bottom.pointing.dropdown>.menu{top:auto;bottom:100%;left:0;right:auto;margin:0 0 1em}.ui.bottom.pointing.dropdown>.menu::after{top:auto;bottom:-.25em;right:auto;margin:0;transform:rotate(-135deg)}.ui.bottom.pointing.dropdown>.menu .menu{top:auto!important;bottom:0!important}.ui.bottom.left.pointing.dropdown>.menu{left:0;right:auto}.ui.bottom.left.pointing.dropdown>.menu::after{left:1em;right:auto}.ui.bottom.right.pointing.dropdown>.menu{right:0;left:auto}.ui.bottom.right.pointing.dropdown>.menu::after{left:auto;right:1em}.ui.pointing.upward.dropdown .menu,.ui.top.pointing.upward.dropdown .menu{top:auto!important;bottom:100%!important;margin:0 0 .78571429rem;border-radius:.28571429rem}.ui.pointing.upward.dropdown .menu::after,.ui.top.pointing.upward.dropdown .menu::after{top:100%!important;bottom:auto!important;box-shadow:1px 1px 0 0 rgba(34,36,38,.15);margin:-.25em 0 0}.ui.selection.pointing.upward.dropdown .menu::after{box-shadow:1px 1px 0 0 #96c8da}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 1em 0 0}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after{top:auto!important;bottom:0!important;margin:0 0 1em 0;box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 0 0 1em}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after{top:auto!important;bottom:0!important;margin:0 0 1em 0;box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}.ui.floating.dropdown .menu .item:first-child,.ui.pointing.dropdown .menu .item:first-child{border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.floating.dropdown .menu .item:last-child,.ui.pointing.dropdown .menu .item:last-child{border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.dropdown,.ui.dropdown .menu>.item{font-size:1rem}.ui.mini.dropdown,.ui.mini.dropdown .menu>.item{font-size:.78571429rem}.ui.tiny.dropdown,.ui.tiny.dropdown .menu>.item{font-size:.85714286rem}.ui.small.dropdown,.ui.small.dropdown .menu>.item{font-size:.92857143rem}.ui.large.dropdown,.ui.large.dropdown .menu>.item{font-size:1.14285714rem}.ui.big.dropdown,.ui.big.dropdown .menu>.item{font-size:1.28571429rem}.ui.huge.dropdown,.ui.huge.dropdown .menu>.item{font-size:1.42857143rem}.ui.massive.dropdown,.ui.massive.dropdown .menu>.item{font-size:1.71428571rem}.ui.dropdown .inverted.menu,.ui.inverted.dropdown .menu{background:#1b1c1d;box-shadow:none;border:1px solid rgba(255,255,255,.15)}.ui.dropdown .inverted.menu>.item,.ui.inverted.dropdown .menu>.item{color:rgba(255,255,255,.8)}.ui.dropdown .inverted.menu .active.item,.ui.inverted.dropdown .menu .active.item{background:0 0;color:rgba(255,255,255,.8);box-shadow:none}.ui.dropdown .inverted.menu>.item:hover,.ui.inverted.dropdown .menu>.item:hover{background:#2d2e2f;color:rgba(255,255,255,.8)}.ui.dropdown .inverted.menu .selected.item,.ui.inverted.dropdown .menu .selected.item,.ui.inverted.dropdown.selected{background:#3d3e3f;color:rgba(255,255,255,.8)}.ui.dropdown .inverted.menu>.header,.ui.inverted.dropdown .menu>.header{color:#fff}.ui.dropdown .inverted.menu>.item>.description,.ui.inverted.dropdown .menu>.item>.description,.ui.inverted.dropdown>.text>.description{color:rgba(255,255,255,.5)}.ui.dropdown .inverted.menu>.divider,.ui.inverted.dropdown .menu>.divider{border-top:1px solid rgba(255,255,255,.15)}.ui.dropdown .inverted.scrolling.menu,.ui.inverted.dropdown .scrolling.menu{border:none;border-top:1px solid rgba(255,255,255,.15)}.ui.inverted.selection.dropdown{border:1px solid rgba(255,255,255,.15);background:#1b1c1d;color:rgba(255,255,255,.8)}.ui.inverted.selection.dropdown:hover{border-color:rgba(255,255,255,.25);box-shadow:none}.ui.inverted.selection.dropdown input{color:#fff}.ui.inverted.selection.visible.dropdown>.text:not(.default){color:rgba(255,255,255,.9)}.ui.inverted.selection.active.dropdown .menu,.ui.inverted.selection.active.dropdown:hover,.ui.inverted.selection.simple.dropdown:hover .menu,.ui.selection.active.dropdown .inverted.menu,.ui.selection.simple.dropdown:hover .inverted.menu{border-color:rgba(255,255,255,.15)}.ui.inverted.selection.dropdown .menu>.item,.ui.selection.dropdown .inverted.menu>.item{border-top:1px solid #242526}.ui.inverted.default.dropdown:not(.button)>.text,.ui.inverted.dropdown:not(.button)>.default.text{color:rgba(255,255,255,.5)}.ui.inverted.default.dropdown:not(.button)>input:focus~.text,.ui.inverted.dropdown:not(.button)>input:focus~.default.text{color:rgba(255,255,255,.7)}.ui.inverted.active.search.dropdown input.search:focus+.text .flag,.ui.inverted.active.search.dropdown input.search:focus+.text i.icon{opacity:.45}.ui.inverted.active.search.dropdown input.search:focus+.text{color:rgba(255,255,255,.7)!important}.ui.dropdown .inverted.menu>.message:not(.ui),.ui.inverted.dropdown .menu>.message:not(.ui){color:rgba(255,255,255,.5)}.ui.dropdown .inverted.menu>.item:first-child,.ui.inverted.dropdown .menu>.item:first-child{border-top-width:0}.ui.inverted.multiple.dropdown>.label{background-color:rgba(255,255,255,.7);background-image:none;color:#000;box-shadow:0 0 0 1px rgba(255,255,255,0) inset}.ui.inverted.multiple.dropdown>.label:hover{background-color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);background-image:none;color:#000}.ui.inverted.multiple.dropdown>.label>.close.icon,.ui.inverted.multiple.dropdown>.label>.delete.icon{opacity:.6}.ui.inverted.multiple.dropdown>.label>.close.icon:hover,.ui.inverted.multiple.dropdown>.label>.delete.icon:hover{opacity:.8}.ui.inverted.dropdown input::selection,.ui.inverted.dropdown textarea::selection{background-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}.ui.dropdown .inverted.menu::-webkit-scrollbar-track,.ui.inverted.dropdown .menu::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.dropdown .inverted.menu,.ui.inverted.dropdown .menu{scrollbar-face-color:#656565;scrollbar-shadow-color:#656565;scrollbar-track-color:#323232;scrollbar-arrow-color:#323232;scrollbar-color:rgba(255,255,255,.25) rgba(255,255,255,.1)}.ui.inverted.pointing.dropdown>.menu::after,.ui.pointing.dropdown>.inverted.menu::after{background:#1b1c1d;box-shadow:-1px -1px 0 0 rgba(255,255,255,.15)}.ui.inverted.upward.pointing.dropdown>.menu::after{box-shadow:1px 1px 0 0 rgba(255,255,255,.15)}@supports selector(:has(.f)){.ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,.ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after{background:#2d2e2f}.ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,.ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after{background:#3d3e3f}}@font-face{font-family:Dropdown;src:url(data:application/font-woff;base64,d09GRk9UVE8AAASEAAsAAAAABwQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAC5AAAAU8AAAHrSr22AUZGVE0AAARQAAAAHAAAAByNrZ/TR0RFRgAABDQAAAAcAAAAIAAnABhPUy8yAAABYAAAAEIAAABgTadXCGNtYXAAAAKEAAAAVAAAAWQFcOKQaGVhZAAAAQgAAAAyAAAANg+j805oaGVhAAABPAAAABsAAAAkAwcBDWhtdHgAAARsAAAAFgAAAB4EAQASbWF4cAAAAVgAAAAGAAAABgAIUABuYW1lAAABpAAAAN8AAAG2rSbAM3Bvc3QAAALYAAAADAAAACAAAwAAeJxjYGRgYADiKjtG3nh+m68M3EwMIHCBwT0CRN9PyHYCUp6Mqox5QJqDASwNAMNOBrgAAHicY2BkYGB88P8BkFRlYACTjAyogB0AWWsDFgAAAFAAAAgAAHicY2Bm+Mg4gYGVgYHRhzGNgYHBHUp/ZZBkaGFABYwCSJyANNcUBgcGhg+3GB/8fwCUfMCgAFIDV6AAhIwAUbEMSQAAeJx1zTEKwkAUBNBJjIoKIggW2mwvBEVvIAgiNhY2VjEuQUh2YY2FeACPYOltvIH3cZJ8ywQS3p/d+QEwwAce/o8v9tDGUOzTU3GDXokD+ihuooeHuMX8Je5ijC9bXtCRP1T20Kcq+/RE3KAX4oDeipsYIRa3mD/FXSzxLtZeeGyR8bUwHGObWUvsoZHghhQRHEed3NLI1d+vyw/c43DleZErzBFixli768UaNQ9n9d11OedsJdxiyk0RZ40zsxPu/G7K7k66IUvW5CrRRrso12d1uqtNbHfcF+IHrnU+mwB4nGNgYGBmgGAZBkYGEIgD8hjBfBYGJyDNxcDBwASEjAwKH279//v/P1iVwofrYDbj/8dgPkQvGwMPkGRhYAWy2MHCbEDMxIAXMOOXHvIAAINhDt14nGNgZsALAAB9AAR4nE2Pv0rEQBCHZ3J7d4vGqEcOFaKC/zolZ6OWwmElNj6ClYWmyivcblyzE+RaK8EHsPMxBBtrwUdwA1fobpI7ZWBYfux8fD8ExgAR+fVVcpMkt4AeIAzLLSi3sdzxyt1WucqU31I+25iDtcvej1Kzh99V7+a19NoRPC1GAEsRvCxHwCP87MG8I7WgDRwWoAcrEMGmnT3YT+N0kB7G6Vk8PHLr2K0Tt04HB3FjMhUCQIESM7xDhfeYA3dcz5IZdOAcHuAD14MgeAu+zTNTRV5oTUR5obgZdwpVZFqQzEfKTiaE4JNwEralHGUuErnQNjE2oYxUwS0ldBTSxI3L7cOyKo60ib0lezSl1Rw+GXdq1pQiH03SdzKka4ymosLQTMcedSuIlEJUMqNcUi0jdIP5Ysb++leqLtSI/NWSTS0xq0WyYajQXPSVP/cLitO4NgB4nGNgZGBg4AFiAQYJBiYgzQLEIJoRggEFbQBAAAAAAQAAAADeTO04AAAAANAAR1gAAAAA32BrQnicY2BAAEYQVoVghu0MQgwMAAc/ARcAAA==) format("woff");font-weight:400;font-style:normal}.ui.dropdown>.dropdown.icon{font-family:Dropdown;line-height:1;height:1em;width:1.23em;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.ui.dropdown>.dropdown.icon{width:auto}.ui.dropdown>.dropdown.icon::before{content:"\f0d7"}.ui.dropdown .menu .item .dropdown.icon::before{content:"\f0da"}.ui.dropdown .item .left.dropdown.icon::before,.ui.dropdown .left.menu .item .dropdown.icon::before{content:"\f0d9"}.ui.vertical.menu .dropdown.item>.dropdown.icon::before{content:"\f0da"} + /* Customizations by RTB */ @media only screen and (min-width: 768px) { diff --git a/src/components/semanticUI/dropdown.min.js b/src/components/semanticUI/dropdown.min.js index 324caf17f..172a87fa6 100644 --- a/src/components/semanticUI/dropdown.min.js +++ b/src/components/semanticUI/dropdown.min.js @@ -1,11 +1,11 @@ - /* - * # Fomantic UI - 2.8.6 +/* + * # Fomantic UI - 2.9.3 * https://github.com/fomantic/Fomantic-UI - * http://fomantic-ui.com/ + * https://fomantic-ui.com/ * - * Copyright 2014 Contributors + * Copyright 2023 Contributors * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ -!function(ee,te,ne,ie){"use strict";ee.isFunction=ee.isFunction||function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},te=void 0!==te&&te.Math==Math?te:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),ee.fn.dropdown=function(U){var B,K=ee(this),W=ee(ne),Q=K.selector||"",Y="ontouchstart"in ne.documentElement,$=Y?"touchstart":"click",X=(new Date).getTime(),G=[],J=U,Z="string"==typeof J,_=[].slice.call(arguments,1);return K.each(function(n){var c,e,t,i,a,s,o,r,l,h,f=ee.isPlainObject(U)?ee.extend(!0,{},ee.fn.dropdown.settings,U):ee.extend({},ee.fn.dropdown.settings),g=f.className,u=f.message,d=f.fields,p=f.keys,b=f.metadata,v=f.namespace,m=f.regExp,w=f.selector,C=f.error,x=f.templates,y="."+v,S="module-"+v,A=ee(this),T=ee(f.context),L=A.find(w.text),I=A.find(w.search),D=A.find(w.sizer),k=A.find(w.input),q=A.find(w.icon),O=A.find(w.clearIcon),R=0").html(a).attr("data-"+b.value,t).attr("data-"+b.text,t).addClass(g.addition).addClass(g.item),f.hideAdditions&&i.addClass(g.hidden),n=n===ie?i:n.add(i),h.verbose("Creating user choices for value",t,i))}),n)},userLabels:function(e){var t=h.get.userValues();t&&(h.debug("Adding user labels",t),ee.each(t,function(e,t){h.verbose("Adding custom user value"),h.add.label(t,t)}))},menu:function(){E=ee("
").addClass(g.menu).appendTo(A)},sizer:function(){D=ee("").addClass(g.sizer).insertAfter(I)}},search:function(e){e=e!==ie?e:h.get.query(),h.verbose("Searching for query",e),h.has.minCharacters(e)?h.filter(e):h.hide(null,!0)},select:{firstUnfiltered:function(){h.verbose("Selecting first non-filtered element"),h.remove.selectedItem(),V.not(w.unselectable).not(w.addition+w.hidden).eq(0).addClass(g.selected)},nextAvailable:function(e){var t=(e=e.eq(0)).nextAll(w.item).not(w.unselectable).eq(0),n=e.prevAll(w.item).not(w.unselectable).eq(0);0").addClass("remove icon").insertBefore(L)),h.is.search()&&!h.has.search()&&(h.verbose("Adding search input"),I=ee("").addClass(g.search).prop("autocomplete","off").insertBefore(L)),h.is.multiple()&&h.is.searchSelection()&&!h.has.sizer()&&h.create.sizer(),f.allowTab&&h.set.tabbable()},select:function(){var e=h.get.selectValues();h.debug("Dropdown initialized on a select",e),A.is("select")&&(k=A),0").attr("class",k.attr("class")).addClass(g.selection).addClass(g.dropdown).html(x.dropdown(e,d,f.preserveHTML,f.className)).insertBefore(k),k.hasClass(g.multiple)&&!1===k.prop("multiple")&&(h.error(C.missingMultiple),k.prop("multiple",!0)),k.is("[multiple]")&&h.set.multiple(),k.prop("disabled")&&(h.debug("Disabling dropdown"),A.addClass(g.disabled)),k.removeAttr("required").removeAttr("class").detach().prependTo(A)),h.refresh()},menu:function(e){E.html(x.menu(e,d,f.preserveHTML,f.className)),V=E.find(w.item),M=f.hideDividers?V.parent().children(w.divider):ee()},reference:function(){h.debug("Dropdown behavior was called on select, replacing with closest dropdown"),A=A.parent(w.dropdown),j=A.data(S),H=A.get(0),h.refresh(),h.setup.returnedObject()},returnedObject:function(){var e=K.slice(0,n),t=K.slice(n+1);K=e.add(A).add(t)}},refresh:function(){h.refreshSelectors(),h.refreshData()},refreshItems:function(){V=E.find(w.item),M=f.hideDividers?V.parent().children(w.divider):ee()},refreshSelectors:function(){h.verbose("Refreshing selector cache"),L=A.find(w.text),I=A.find(w.search),k=A.find(w.input),q=A.find(w.icon),R=0"),ee.each(e,function(e,t){var n=f.templates.deQuote(t[d.value]),i=f.templates.escape(t[d.name]||"",f.preserveHTML);k.append('")}),h.observe.select())}},event:{change:function(){P||(h.debug("Input changed, updating selection"),h.set.selected())},focus:function(){f.showOnFocus&&!z&&h.is.hidden()&&!t&&h.show()},blur:function(e){t=ne.activeElement===this,z||t||(h.remove.activeLabel(),h.hide())},mousedown:function(){h.is.searchSelection()?i=!0:z=!0},mouseup:function(){h.is.searchSelection()?i=!1:z=!1},click:function(e){ee(e.target).is(A)&&(h.is.focusedOnSearch()?h.show():h.focusSearch())},search:{focus:function(e){z=!0,h.is.multiple()&&h.remove.activeLabel(),(f.showOnFocus||"focus"!==e.type&&"focusin"!==e.type)&&h.search()},blur:function(e){t=ne.activeElement===this,h.is.searchSelection()&&!i&&(F||t||(f.forceSelection?h.forceSelection():f.allowAdditions||h.remove.searchTerm(),h.hide())),i=!1}},clearIcon:{click:function(e){h.clear(),h.is.searchSelection()&&h.remove.searchTerm(),h.hide(),e.stopPropagation()}},icon:{click:function(e){N=!0,h.has.search()?h.is.active()?h.blurSearch():f.showOnFocus?h.focusSearch():h.toggle():h.toggle()}},text:{focus:function(e){z=!0,h.focusSearch()}},input:function(e){(h.is.multiple()||h.is.searchSelection())&&h.set.filtered(),clearTimeout(h.timer),h.timer=setTimeout(h.search,f.delay.search)},label:{click:function(e){var t=ee(this),n=A.find(w.label),i=n.filter("."+g.active),a=t.nextAll("."+g.active),s=t.prevAll("."+g.active),o=0 modified, recreating menu"),h.is.selectMutation(e)&&(h.disconnect.selectObserver(),h.refresh(),h.setup.select(),h.set.selected(),h.observe.select())}},menu:{mutation:function(e){var t=e[0],n=t.addedNodes?ee(t.addedNodes[0]):ee(!1),i=t.removedNodes?ee(t.removedNodes[0]):ee(!1),a=n.add(i),s=a.is(w.addition)||0=f.maxSelections?(h.debug("Maximum selection count reached"),f.useLabels&&(V.addClass(g.filtered),h.add.message(u.maxSelections)),!0):(h.verbose("No longer at maximum selection count"),h.remove.message(),h.remove.filteredItem(),h.is.searchSelection()&&h.filterItems(),!1))},disabled:function(){I.attr("tabindex",h.is.disabled()?-1:0)}},restore:{defaults:function(e){h.clear(e),h.restore.defaultText(),h.restore.defaultValue()},defaultText:function(){var e=h.get.defaultText();e===h.get.placeholderText?(h.debug("Restoring default placeholder text",e),h.set.placeholderText(e)):(h.debug("Restoring default text",e),h.set.text(e))},placeholderText:function(){h.set.placeholderText()},defaultValue:function(){var e=h.get.defaultValue();e!==ie&&(h.debug("Restoring default value",e),""!==e?(h.set.value(e),h.set.selected()):(h.remove.activeItem(),h.remove.selectedItem()))},labels:function(){f.allowAdditions&&(f.useLabels||(h.error(C.labels),f.useLabels=!0),h.debug("Restoring selected values"),h.create.userLabels()),h.check.maxSelections()},selected:function(){h.restore.values(),h.is.multiple()?(h.debug("Restoring previously selected values and labels"),h.restore.labels()):h.debug("Restoring previously selected values")},values:function(){h.set.initialLoad(),f.apiSettings&&f.saveRemoteData&&h.get.remoteValues()?h.restore.remoteValues():h.set.selected();var e=h.get.value();!e||""===e||Array.isArray(e)&&0===e.length?k.addClass(g.noselection):k.removeClass(g.noselection),h.remove.initialLoad()},remoteValues:function(){var e=h.get.remoteValues();h.debug("Recreating selected from session data",e),e&&(h.is.single()?ee.each(e,function(e,t){h.set.text(t)}):ee.each(e,function(e,t){h.add.label(e,t)}))}},read:{remoteData:function(e){var t;if(te.Storage!==ie)return(t=sessionStorage.getItem(e))!==ie&&t;h.error(C.noStorage)}},save:{defaults:function(){h.save.defaultText(),h.save.placeholderText(),h.save.defaultValue()},defaultValue:function(){var e=h.get.value();h.verbose("Saving default value as",e),A.data(b.defaultValue,e)},defaultText:function(){var e=h.get.text();h.verbose("Saving default text as",e),A.data(b.defaultText,e)},placeholderText:function(){var e;!1!==f.placeholder&&L.hasClass(g.placeholder)&&(e=h.get.text(),h.verbose("Saving placeholder text as",e),A.data(b.placeholderText,e))},remoteData:function(e,t){te.Storage!==ie?(h.verbose("Saving remote data to session storage",t,e),sessionStorage.setItem(t,e)):h.error(C.noStorage)}},clear:function(e){h.is.multiple()&&f.useLabels?h.remove.labels():(h.remove.activeItem(),h.remove.selectedItem(),h.remove.filteredItem()),h.set.placeholderText(),h.clearValue(e)},clearValue:function(e){h.set.value("",null,null,e)},scrollPage:function(e,t){var n,i,a=t||h.get.selectedItem(),s=a.closest(w.menu),o=s.outerHeight(),r=s.scrollTop(),l=V.eq(0).outerHeight(),c=Math.floor(o/l),u=(s.prop("scrollHeight"),"up"==e?r-l*c:r+l*c),d=V.not(w.unselectable);i="up"==e?d.index(a)-c:d.index(a)+c,0<(n=("up"==e?0<=i:i").addClass(g.label).attr("data-"+b.value,s).html(x.label(s,t,f.preserveHTML,f.className)),i=f.onLabelCreate.call(i,s,t),h.has.label(e)?h.debug("User selection already exists, skipping",s):(f.label.variation&&i.addClass(f.label.variation),!0===n?(h.debug("Animating in label",i),i.addClass(g.hidden).insertBefore(a).transition({animation:f.label.transition,debug:f.debug,verbose:f.verbose,duration:f.label.duration})):(h.debug("Adding selection label",i),i.insertBefore(a)))},message:function(e){var t=E.children(w.message),n=f.templates.message(h.add.variables(e));0").html(n).addClass(g.message).appendTo(E)},optionValue:function(e){var t=h.escape.value(e);0").prop("value",t).addClass(g.addition).html(e).appendTo(k),h.verbose("Adding user addition as an
").addClass(h.menu).appendTo(w)},sizer:function(){S=ee("").addClass(h.sizer).insertAfter(x)}},search:function(e){e=void 0!==e?e:M.get.query(),M.verbose("Searching for query",e),!1===m.fireOnInit&&M.is.initialLoad()?M.verbose("Skipping callback on initial load",m.onSearch):M.has.minCharacters(e)&&!1!==m.onSearch.call(q,e)?M.filter(e):M.hide(null,!0)},select:{firstUnfiltered:function(){M.verbose("Selecting first non-filtered element"),M.remove.selectedItem(),L.not(b.unselectable).not(b.addition+b.hidden).eq(0).addClass(h.selected)},nextAvailable:function(e){var t=(e=e.eq(0)).nextAll(b.item).not(b.unselectable).eq(0),e=e.prevAll(b.item).not(b.unselectable).eq(0);0").addClass("remove icon").insertAfter(H)),M.is.search()&&!M.has.search()&&(M.verbose("Adding search input"),e=w.prev("label"),x=ee("").addClass(h.search).prop("autocomplete",M.is.chrome()?"fomantic-search":"off"),0").attr("class",A.attr("class")).addClass(h.selection).addClass(h.dropdown).html(N.dropdown(e,l,m.preserveHTML,m.className)).insertBefore(A),A.hasClass(h.multiple)&&!1===A.prop("multiple")&&(M.error(c.missingMultiple),A.prop("multiple",!0)),A.is("[multiple]")&&M.set.multiple(),A.prop("disabled")&&(M.debug("Disabling dropdown"),w.addClass(h.disabled)),A.is("[required]")&&(m.forceSelection=!0),m.allowTab||A.removeAttr("tabindex"),A.prop("required",!1).removeAttr("class").detach().prependTo(w)),M.refresh()},menu:function(e){k.html(N.menu(e,l,m.preserveHTML,m.className)),L=k.find(b.item),I=m.hideDividers?L.parent().children(b.divider):ee()},reference:function(){M.debug("Dropdown behavior was called on select, replacing with closest dropdown"),w=w.parent(b.dropdown),R=w.data(u),q=w[0],M.refresh(),M.setup.returnedObject()},returnedObject:function(){var e=Q.slice(0,z),t=Q.slice(z+1);Q=e.add(w).add(t)}},refresh:function(){M.refreshSelectors(),M.refreshData()},refreshItems:function(){L=k.find(b.item),I=m.hideDividers?L.parent().children(b.divider):ee()},refreshSelectors:function(){M.verbose("Refreshing selector cache"),C=w.find(b.text),x=w.find(b.search),A=w.find(b.input),H=w.find(b.icon),T=0"),ee.each(e,function(e,t){var n=m.templates.deQuote(t[l.value]),i=m.templates.escape(t[l.name]||"",m.preserveHTML);A.append('")}),M.observe.select())}},event:{paste:function(e){var t,n,i,a,o,s=(e.originalEvent.clipboardData||te.clipboardData).getData("text").split(m.delimiter),r=[];s.forEach(function(e){!1===M.set.selected(M.escape.htmlEntities(e.trim()),null,!1,!0)&&r.push(e.trim())}),e.preventDefault(),0 modified, recreating menu"),M.disconnect.selectObserver(),M.refresh(),M.setup.select(),M.set.selected(),M.observe.select())}},menu:{mutation:function(e){var e=e[0],t=e.addedNodes?ee(e.addedNodes[0]):ee(!1),e=e.removedNodes?ee(e.removedNodes[0]):ee(!1),t=t.add(e),e=t.is(b.addition)||0=m.maxSelections?(M.debug("Maximum selection count reached"),m.useLabels&&(L.addClass(h.filtered),M.add.message(f.maxSelections)),!0):(M.verbose("No longer at maximum selection count"),M.remove.message(),M.remove.filteredItem(),M.is.searchSelection()&&M.filterItems(),!1))},disabled:function(){x.attr("tabindex",M.is.disabled()?-1:0)}},restore:{defaults:function(e){M.clear(e),M.restore.defaultText(),M.restore.defaultValue()},defaultText:function(){var e=M.get.defaultText();e===M.get.placeholderText?(M.debug("Restoring default placeholder text",e),M.set.placeholderText(e)):(M.debug("Restoring default text",e),M.set.text(e))},placeholderText:function(){M.set.placeholderText()},defaultValue:function(){var e=M.get.defaultValue();void 0!==e&&(M.debug("Restoring default value",e),""!==e?(M.set.value(e),M.set.selected()):(M.remove.activeItem(),M.remove.selectedItem()))},labels:function(){m.allowAdditions&&(m.useLabels||(M.error(c.labels),m.useLabels=!0),M.debug("Restoring selected values"),M.create.userLabels()),M.check.maxSelections()},selected:function(){M.restore.values(),M.is.multiple()?(M.debug("Restoring previously selected values and labels"),M.restore.labels()):M.debug("Restoring previously selected values")},values:function(){M.set.initialLoad(),m.apiSettings&&m.saveRemoteData&&M.get.remoteValues()?M.restore.remoteValues():M.set.selected();var e=M.get.value();!e||""===e||Array.isArray(e)&&0===e.length?A.addClass(h.noselection):A.removeClass(h.noselection),M.remove.initialLoad()},remoteValues:function(){var e=M.get.remoteValues();M.debug("Recreating selected from session data",e),e&&(M.is.single()?ee.each(e,function(e,t){M.set.text(t)}):m.useLabels&&ee.each(e,function(e,t){M.add.label(e,t)}))}},read:{remoteData:function(e){if(void 0!==te.Storage)return void 0!==(e=sessionStorage.getItem(e+i))&&e;M.error(c.noStorage)}},save:{defaults:function(){M.save.defaultText(),M.save.placeholderText(),M.save.defaultValue()},defaultValue:function(){var e=M.get.value();M.verbose("Saving default value as",e),w.data(p.defaultValue,e)},defaultText:function(){var e=M.get.text();M.verbose("Saving default text as",e),w.data(p.defaultText,e)},placeholderText:function(){var e;!1!==m.placeholder&&C.hasClass(h.placeholder)&&(e=M.get.text(),M.verbose("Saving placeholder text as",e),w.data(p.placeholderText,e))},remoteData:function(e,t){void 0===te.Storage?M.error(c.noStorage):(M.verbose("Saving remote data to session storage",t,e),sessionStorage.setItem(t+i,e))}},clear:function(e){M.is.multiple()&&m.useLabels?M.remove.labels(w.find(b.label),e):(M.remove.activeItem(),M.remove.selectedItem(),M.remove.filteredItem()),M.set.placeholderText(),M.clearValue(e)},clearValue:function(e){M.set.value("",null,null,e)},clearCache:function(){M.debug("Clearing API cache once"),V=!0},scrollPage:function(e,t){var t=t||M.get.selectedItem(),n=t.closest(b.menu),i=n.outerHeight(),a=n.scrollTop(),o=L.eq(0).outerHeight(),i=Math.floor(i/o),a="up"===e?a-o*i:a+o*i,o=L.not(b.unselectable),i="up"===e?o.index(t)-i:o.index(t)+i,i=("up"===e?0<=i:i").addClass(h.label).attr("data-"+p.value,o).html(N.label(o,t,m.preserveHTML,m.className)),i=m.onLabelCreate.call(i,o,t),M.has.label(e)?M.debug("User selection already exists, skipping",o):(m.label.variation&&i.addClass(m.label.variation),!0===n&&m.label.transition?(M.debug("Animating in label",i),i.addClass(h.hidden).insertBefore(a).transition({animation:m.label.transition,debug:m.debug,verbose:m.verbose,silent:m.silent,duration:m.label.duration})):(M.debug("Adding selection label",i),i.insertBefore(a)))},message:function(e){var t=k.children(b.message),e=m.templates.message(M.add.variables(e));0").html(e).addClass(h.message).appendTo(k)},optionValue:function(e){var t=M.escape.value(e);0").prop("value",t).addClass(h.addition).text(e).appendTo(A),M.verbose("Adding user addition as an
").addClass(v.menu).appendTo(y)},sizer:function(){S=ee("").addClass(v.sizer).insertAfter(x)}},search:function(e){e=void 0!==e?e:j.get.query(),j.verbose("Searching for query",e),!1===p.fireOnInit&&j.is.initialLoad()?j.verbose("Skipping callback on initial load",p.onSearch):j.has.minCharacters(e)&&!1!==p.onSearch.call(E,e)?j.filter(e):j.hide(null,!0)},select:{firstUnfiltered:function(){j.verbose("Selecting first non-filtered element"),j.remove.selectedItem(),D.not(b.unselectable).not(b.addition+b.hidden).eq(0).addClass(v.selected)},nextAvailable:function(e){var t=(e=e.eq(0)).nextAll(b.item).not(b.unselectable).eq(0),e=e.prevAll(b.item).not(b.unselectable).eq(0);(0").addClass("remove icon").insertAfter(z)),j.is.search()&&!j.has.search()&&(j.verbose("Adding search input"),e=y.prev("label"),x=ee("").addClass(v.search).prop("autocomplete",j.is.chrome()?"fomantic-search":"off"),0").attr("class",A.attr("class")).addClass(v.selection).addClass(v.dropdown).html(V.dropdown(e,l,p.preserveHTML,p.className)).insertBefore(A),A.hasClass(v.multiple)&&!1===A.prop("multiple")&&(j.error(c.missingMultiple),A.prop("multiple",!0)),A.is("[multiple]")&&j.set.multiple(),A.prop("disabled")&&(j.debug("Disabling dropdown"),y.addClass(v.disabled)),A.is("[required]")&&(p.forceSelection=!0),p.allowTab||A.removeAttr("tabindex"),A.prop("required",!1).removeAttr("class").detach().prependTo(y)),j.refresh()},menu:function(e){k.html(V.menu(e,l,p.preserveHTML,p.className)),D=k.find(b.item),q=p.hideDividers?D.parent().children(b.divider):ee()},reference:function(){j.debug("Dropdown behavior was called on select, replacing with closest dropdown"),y=y.parent(b.dropdown),I=y.data(d),E=y[0],j.refresh(),j.setup.returnedObject()},returnedObject:function(){var e=J.slice(0,F),t=J.slice(F+1);J=e.add(y).add(t)}},refresh:function(){j.refreshSelectors(),j.refreshData()},refreshItems:function(){D=k.find(b.item),q=p.hideDividers?D.parent().children(b.divider):ee()},refreshSelectors:function(){j.verbose("Refreshing selector cache"),C=y.find(b.text),x=y.find(b.search),A=y.find(b.input),z=y.find(b.icon),T=0)",i=new RegExp(e+"("+t.join(r+")(.*?)"+e+"(")+r+")",s),o=function(){return[].slice.call(arguments,1,2*t.length).map(function(e,t){return 1&t?e:""+e+""}).join("")},ee.each(a,function(e,t){var t=ee(t),n=j.get.choiceText(t,!0);p.ignoreDiacritics&&(n=n.normalize("NFD")),t.html(n.replace(i,o))}))),j.has.query()?!0===p.hideDividers?q.addClass(v.hidden):"empty"===p.hideDividers&&q.removeClass(v.hidden).filter(function(){var e=ee(this).nextUntil(b.item);return 0===(0"),ee.each(e,function(e,t){var n=p.templates.deQuote(t[l.value]),i=p.templates.escape(t[l.name]||"",p.preserveHTML);A.append('")}),j.observe.select())}},event:{paste:function(e){var t,n,i,o,a,r=(e.originalEvent.clipboardData||te.clipboardData).getData("text").split(p.delimiter),s=[];r.forEach(function(e){!1===j.set.selected(j.escape.htmlEntities(e.trim()),null,!1,!0)&&s.push(e.trim())}),e.preventDefault(),0 modified, recreating menu"),j.disconnect.selectObserver(),j.refresh(),j.setup.select(),j.set.selected(),j.observe.select())}},menu:{mutation:function(e){var e=e[0],t=e.addedNodes?ee(e.addedNodes[0]):ee(!1),e=ee(!!e.removedNodes&&e.removedNodes[0]),t=t.add(e),e=t.is(b.addition)||0=p.maxSelections?(j.debug("Maximum selection count reached"),p.useLabels&&(D.addClass(v.filtered),j.add.message(m.maxSelections)),!0):(j.verbose("No longer at maximum selection count"),j.remove.message(),j.remove.filteredItem(),j.is.searchSelection()&&j.filterItems(),!1))},disabled:function(){x.attr("tabindex",j.is.disabled()?-1:0)}},restore:{defaults:function(e){j.clear(e),j.restore.defaultText(),j.restore.defaultValue()},defaultText:function(){var e=j.get.defaultText();e===j.get.placeholderText?(j.debug("Restoring default placeholder text",e),j.set.placeholderText(e)):(j.debug("Restoring default text",e),j.set.text(e))},placeholderText:function(){j.set.placeholderText()},defaultValue:function(){var e=j.get.defaultValue();void 0!==e&&(j.debug("Restoring default value",e),""!==e?(j.set.value(e),j.set.selected()):(j.remove.activeItem(),j.remove.selectedItem()))},labels:function(){p.allowAdditions&&(p.useLabels||(j.error(c.labels),p.useLabels=!0),j.debug("Restoring selected values"),j.create.userLabels()),j.check.maxSelections()},selected:function(){j.restore.values(),j.is.multiple()?(j.debug("Restoring previously selected values and labels"),j.restore.labels()):j.debug("Restoring previously selected values")},values:function(){j.set.initialLoad(),p.apiSettings&&p.saveRemoteData&&j.get.remoteValues()?j.restore.remoteValues():j.set.selected();var e=j.get.value();!e||""===e||Array.isArray(e)&&0===e.length?A.addClass(v.noselection):A.removeClass(v.noselection),j.remove.initialLoad()},remoteValues:function(){var e=j.get.remoteValues();j.debug("Recreating selected from session data",e),e&&(j.is.single()?ee.each(e,function(e,t){j.set.text(t)}):p.useLabels&&ee.each(e,function(e,t){j.add.label(e,t)}))}},read:{remoteData:function(e){if(void 0!==te.Storage)return void 0!==(e=sessionStorage.getItem(e+i))&&e;j.error(c.noStorage)}},save:{defaults:function(){j.save.defaultText(),j.save.placeholderText(),j.save.defaultValue()},defaultValue:function(){var e=j.get.value();j.verbose("Saving default value as",e),y.data(h.defaultValue,e)},defaultText:function(){var e=j.get.text();j.verbose("Saving default text as",e),y.data(h.defaultText,e)},placeholderText:function(){var e;!1!==p.placeholder&&C.hasClass(v.placeholder)&&(e=j.get.text(),j.verbose("Saving placeholder text as",e),y.data(h.placeholderText,e))},remoteData:function(e,t){void 0===te.Storage?j.error(c.noStorage):(j.verbose("Saving remote data to session storage",t,e),sessionStorage.setItem(t+i,e))}},clear:function(e){j.is.multiple()&&p.useLabels?j.remove.labels(y.find(b.label),e):(j.remove.activeItem(),j.remove.selectedItem(),j.remove.filteredItem()),j.set.placeholderText(),j.clearValue(e)},clearValue:function(e){j.set.value("",null,null,e)},clearCache:function(){j.debug("Clearing API cache once"),L=!0},scrollPage:function(e,t){var t=t||j.get.selectedItem(),n=t.closest(b.menu),i=n.outerHeight(),o=n.scrollTop(),a=D.eq(0).outerHeight(),i=Math.floor(i/a),o="up"===e?o-a*i:o+a*i,a=D.not(b.unselectable),i="up"===e?a.index(t)-i:a.index(t)+i,i=("up"===e?0<=i:i").addClass(v.label).attr("data-"+h.value,a).html(V.label(a,t,p.preserveHTML,p.className)),i=p.onLabelCreate.call(i,a,t),j.has.label(e)?j.debug("User selection already exists, skipping",a):(p.label.variation&&i.addClass(p.label.variation),!0===n&&p.label.transition?(j.debug("Animating in label",i),i.addClass(v.hidden).insertBefore(o).transition({animation:p.label.transition,debug:p.debug,verbose:p.verbose,silent:p.silent,duration:p.label.duration})):(j.debug("Adding selection label",i),i.insertBefore(o)))},message:function(e){var t=k.children(b.message),e=p.templates.message(j.add.variables(e));0").html(e).addClass(v.message).appendTo(k)},optionValue:function(e){var t=j.escape.value(e);0").prop("value",t).addClass(v.addition).text(e).appendTo(A),j.verbose("Adding user addition as an
").addClass(h.menu).appendTo(w)},sizer:function(){S=ee("").addClass(h.sizer).insertAfter(x)}},search:function(e){e=void 0!==e?e:M.get.query(),M.verbose("Searching for query",e),!1===m.fireOnInit&&M.is.initialLoad()?M.verbose("Skipping callback on initial load",m.onSearch):M.has.minCharacters(e)&&!1!==m.onSearch.call(q,e)?M.filter(e):M.hide(null,!0)},select:{firstUnfiltered:function(){M.verbose("Selecting first non-filtered element"),M.remove.selectedItem(),L.not(b.unselectable).not(b.addition+b.hidden).eq(0).addClass(h.selected)},nextAvailable:function(e){var t=(e=e.eq(0)).nextAll(b.item).not(b.unselectable).eq(0),e=e.prevAll(b.item).not(b.unselectable).eq(0);0").addClass("remove icon").insertAfter(H)),M.is.search()&&!M.has.search()&&(M.verbose("Adding search input"),e=w.prev("label"),x=ee("").addClass(h.search).prop("autocomplete",M.is.chrome()?"fomantic-search":"off"),0").attr("class",A.attr("class")).addClass(h.selection).addClass(h.dropdown).html(N.dropdown(e,l,m.preserveHTML,m.className)).insertBefore(A),A.hasClass(h.multiple)&&!1===A.prop("multiple")&&(M.error(c.missingMultiple),A.prop("multiple",!0)),A.is("[multiple]")&&M.set.multiple(),A.prop("disabled")&&(M.debug("Disabling dropdown"),w.addClass(h.disabled)),A.is("[required]")&&(m.forceSelection=!0),m.allowTab||A.removeAttr("tabindex"),A.prop("required",!1).removeAttr("class").detach().prependTo(w)),M.refresh()},menu:function(e){k.html(N.menu(e,l,m.preserveHTML,m.className)),L=k.find(b.item),I=m.hideDividers?L.parent().children(b.divider):ee()},reference:function(){M.debug("Dropdown behavior was called on select, replacing with closest dropdown"),w=w.parent(b.dropdown),R=w.data(u),q=w[0],M.refresh(),M.setup.returnedObject()},returnedObject:function(){var e=Q.slice(0,z),t=Q.slice(z+1);Q=e.add(w).add(t)}},refresh:function(){M.refreshSelectors(),M.refreshData()},refreshItems:function(){L=k.find(b.item),I=m.hideDividers?L.parent().children(b.divider):ee()},refreshSelectors:function(){M.verbose("Refreshing selector cache"),C=w.find(b.text),x=w.find(b.search),A=w.find(b.input),H=w.find(b.icon),T=0"),ee.each(e,function(e,t){var n=m.templates.deQuote(t[l.value]),i=m.templates.escape(t[l.name]||"",m.preserveHTML);A.append('")}),M.observe.select())}},event:{paste:function(e){var t,n,i,a,o,s=(e.originalEvent.clipboardData||te.clipboardData).getData("text").split(m.delimiter),r=[];s.forEach(function(e){!1===M.set.selected(M.escape.htmlEntities(e.trim()),null,!1,!0)&&r.push(e.trim())}),e.preventDefault(),0 modified, recreating menu"),M.disconnect.selectObserver(),M.refresh(),M.setup.select(),M.set.selected(),M.observe.select())}},menu:{mutation:function(e){var e=e[0],t=e.addedNodes?ee(e.addedNodes[0]):ee(!1),e=e.removedNodes?ee(e.removedNodes[0]):ee(!1),t=t.add(e),e=t.is(b.addition)||0=m.maxSelections?(M.debug("Maximum selection count reached"),m.useLabels&&(L.addClass(h.filtered),M.add.message(f.maxSelections)),!0):(M.verbose("No longer at maximum selection count"),M.remove.message(),M.remove.filteredItem(),M.is.searchSelection()&&M.filterItems(),!1))},disabled:function(){x.attr("tabindex",M.is.disabled()?-1:0)}},restore:{defaults:function(e){M.clear(e),M.restore.defaultText(),M.restore.defaultValue()},defaultText:function(){var e=M.get.defaultText();e===M.get.placeholderText?(M.debug("Restoring default placeholder text",e),M.set.placeholderText(e)):(M.debug("Restoring default text",e),M.set.text(e))},placeholderText:function(){M.set.placeholderText()},defaultValue:function(){var e=M.get.defaultValue();void 0!==e&&(M.debug("Restoring default value",e),""!==e?(M.set.value(e),M.set.selected()):(M.remove.activeItem(),M.remove.selectedItem()))},labels:function(){m.allowAdditions&&(m.useLabels||(M.error(c.labels),m.useLabels=!0),M.debug("Restoring selected values"),M.create.userLabels()),M.check.maxSelections()},selected:function(){M.restore.values(),M.is.multiple()?(M.debug("Restoring previously selected values and labels"),M.restore.labels()):M.debug("Restoring previously selected values")},values:function(){M.set.initialLoad(),m.apiSettings&&m.saveRemoteData&&M.get.remoteValues()?M.restore.remoteValues():M.set.selected();var e=M.get.value();!e||""===e||Array.isArray(e)&&0===e.length?A.addClass(h.noselection):A.removeClass(h.noselection),M.remove.initialLoad()},remoteValues:function(){var e=M.get.remoteValues();M.debug("Recreating selected from session data",e),e&&(M.is.single()?ee.each(e,function(e,t){M.set.text(t)}):m.useLabels&&ee.each(e,function(e,t){M.add.label(e,t)}))}},read:{remoteData:function(e){if(void 0!==te.Storage)return void 0!==(e=sessionStorage.getItem(e+i))&&e;M.error(c.noStorage)}},save:{defaults:function(){M.save.defaultText(),M.save.placeholderText(),M.save.defaultValue()},defaultValue:function(){var e=M.get.value();M.verbose("Saving default value as",e),w.data(p.defaultValue,e)},defaultText:function(){var e=M.get.text();M.verbose("Saving default text as",e),w.data(p.defaultText,e)},placeholderText:function(){var e;!1!==m.placeholder&&C.hasClass(h.placeholder)&&(e=M.get.text(),M.verbose("Saving placeholder text as",e),w.data(p.placeholderText,e))},remoteData:function(e,t){void 0===te.Storage?M.error(c.noStorage):(M.verbose("Saving remote data to session storage",t,e),sessionStorage.setItem(t+i,e))}},clear:function(e){M.is.multiple()&&m.useLabels?M.remove.labels(w.find(b.label),e):(M.remove.activeItem(),M.remove.selectedItem(),M.remove.filteredItem()),M.set.placeholderText(),M.clearValue(e)},clearValue:function(e){M.set.value("",null,null,e)},clearCache:function(){M.debug("Clearing API cache once"),V=!0},scrollPage:function(e,t){var t=t||M.get.selectedItem(),n=t.closest(b.menu),i=n.outerHeight(),a=n.scrollTop(),o=L.eq(0).outerHeight(),i=Math.floor(i/o),a="up"===e?a-o*i:a+o*i,o=L.not(b.unselectable),i="up"===e?o.index(t)-i:o.index(t)+i,i=("up"===e?0<=i:i").addClass(h.label).attr("data-"+p.value,o).html(N.label(o,t,m.preserveHTML,m.className)),i=m.onLabelCreate.call(i,o,t),M.has.label(e)?M.debug("User selection already exists, skipping",o):(m.label.variation&&i.addClass(m.label.variation),!0===n&&m.label.transition?(M.debug("Animating in label",i),i.addClass(h.hidden).insertBefore(a).transition({animation:m.label.transition,debug:m.debug,verbose:m.verbose,silent:m.silent,duration:m.label.duration})):(M.debug("Adding selection label",i),i.insertBefore(a)))},message:function(e){var t=k.children(b.message),e=m.templates.message(M.add.variables(e));0").html(e).addClass(h.message).appendTo(k)},optionValue:function(e){var t=M.escape.value(e);0").prop("value",t).addClass(h.addition).text(e).appendTo(A),M.verbose("Adding user addition as an
    +
  1. Home
    2. +
  2. Search
    3. +
  3. Metadata
    4. +
  4. Assessment Report
    5. +
+ `; + this.el.querySelector(this.breadcrumbContainer).innerHTML = breadcrumbs; }, }, ); From ba5fdfea4274ebb0928671c5ec0cffe327ef35ef Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 28 Aug 2024 17:52:14 -0400 Subject: [PATCH 112/169] Render the check items outside MDQ template To make it easier to insert markdown view Issue #2394 --- src/js/templates/mdqRun.html | 420 ++++++++++------------------------- src/js/views/MdqRunView.js | 136 +++++++++++- 2 files changed, 241 insertions(+), 315 deletions(-) diff --git a/src/js/templates/mdqRun.html b/src/js/templates/mdqRun.html index eff1a3cd9..2a5923ee1 100644 --- a/src/js/templates/mdqRun.html +++ b/src/js/templates/mdqRun.html @@ -1,311 +1,117 @@
-<% if (typeof objectIdentifier === 'undefined') { %> -
-
- -
-
-
- -<% } %> - -
- -<% if (typeof groupedResults !== 'undefined') { %> - -
-
- -

Metadata Assessment Report

-

-
- -
-
- - -

- After running your metadata against our standard set of metadata, data, and congruency checks, - we have found the following potential issues. - Please assist us in improving the discoverability and reusability of your research data by addressing the issues below. -

-
- -
- -
- -
-

- Assessment suite: - -

+ <% if (typeof objectIdentifier === 'undefined') { %> +
+
+ +
+
+
+ <% } %> + +
+ <% if (typeof groupedResults !== 'undefined') { %> + +
+
+ +

Metadata Assessment Report

+

+
+ +
+
+

+ After running your metadata against our standard set of metadata, data, and congruency checks, + we have found the following potential issues. + Please assist us in improving the discoverability and reusability of your research data by addressing the issues below. +

+
+ +
+ +
+
+

+ Assessment suite: + +

- <% - var types = _.keys(groupedByType); - _.each(types, function(type) { - var results = groupedByType[type]; - var total = results.length; - var success = 0; - _.each(results, function(result) { - if (result.get("status") == "SUCCESS") { - success++; - } - }); - var width = (success/total) * 100; - width = width.toFixed(0); - - %> - <%=type%>: <%=width%>% complete -
-
- -
-
- <% }); %> -
-
- - <% - - var total = checkCount; - if (groupedResults.BLUE) { - total = total - groupedResults.BLUE.length; - } - - %> -
    - <% if (groupedResults.GREEN) { %> - - - - - - <% - _.each(groupedResults.GREEN, function(result) { - %> - -
  • - - - <% - _.each(result.get("output"), function(output) { - %> - <% if (output.type && output.type.includes('image')) { %> - - - <% } else { %> -
    <%- output.value %>
    - <% } %> - <% - }); - %> -     - - " - data-content="<%= result.get("check").description %>"> - - - - - <%= result.get("status") %> - <%= result.get("check").level %> - <%= result.get("check").type %> - -
    • - <% }); %> - <% } %> - - <% if (groupedResults.ORANGE) { %> - - <% - _.each(groupedResults.ORANGE, function(result) { - %> - -
  • - - - - - - - <% - _.each(result.get("output"), function(output) { - %> - <% if (output.type && output.type.includes('image')) { %> - - - <% } else { %> -
    <%- output.value %>
    - <% } %> - <% - }); - %> -     - - " - data-content="<%= result.get("check").description %>"> - - - - - <%= result.get("status") %> - <%= result.get("check").level %> - <%= result.get("check").type %> - -
    • - <% }); %> - <% } %> - - <% if (groupedResults.RED) { %> -
  • -

    - - - Failed <%=groupedResults.RED.length%> check<% if (groupedResults.RED.length != 1) {print('s')}%>. <% if (groupedResults.RED.length > 0) {print('Please correct these issues.')}%> -

    -
    • - - <% - _.each(groupedResults.RED, function(result) { - %> - -
  • - - - - - - <% - _.each(result.get("output"), function(output) { - %> - <% if (output.type && output.type.includes('image')) { %> - - - <% } else { %> -
    <%- output.value %>
    - <% } %> - <% - }); - %> -     - - " - data-content="<%= result.get("check").description %>"> - - - - - <%= result.get("status") %> - <%= result.get("check").level %> - <%= result.get("check").type %> - -
    • - <% }); %> - <% } %> - - <% if (groupedResults.BLUE) { %> - - - <% - _.each(groupedResults.BLUE, function(result) { - %> -
  • - - - - - - <% - _.each(result.get("output"), function(output) { - %> - <% if (output.type && output.type.includes('image')) { %> - - - <% } else { %> -
    <%- output.value %>
    - <% } %> - <% - }); - %> -     - - " - data-content="<%= result.get("check").description %>"> - - - - - <%= result.get("status") %> - <%= result.get("check").level %> - <%= result.get("check").type %> - -
    • - <% }); %> - <% } %> -
+ <% + var types = _.keys(groupedByType); + _.each(types, function(type) { + var results = groupedByType[type]; + var total = results.length; + var success = 0; + _.each(results, function(result) { + if (result.get("status") == "SUCCESS") { + success++; + } + }); + var width = (success/total) * 100; + width = width.toFixed(0); + %> + <%=type%>: <%=width%>% complete +
+
+
+ <% }); %> +
+ +
+ +
    + + + + + + + + + +
+
+ + <% } %>
- -
- -<% } %> -
-
+ \ No newline at end of file diff --git a/src/js/views/MdqRunView.js b/src/js/views/MdqRunView.js index b054ce1b5..e4cd37833 100644 --- a/src/js/views/MdqRunView.js +++ b/src/js/views/MdqRunView.js @@ -174,7 +174,7 @@ define([ */ renderQualityReport() { const viewRef = this; - const qualityReport = this.qualityReport; + const { qualityReport } = this; if (qualityReport.runStatus !== "success") { this.handleQualityReportError(); return; @@ -196,19 +196,41 @@ define([ const groupedResults = qualityReport.groupResults(qualityReport.models); const groupedByType = qualityReport.groupByType(qualityReport.models); + const checkCount = qualityReport.length; + const blueCount = groupedResults.BLUE?.length || 0; + const greenCount = groupedResults.GREEN?.length || 0; + const orangeCount = groupedResults.ORANGE?.length || 0; + const redCount = groupedResults.RED?.length || 0; + const extraRedText = + redCount > 0 ? " Please correct these issues." : ""; + const extraOrangeText = + orangeCount > 0 ? " Please review these warnings." : ""; + const totalPassable = checkCount - blueCount; + + const checkWord = (num) => (num === 1 ? "check" : "checks"); + const greenText = `Passed ${greenCount} ${checkWord(greenCount)} out of ${totalPassable} (excluding informational checks).`; + const orangeText = `Warning for ${orangeCount} ${checkWord(orangeCount)}. ${extraOrangeText}`; + const redText = `Failed ${redCount} ${checkWord(redCount)}. ${extraRedText}`; + const blueText = `${blueCount} informational ${checkWord(blueCount)}.`; + const data = { objectIdentifier: qualityReport.id, suiteId: viewRef.suiteId, suiteIdList: viewRef.suiteIdList, suiteLabels: viewRef.suiteLabels, - groupedResults, - groupedByType, timestamp: _.now(), id: viewRef.pid, - checkCount: qualityReport.length, + groupedResults, + groupedByType, + checkCount, + greenText, + orangeText, + redText, + blueText, }; viewRef.$el.html(viewRef.template(data)); + viewRef.addCheckItems(groupedResults); viewRef.insertBreadcrumbs(); viewRef.drawScoreChart(qualityReport.models, groupedResults); viewRef.showCitation(); @@ -216,11 +238,107 @@ define([ viewRef.$(".popover-this").popover(); }, + /** + * Add the check result item els to the view + * @param {object} groupedResults - The results grouped by status + * @since 0.0.0 + */ + addCheckItems(groupedResults) { + const viewRef = this; + + const types = { + GREEN: { + className: "pass", + iconClass: "icon-check-sign success", + headerClass: "success", + }, + ORANGE: { + className: "warn", + iconClass: "icon-exclamation", + headerClass: "warning", + }, + RED: { + className: "fail", + iconClass: "icon-remove", + headerClass: "danger", + }, + BLUE: { + className: "info-check", + iconClass: "icon-info", + headerClass: "info", + }, + }; + + Object.keys(types).forEach((type) => { + const { className, iconClass, headerClass } = types[type]; + const results = groupedResults[type]; + const itemEls = []; + if (results) { + results.forEach((result) => { + const checkItemHTML = viewRef.createCheckItem( + result, + className, + iconClass, + ); + itemEls.push(checkItemHTML); + }); + viewRef + .$(`.list-group-item.${headerClass}`) + .after(itemEls.join("")); + } + }); + }, + + /** + * Create a check item element + * @param {object} result - The check result + * @param {string} className - The class name for the check item + * @param {string} iconClass - The class + * @returns {string} The HTML for the check item + * @since 0.0.0 + */ + createCheckItem(result, className, iconClass) { + const outputs = result + .get("output") + .map((output) => + output.type && output.type.includes("image") + ? `` + : `
${output.value}
`, + ) + .join(""); + + return ` +
  • + + + + ${outputs} + + + + + + + ${result.get("status")} + ${result.get("check").level} + ${result.get("check").type} + +
    • + `; + }, + /** * Handles errors that occur when fetching the quality report */ handleQualityReportError() { - const qualityReport = this.qualityReport; + const { qualityReport } = this; const description = qualityReport.errorDescription || qualityReport.fetchResponse?.statusText || @@ -247,10 +365,12 @@ define([ } else if (qualityReport.fetchResponse.status === 404) { msgText = MSG_REPORT_NOT_READY; } else { - msgText = MSG_REPORT_NOT_READY; + msgText = MSG_ERROR_GENERAL; + if (errorReport) { + msgText += ` ${errorReport}`; + } } this.showMessage(msgText); - return; }, /** @@ -357,7 +477,7 @@ define([ /** * Draw a donut chart showing the distribution of checks by status * @param {Array} results - The array of check results - * @param {Object} groupedResults - The results grouped by status + * @param {object} groupedResults - The results grouped by status */ drawScoreChart(results, groupedResults) { const dataCount = results.length; From 07183b5ff70e85b952598619bd554f33bcbf096b Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 28 Aug 2024 18:34:09 -0400 Subject: [PATCH 113/169] Render text output as markdown in metadig view Issue #2394 --- src/js/views/MdqRunView.js | 78 +++++++++++++++++++++++++++----------- 1 file changed, 56 insertions(+), 22 deletions(-) diff --git a/src/js/views/MdqRunView.js b/src/js/views/MdqRunView.js index e4cd37833..43fc9a517 100644 --- a/src/js/views/MdqRunView.js +++ b/src/js/views/MdqRunView.js @@ -11,6 +11,7 @@ define([ "text!templates/mdqRun.html", "text!templates/loading-metrics.html", "collections/QualityReport", + "views/MarkdownView", ], ( $, _, @@ -22,6 +23,7 @@ define([ MdqRunTemplate, LoadingTemplate, QualityReport, + MarkdownView, ) => { const MSG_ERROR_GENERATING_REPORT = "There was an error generating the assessment report."; @@ -172,7 +174,7 @@ define([ /** * Render the quality report once it has been fetched */ - renderQualityReport() { + async renderQualityReport() { const viewRef = this; const { qualityReport } = this; if (qualityReport.runStatus !== "success") { @@ -230,7 +232,7 @@ define([ }; viewRef.$el.html(viewRef.template(data)); - viewRef.addCheckItems(groupedResults); + await viewRef.addCheckItems(groupedResults); viewRef.insertBreadcrumbs(); viewRef.drawScoreChart(qualityReport.models, groupedResults); viewRef.showCitation(); @@ -243,7 +245,7 @@ define([ * @param {object} groupedResults - The results grouped by status * @since 0.0.0 */ - addCheckItems(groupedResults) { + async addCheckItems(groupedResults) { const viewRef = this; const types = { @@ -269,24 +271,28 @@ define([ }, }; - Object.keys(types).forEach((type) => { + for (const type in types) { const { className, iconClass, headerClass } = types[type]; const results = groupedResults[type]; const itemEls = []; if (results) { - results.forEach((result) => { - const checkItemHTML = viewRef.createCheckItem( - result, - className, - iconClass, - ); - itemEls.push(checkItemHTML); - }); + // Use `map` to handle promises + const itemEls = await Promise.all( + results.map(async (result) => { + return await viewRef.createCheckItem( + result, + className, + iconClass, + ); + }), + ); + + // Join the resolved HTML strings and append them viewRef .$(`.list-group-item.${headerClass}`) .after(itemEls.join("")); } - }); + } }, /** @@ -297,15 +303,8 @@ define([ * @returns {string} The HTML for the check item * @since 0.0.0 */ - createCheckItem(result, className, iconClass) { - const outputs = result - .get("output") - .map((output) => - output.type && output.type.includes("image") - ? `` - : `
    ${output.value}
    `, - ) - .join(""); + async createCheckItem(result, className, iconClass) { + const outputs = await this.getOutputHTML(result.get("output")); return `
  • @@ -334,6 +333,41 @@ define([ `; }, + /** + * Get the HTML for the output + * @param {Array} outputs - The outputs from the quality service + * @returns {string} The HTML for the output + */ + async getOutputHTML(outputs) { + const outputHTMLs = await Promise.all(outputs.map(async (output) => { + if (output.type && output.type.includes("image")) { + return ``; + } else { + return await this.getHTMLFromMarkdown(output.value); + } + })); + + return outputHTMLs.join(""); + }, + + /** + * Get the HTML from markdown + * @param {string} markdown - The markdown to convert to HTML + * @returns {Promise} A promise that resolves with the HTML + */ + getHTMLFromMarkdown(markdown) { + const markdownView = new MarkdownView({ + markdown: markdown, + showTOC: false, + }).render(); + + return new Promise((resolve) => { + this.listenToOnce(markdownView, "mdRendered", () => { + resolve(markdownView.el.innerHTML); + }); + }); + }, + /** * Handles errors that occur when fetching the quality report */ From 0b838ef122fedc19ae6a136d04e34c0e8dc600d1 Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 29 Aug 2024 15:32:49 -0400 Subject: [PATCH 114/169] Fix linting errors in MdqRunView Issue #2394 --- src/js/views/MdqRunView.js | 38 +++++++++++++++++--------------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/js/views/MdqRunView.js b/src/js/views/MdqRunView.js index 43fc9a517..17b2b6c35 100644 --- a/src/js/views/MdqRunView.js +++ b/src/js/views/MdqRunView.js @@ -271,20 +271,15 @@ define([ }, }; - for (const type in types) { + Object.keys(types).forEach(async (type) => { const { className, iconClass, headerClass } = types[type]; const results = groupedResults[type]; - const itemEls = []; if (results) { // Use `map` to handle promises const itemEls = await Promise.all( - results.map(async (result) => { - return await viewRef.createCheckItem( - result, - className, - iconClass, - ); - }), + results.map(async (result) => + viewRef.createCheckItem(result, className, iconClass), + ), ); // Join the resolved HTML strings and append them @@ -292,7 +287,7 @@ define([ .$(`.list-group-item.${headerClass}`) .after(itemEls.join("")); } - } + }); }, /** @@ -339,17 +334,18 @@ define([ * @returns {string} The HTML for the output */ async getOutputHTML(outputs) { - const outputHTMLs = await Promise.all(outputs.map(async (output) => { - if (output.type && output.type.includes("image")) { - return ``; - } else { - return await this.getHTMLFromMarkdown(output.value); - } - })); - + const outputHTMLs = await Promise.all( + outputs.map(async (output) => { + if (output.type && output.type.includes("image")) { + return ``; + } + return this.getHTMLFromMarkdown(output.value); + }), + ); + return outputHTMLs.join(""); }, - + /** * Get the HTML from markdown * @param {string} markdown - The markdown to convert to HTML @@ -357,10 +353,10 @@ define([ */ getHTMLFromMarkdown(markdown) { const markdownView = new MarkdownView({ - markdown: markdown, + markdown, showTOC: false, }).render(); - + return new Promise((resolve) => { this.listenToOnce(markdownView, "mdRendered", () => { resolve(markdownView.el.innerHTML); From cf0bf0dfb1ec179b759bf4a992832c7d0dfef96a Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 29 Aug 2024 15:54:11 -0400 Subject: [PATCH 115/169] Use type to conditionally render md in MDQ view Issue #2394 --- src/js/views/MdqRunView.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/js/views/MdqRunView.js b/src/js/views/MdqRunView.js index 17b2b6c35..6442ca5ad 100644 --- a/src/js/views/MdqRunView.js +++ b/src/js/views/MdqRunView.js @@ -336,10 +336,13 @@ define([ async getOutputHTML(outputs) { const outputHTMLs = await Promise.all( outputs.map(async (output) => { - if (output.type && output.type.includes("image")) { + if (output?.type?.includes("image")) { return ``; } - return this.getHTMLFromMarkdown(output.value); + if (output.type === "markdown") { + return this.getHTMLFromMarkdown(output.value); + } + return `
    ${output.value}
    `; }), ); From 4937596dde0d697d3d921877be441d18a01feac1 Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 29 Aug 2024 15:55:07 -0400 Subject: [PATCH 116/169] Make MDQ error status non-case-sensitive e.g. Identify "success" or "SUCCESS" in MDQ view Issue #2394 --- src/js/views/MdqRunView.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/js/views/MdqRunView.js b/src/js/views/MdqRunView.js index 6442ca5ad..f25c5453d 100644 --- a/src/js/views/MdqRunView.js +++ b/src/js/views/MdqRunView.js @@ -177,7 +177,7 @@ define([ async renderQualityReport() { const viewRef = this; const { qualityReport } = this; - if (qualityReport.runStatus !== "success") { + if (qualityReport?.runStatus?.toUpperCase() !== "SUCCESS") { this.handleQualityReportError(); return; } @@ -372,6 +372,12 @@ define([ */ handleQualityReportError() { const { qualityReport } = this; + let status = + qualityReport.runStatus || qualityReport.fetchResponse?.status; + if (typeof status === "string") { + status = status.toUpperCase(); + } + const description = qualityReport.errorDescription || qualityReport.fetchResponse?.statusText || @@ -385,17 +391,17 @@ define([ let msgText = ""; - if (qualityReport.runStatus === "failure") { + if (status === "FAILURE") { msgText = `${MSG_ERROR_GENERATING_REPORT}`; if (errorReport) { msgText += ` ${errorReport}`; } - } else if (qualityReport.runStatus === "queued") { + } else if (status === "QUEUED") { msgText = `${MSG_QUEUED_REPORT} `; if (queueTime) { msgText += ` ${queueTime}`; } - } else if (qualityReport.fetchResponse.status === 404) { + } else if (status === 404) { msgText = MSG_REPORT_NOT_READY; } else { msgText = MSG_ERROR_GENERAL; From c690d7e63ce03ede42689f26df5bd4f5bc8851bb Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji Date: Thu, 29 Aug 2024 14:02:05 -0700 Subject: [PATCH 117/169] Fix eslint issues Ref #2483 --- src/js/views/DataCatalogView.js | 1279 +++++++++--------- src/js/views/DataPackageView.js | 397 +++--- src/js/views/DownloadButtonView.js | 92 +- src/js/views/MetadataIndexView.js | 321 +++-- src/js/views/MetadataView.js | 1985 +++++++++++++--------------- 5 files changed, 1975 insertions(+), 2099 deletions(-) diff --git a/src/js/views/DataCatalogView.js b/src/js/views/DataCatalogView.js index 9f5c7c078..00b15bab1 100644 --- a/src/js/views/DataCatalogView.js +++ b/src/js/views/DataCatalogView.js @@ -16,7 +16,7 @@ define([ "text!templates/loading.html", "gmaps", "nGeohash", -], function ( +], ( $, _, Backbone, @@ -34,18 +34,18 @@ define([ LoadingTemplate, gmaps, nGeohash, -) { +) => { "use strict"; /** * @class DataCatalogView * @classcategory Views - * @extends Backbone.View - * @constructor + * @augments Backbone.View + * @class * @deprecated * @description This view is deprecated and will eventually be removed in a future version (likely 3.0.0) */ - var DataCatalogView = Backbone.View.extend( + const DataCatalogView = Backbone.View.extend( /** @lends DataCatalogView.prototype */ { el: "#Content", @@ -55,7 +55,7 @@ define([ /** * If true, the view height will be adjusted to fit the height of the window * If false, the view height will be fixed via CSS - * @type {Boolean} + * @type {boolean} */ fixedHeight: false, @@ -156,13 +156,13 @@ define([ "mouseover .prevent-popover-runoff": "preventPopoverRunoff", }, - initialize: function (options) { - var view = this; + initialize(options) { + const view = this; // Get all the options and apply them to this view if (options) { - var optionKeys = Object.keys(options); - _.each(optionKeys, function (key, i) { + const optionKeys = Object.keys(options); + _.each(optionKeys, (key, i) => { view[key] = options[key]; }); } @@ -171,13 +171,13 @@ define([ // Render the main view and/or re-render subviews. Don't call .html() here // so we don't lose state, rather use .setElement(). Delegate rendering // and event handling to sub views - render: function () { + render() { // Use the global models if there are no other models specified at time of render if ( MetacatUI.appModel.get("searchHistory").length > 0 && (!this.searchModel || Object.keys(this.searchModel).length == 0) ) { - var lastSearchModels = _.last( + const lastSearchModels = _.last( MetacatUI.appModel.get("searchHistory"), ); @@ -243,12 +243,12 @@ define([ } // Populate the search template with some model attributes - var loadingHTML = this.loadingTemplate({ + const loadingHTML = this.loadingTemplate({ msg: "Retrieving member nodes...", }); - var templateVars = { - gmaps: gmaps, + const templateVars = { + gmaps, mode: MetacatUI.appModel.get("searchMode"), useMapBounds: this.searchModel.get("useGeohash"), username: MetacatUI.appUserModel.get("username"), @@ -263,16 +263,16 @@ define([ dataSourceTitle: MetacatUI.theme == "dataone" ? "Member Node" : "Data source", }; - var cel = this.template( + const cel = this.template( _.extend(this.searchModel.toJSON(), templateVars), ); this.$el.html(cel); - //Hide the filters that are disabled in the AppModel settings + // Hide the filters that are disabled in the AppModel settings _.each( this.$(".filter-contain[data-category]"), - function (filterEl) { + (filterEl) => { if ( !_.contains( MetacatUI.appModel.get("defaultSearchFilters"), @@ -296,18 +296,18 @@ define([ this.renderMap(); // Initialize the tooltips - var tooltips = $(".tooltip-this"); + const tooltips = $(".tooltip-this"); // Find the tooltips that are on filter labels - add a slight delay to those - var groupedTooltips = _.groupBy(tooltips, function (t) { - return ( + const groupedTooltips = _.groupBy( + tooltips, + (t) => ($(t).prop("tagName") == "LABEL" || $(t).parent().prop("tagName") == "LABEL") && - $(t).parents(".filter-container").length > 0 - ); - }); - var forFilterLabel = true, - forOtherElements = false; + $(t).parents(".filter-container").length > 0, + ); + const forFilterLabel = true; + const forOtherElements = false; $(groupedTooltips[forFilterLabel]).tooltip({ delay: { @@ -328,7 +328,7 @@ define([ this.toggleFilterCollapse(); // Iterate through each search model text attribute and show UI filter for each - var categories = [ + const categories = [ "all", "attribute", "creator", @@ -339,26 +339,26 @@ define([ "annotation", "isPrivate", ]; - var thisTerm = null; + let thisTerm = null; - for (var i = 0; i < categories.length; i++) { + for (let i = 0; i < categories.length; i++) { thisTerm = this.searchModel.get(categories[i]); if (thisTerm === undefined || thisTerm === null) break; - for (var x = 0; x < thisTerm.length; x++) { + for (let x = 0; x < thisTerm.length; x++) { this.showFilter(categories[i], thisTerm[x]); } } // List the Member Node filters - var view = this; + const view = this; _.each( _.contains( MetacatUI.appModel.get("defaultSearchFilters"), "dataSource", ), - function (source, i) { + (source, i) => { view.showFilter("dataSource", source); }, ); @@ -414,21 +414,21 @@ define([ /** * addAnnotationFilter - Add the annotation filter to the view */ - addAnnotationFilter: function () { + addAnnotationFilter() { if (MetacatUI.appModel.get("bioportalAPIKey")) { - var view = this; - var popoverTriggerSelector = + const view = this; + const popoverTriggerSelector = "[data-category='annotation'] .expand-collapse-control"; if (!this.$el.find(popoverTriggerSelector)) { return; } - var annotationFilter = new AnnotationFilter({ - popoverTriggerSelector: popoverTriggerSelector, + const annotationFilter = new AnnotationFilter({ + popoverTriggerSelector, }); this.$el.find(popoverTriggerSelector).append(annotationFilter.el); annotationFilter.render(); annotationFilter.off("annotationSelected"); - annotationFilter.on("annotationSelected", function (event, item) { + annotationFilter.on("annotationSelected", (event, item) => { $("#annotation_input").val(item.value); view.updateTextFilters(event, item); }); @@ -436,10 +436,10 @@ define([ }, // Linked Data Object for appending the jsonld into the browser DOM - getLinkedData: function () { + getLinkedData() { // Find the MN info from the CN Node list - var members = MetacatUI.nodeModel.get("members"); - for (var i = 0; i < members.length; i++) { + const members = MetacatUI.nodeModel.get("members"); + for (let i = 0; i < members.length; i++) { if ( members[i].identifier == MetacatUI.nodeModel.get("currentMemberNode") @@ -449,7 +449,7 @@ define([ } // JSON Linked Data Object - let elJSON = { + const elJSON = { "@context": { "@vocab": "http://schema.org/", }, @@ -458,7 +458,7 @@ define([ if (nodeModelObject) { // "keywords": "", // "provider": "", - let conditionalData = { + const conditionalData = { description: nodeModelObject.description, identifier: nodeModelObject.identifier, image: nodeModelObject.logo, @@ -471,22 +471,21 @@ define([ // Check if the jsonld already exists from the previous data view // If not create a new script tag and append otherwise replace the text for the script if (!document.getElementById("jsonld")) { - var el = document.createElement("script"); + const el = document.createElement("script"); el.type = "application/ld+json"; el.id = "jsonld"; el.text = JSON.stringify(elJSON); document.querySelector("head").appendChild(el); } else { - var script = document.getElementById("jsonld"); + const script = document.getElementById("jsonld"); script.text = JSON.stringify(elJSON); } - return; }, /* * Sets the height on elements in the main content area to fill up the entire area minus header and footer */ - setAutoHeight: function () { + setAutoHeight() { // If we are in list mode, don't determine the height of any elements because we are not "full screen" if ( MetacatUI.appModel.get("searchMode") == "list" || @@ -498,14 +497,14 @@ define([ // Get the heights of the header, navbar, and footer var otherHeight = 0; - $(".auto-height-member").each(function (i, el) { + $(".auto-height-member").each((i, el) => { if ($(el).css("display") != "none") { otherHeight += $(el).outerHeight(true); } }); // Get the remaining height left based on the window size - var remainingHeight = $(window).outerHeight(true) - otherHeight; + let remainingHeight = $(window).outerHeight(true) - otherHeight; if (remainingHeight < 0) remainingHeight = $(window).outerHeight(true) || 300; else if (remainingHeight <= 120) @@ -522,12 +521,12 @@ define([ var otherHeight = 0; $("#map-container.auto-height") .children() - .each(function (i, el) { + .each((i, el) => { if ($(el).attr("id") != "map-canvas") { otherHeight += $(el).outerHeight(true); } }); - var newMapHeight = remainingHeight - otherHeight; + const newMapHeight = remainingHeight - otherHeight; if (newMapHeight > 100) { $("#map-canvas").height(remainingHeight - otherHeight); } @@ -544,9 +543,9 @@ define([ * PERFORMING SEARCH * ================================================================================================== */ - triggerSearch: function () { + triggerSearch() { // Set the sort order - var sortOrder = $("#sortOrder").val(); + const sortOrder = $("#sortOrder").val(); if (sortOrder) { this.searchModel.set("sortOrder", sortOrder); } @@ -556,7 +555,7 @@ define([ if (!this.isSubView) { // make sure the browser knows where we are - var route = Backbone.history.fragment; + const route = Backbone.history.fragment; if (route.indexOf("data") < 0) { MetacatUI.uiRouter.navigate("data", { trigger: false, @@ -571,7 +570,7 @@ define([ return false; }, - triggerOnEnter: function (e) { + triggerOnEnter(e) { if (e.keyCode != 13) return; // Update the filters @@ -582,15 +581,15 @@ define([ * getResults gets all the current search filters from the searchModel, creates a Solr query, and runs that query. * @param {number} page - The page of search results to get results for */ - getResults: function (page) { + getResults(page) { // Set the sort order based on user choice - var sortOrder = this.searchModel.get("sortOrder"); + const sortOrder = this.searchModel.get("sortOrder"); if (sortOrder) { this.searchResults.setSort(sortOrder); } // Specify which fields to retrieve - var fields = ""; + let fields = ""; fields += "id,"; fields += "seriesId,"; fields += "title,"; @@ -621,13 +620,12 @@ define([ this.searchResults.setfields(fields); // Get the query - var query = this.searchModel.getQuery(); + const query = this.searchModel.getQuery(); // Specify which facets to retrieve if (gmaps && this.map) { // If we have Google Maps enabled - var geohashLevel = - "geohash_" + this.mapModel.determineGeohashLevel(this.map.zoom); + const geohashLevel = `geohash_${this.mapModel.determineGeohashLevel(this.map.zoom)}`; this.searchResults.facet.push(geohashLevel); } @@ -659,18 +657,18 @@ define([ * After the search results have been returned, * check if any of them are derived data or have derivations */ - checkForProv: function () { - var maps = [], - hasSources = [], - hasDerivations = [], - mainSearchResults = this.searchResults; + checkForProv() { + let maps = []; + let hasSources = []; + let hasDerivations = []; + const mainSearchResults = this.searchResults; // Get a list of all the resource map IDs from the SolrResults collection maps = this.searchResults.pluck("resourceMap"); maps = _.compact(_.flatten(maps)); // Create a new Search model with a search that finds all members of these packages/resource maps - var provSearchModel = new SearchModel({ + const provSearchModel = new SearchModel({ formatType: [ { value: "DATA", @@ -683,30 +681,25 @@ define([ }); // Create a new Solr Results model to store the results of this supplemental query - var provSearchResults = new SearchResults(null, { + const provSearchResults = new SearchResults(null, { query: provSearchModel.getQuery(), searchLogs: false, usePOST: true, rows: 150, - fields: provSearchModel.getProvFlList() + ",id,resourceMap", + fields: `${provSearchModel.getProvFlList()},id,resourceMap`, }); // Trigger a search on that Solr Results model - this.listenTo(provSearchResults, "reset", function (results) { + this.listenTo(provSearchResults, "reset", (results) => { if (results.models.length == 0) return; // See if any of the results have a value for a prov field - results.forEach(function (result) { + results.forEach((result) => { if (!result.getSources().length || !result.getDerivations()) return; - _.each(result.get("resourceMap"), function (rMapID) { + _.each(result.get("resourceMap"), (rMapID) => { if (_.contains(maps, rMapID)) { - var match = mainSearchResults.filter( - function (mainSearchResult) { - return _.contains( - mainSearchResult.get("resourceMap"), - rMapID, - ); - }, + const match = mainSearchResults.filter((mainSearchResult) => + _.contains(mainSearchResult.get("resourceMap"), rMapID), ); if (match && match.length && result.getSources().length > 0) hasSources.push(match[0].get("id")); @@ -722,16 +715,16 @@ define([ // If they do, find their corresponding result row here and add // the prov icon (or just change the class to active) - _.each(hasSources, function (metadataID) { - var metadataDoc = mainSearchResults.findWhere({ + _.each(hasSources, (metadataID) => { + const metadataDoc = mainSearchResults.findWhere({ id: metadataID, }); if (metadataDoc) { metadataDoc.set("prov_hasSources", true); } }); - _.each(hasDerivations, function (metadataID) { - var metadataDoc = mainSearchResults.findWhere({ + _.each(hasDerivations, (metadataID) => { + const metadataDoc = mainSearchResults.findWhere({ id: metadataID, }); if (metadataDoc) { @@ -742,7 +735,7 @@ define([ provSearchResults.toPage(0); }, - cacheSearch: function () { + cacheSearch() { MetacatUI.appModel.get("searchHistory").push({ search: this.searchModel.clone(), map: this.mapModel ? this.mapModel.clone() : null, @@ -755,15 +748,15 @@ define([ * FILTERS * ================================================================================================== */ - updateCheckboxFilter: function (e, category, value) { + updateCheckboxFilter(e, category, value) { if (!this.filters) return; - var checkbox = e.target; - var checked = $(checkbox).prop("checked"); + const checkbox = e.target; + const checked = $(checkbox).prop("checked"); - if (typeof category == "undefined") + if (typeof category === "undefined") var category = $(checkbox).attr("data-category"); - if (typeof value == "undefined") var value = $(checkbox).attr("value"); + if (typeof value === "undefined") var value = $(checkbox).attr("value"); // If the user just unchecked the box, then remove this filter if (!checked) { @@ -772,28 +765,28 @@ define([ } // If the user just checked the box, then add this filter else { - var currentValue = this.searchModel.get(category); + const currentValue = this.searchModel.get(category); // Get the description - var desc = + let desc = $(checkbox).attr("data-description") || $(checkbox).attr("title"); - if (typeof desc == "undefined" || !desc) desc = ""; + if (typeof desc === "undefined" || !desc) desc = ""; // Get the label - var labl = $(checkbox).attr("data-label"); - if (typeof labl == "undefined" || !labl) labl = ""; + let labl = $(checkbox).attr("data-label"); + if (typeof labl === "undefined" || !labl) labl = ""; // Make the filter object - var filter = { + const filter = { description: desc, label: labl, - value: value, + value, }; // If this filter category is an array, add this value to the array if (Array.isArray(currentValue)) { currentValue.push(filter); this.searchModel.set(category, currentValue); - this.searchModel.trigger("change:" + category); + this.searchModel.trigger(`change:${category}`); } else { // If it isn't an array, then just update the model with a simple value this.searchModel.set(category, filter); @@ -813,13 +806,13 @@ define([ this.triggerSearch(); }, - updateBooleanFilters: function (e) { + updateBooleanFilters(e) { if (!this.filters) return; // Get the category - var checkbox = e.target; - var category = $(checkbox).attr("data-category"); - var currentValue = this.searchModel.get(category); + const checkbox = e.target; + const category = $(checkbox).attr("data-category"); + const currentValue = this.searchModel.get(category); // If this filter is not enabled, exit this function if ( @@ -828,15 +821,16 @@ define([ return false; } - //The year filter is handled in a different way + // The year filter is handled in a different way if (category == "pubYear" || category == "dataYear") return; // If the checkbox has a value, then update as a string value not boolean - var value = $(checkbox).attr("value"); + let value = $(checkbox).attr("value"); if (value) { this.updateCheckboxFilter(e, category, value); return; - } else value = $(checkbox).prop("checked"); + } + value = $(checkbox).prop("checked"); this.searchModel.set(category, value); @@ -859,42 +853,42 @@ define([ this.triggerSearch(); // Track this event - MetacatUI.analytics?.trackEvent("search", "filter, " + category, value); + MetacatUI.analytics?.trackEvent("search", `filter, ${category}`, value); }, // Update the UI year slider and input values // Also update the model - updateYearRange: function (e) { + updateYearRange(e) { if (!this.filters) return; - var viewRef = this, - userAction = !(typeof e === "undefined"), - model = this.searchModel, - pubYearChecked = $("#publish_year").prop("checked"), - dataYearChecked = $("#data_year").prop("checked"); + const viewRef = this; + const userAction = !(typeof e === "undefined"); + const model = this.searchModel; + const pubYearChecked = $("#publish_year").prop("checked"); + const dataYearChecked = $("#data_year").prop("checked"); // If the year range slider has not been created yet if (!userAction && !$("#year-range").hasClass("ui-slider")) { var defaultMin = - typeof this.searchModel.defaults == "function" - ? this.searchModel.defaults().yearMin - : 1800, - defaultMax = - typeof this.searchModel.defaults == "function" - ? this.searchModel.defaults().yearMax - : new Date().getUTCFullYear(); - - //jQueryUI slider + typeof this.searchModel.defaults === "function" + ? this.searchModel.defaults().yearMin + : 1800; + var defaultMax = + typeof this.searchModel.defaults === "function" + ? this.searchModel.defaults().yearMax + : new Date().getUTCFullYear(); + + // jQueryUI slider $("#year-range").slider({ range: true, disabled: false, - min: defaultMin, //sets the minimum on the UI slider on initialization - max: defaultMax, //sets the maximum on the UI slider on initialization + min: defaultMin, // sets the minimum on the UI slider on initialization + max: defaultMax, // sets the maximum on the UI slider on initialization values: [ this.searchModel.get("yearMin"), this.searchModel.get("yearMax"), - ], //where the left and right slider handles are - stop: function (event, ui) { + ], // where the left and right slider handles are + stop(event, ui) { // When the slider is changed, update the input values $("#min_year").val(ui.values[0]); $("#max_year").val(ui.values[1]); @@ -921,7 +915,7 @@ define([ $("#publish_year").attr("data-category"), true, false, - ui.values[0] + " to " + ui.values[1], + `${ui.values[0]} to ${ui.values[1]}`, { replace: true, }, @@ -932,7 +926,7 @@ define([ $("#data_year").attr("data-category"), true, false, - ui.values[0] + " to " + ui.values[1], + `${ui.values[0]} to ${ui.values[1]}`, { replace: true, }, @@ -959,7 +953,7 @@ define([ }); return; } - var year = new Date( + const year = new Date( this.statsModel.get("firstBeginDate"), ).getUTCFullYear(); if (typeof year !== "undefined") { @@ -981,7 +975,7 @@ define([ "pubYear", true, false, - $("#min_year").val() + " to " + $("#max_year").val(), + `${$("#min_year").val()} to ${$("#max_year").val()}`, { replace: true, }, @@ -992,7 +986,7 @@ define([ "dataYear", true, false, - $("#min_year").val() + " to " + $("#max_year").val(), + `${$("#min_year").val()} to ${$("#max_year").val()}`, { replace: true, }, @@ -1011,7 +1005,7 @@ define([ }); return; } - var year = new Date( + const year = new Date( this.statsModel.get("lastEndDate"), ).getUTCFullYear(); if (typeof year !== "undefined") { @@ -1033,7 +1027,7 @@ define([ "pubYear", true, false, - $("#min_year").val() + " to " + $("#max_year").val(), + `${$("#min_year").val()} to ${$("#max_year").val()}`, { replace: true, }, @@ -1044,7 +1038,7 @@ define([ "dataYear", true, false, - $("#min_year").val() + " to " + $("#max_year").val(), + `${$("#min_year").val()} to ${$("#max_year").val()}`, { replace: true, }, @@ -1096,8 +1090,8 @@ define([ } // If either of the year inputs have changed or if just one of the year types were unchecked else { - var minVal = $("#min_year").val(); - var maxVal = $("#max_year").val(); + const minVal = $("#min_year").val(); + const maxVal = $("#max_year").val(); // Update the search model to match what is in the text inputs this.searchModel.set("yearMin", minVal); @@ -1118,7 +1112,7 @@ define([ $("#data_year").attr("data-category"), true, true, - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, { replace: true, }, @@ -1128,7 +1122,7 @@ define([ MetacatUI.analytics?.trackEvent( "search", "filter, Data Year", - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, ); } else { // Add the filter elements @@ -1137,7 +1131,7 @@ define([ $("#publish_year").attr("data-category"), true, true, - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, { replace: true, }, @@ -1147,7 +1141,7 @@ define([ MetacatUI.analytics?.trackEvent( "search", "filter, Publication Year", - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, ); } else { this.hideFilter($("#publish_year").attr("data-category"), true); @@ -1158,7 +1152,7 @@ define([ $("#data_year").attr("data-category"), true, true, - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, { replace: true, }, @@ -1168,7 +1162,7 @@ define([ MetacatUI.analytics?.trackEvent( "search", "filter, Data Year", - minVal + " to " + maxVal, + `${minVal} to ${maxVal}`, ); } else { this.hideFilter($("#data_year").attr("data-category"), true); @@ -1184,15 +1178,15 @@ define([ } }, - updateTextFilters: function (e, item) { + updateTextFilters(e, item) { if (!this.filters) return; // Get the search/filter category - var category = $(e.target).attr("data-category"); + let category = $(e.target).attr("data-category"); // Try the parent elements if not found if (!category) { - var parents = $(e.target) + const parents = $(e.target) .parents() .each(function () { category = $(this).attr("data-category"); @@ -1207,12 +1201,12 @@ define([ } // Get the input element - var input = this.$el.find("#" + category + "_input"); + const input = this.$el.find(`#${category}_input`); // Get the value of the associated input - var term = !item || !item.value ? input.val() : item.value; - var label = !item || !item.filterLabel ? null : item.filterLabel; - var filterDesc = !item || !item.desc ? null : item.desc; + const term = !item || !item.value ? input.val() : item.value; + const label = !item || !item.filterLabel ? null : item.filterLabel; + const filterDesc = !item || !item.desc ? null : item.desc; // Check that something was actually entered if (term == "" || term == " ") { @@ -1228,20 +1222,18 @@ define([ } // Get the current searchModel array for this category - var filtersArray = _.clone(this.searchModel.get(category)); + const filtersArray = _.clone(this.searchModel.get(category)); - if (typeof filtersArray == "undefined") { + if (typeof filtersArray === "undefined") { console.error( - "The filter category '" + - category + - "' does not exist in the Search model. Not sending this search term.", + `The filter category '${category}' does not exist in the Search model. Not sending this search term.`, ); return false; } // Check if this entry is a duplicate - var duplicate = (function () { - for (var i = 0; i < filtersArray.length; i++) { + const duplicate = (function () { + for (let i = 0; i < filtersArray.length; i++) { if (filtersArray[i].value === term) { return true; } @@ -1250,14 +1242,14 @@ define([ if (duplicate) { // Display a quick message - if ($("#duplicate-" + category + "-alert").length <= 0) { - $("#current-" + category + "-filters").prepend( + if ($(`#duplicate-${category}-alert`).length <= 0) { + $(`#current-${category}-filters`).prepend( "
    " + "You are already using that filter" + "
    ", ); - $("#duplicate-" + category + "-alert") + $(`#duplicate-${category}-alert`) .delay(2000) .fadeOut(500, function () { this.remove(); @@ -1268,10 +1260,10 @@ define([ } // Add the new entry to the array of current filters - var filter = { + const filter = { value: term, filterLabel: label, - label: label, + label, description: filterDesc, }; filtersArray.push(filter); @@ -1292,19 +1284,19 @@ define([ this.triggerSearch(); // Track this event - MetacatUI.analytics?.trackEvent("search", "filter, " + category, term); + MetacatUI.analytics?.trackEvent("search", `filter, ${category}`, term); }, // Removes a specific filter term from the searchModel - removeFilter: function (e) { + removeFilter(e) { // Get the parent element that stores the filter term - var filterNode = $(e.target).parent(); + const filterNode = $(e.target).parent(); // Find this filter's category and value - var category = - filterNode.attr("data-category") || - filterNode.parent().attr("data-category"), - value = $(filterNode).attr("data-term"); + const category = + filterNode.attr("data-category") || + filterNode.parent().attr("data-category"); + const value = $(filterNode).attr("data-term"); // Remove this filter from the searchModel this.searchModel.removeFromModel(category, value); @@ -1313,25 +1305,26 @@ define([ this.hideFilter(category, value); // If there is an associated checkbox with this filter, uncheck it - var assocCheckbox, - checkboxes = this.$( - "input[type='checkbox'][data-category='" + category + "']", - ); + let assocCheckbox; + const checkboxes = this.$( + `input[type='checkbox'][data-category='${category}']`, + ); - //If there are more than one checkboxes in this category, match by value + // If there are more than one checkboxes in this category, match by value if (checkboxes.length > 1) { - assocCheckbox = _.find(checkboxes, function (checkbox) { - return $(checkbox).val() == value; - }); + assocCheckbox = _.find( + checkboxes, + (checkbox) => $(checkbox).val() == value, + ); } - //If there is only one checkbox in this category, default to it + // If there is only one checkbox in this category, default to it else if (checkboxes.length == 1) { assocCheckbox = checkboxes[0]; } - //If there is an associated checkbox, uncheck it + // If there is an associated checkbox, uncheck it if (assocCheckbox) { - //Uncheck it + // Uncheck it $(assocCheckbox).prop("checked", false); } @@ -1343,8 +1336,8 @@ define([ }, // Clear all the currently applied filters - resetFilters: function () { - var viewRef = this; + resetFilters() { + const viewRef = this; this.allowSearch = true; @@ -1359,7 +1352,7 @@ define([ // Then reset the model this.searchModel.clear(); - //Reset the map model + // Reset the map model if (this.mapModel) { this.mapModel.clear(); } @@ -1369,7 +1362,7 @@ define([ this.searchModel.get("yearMin"), this.searchModel.get("yearMax"), ]); - //and the year inputs + // and the year inputs $("#min_year").val(this.searchModel.get("yearMin")); $("#max_year").val(this.searchModel.get("yearMax")); @@ -1394,32 +1387,30 @@ define([ this.triggerSearch(); }, - hideEl: function (element) { + hideEl(element) { // Fade out and remove the element - $(element).fadeOut("slow", function () { + $(element).fadeOut("slow", () => { $(element).remove(); }); }, // Removes a specified filter node from the DOM - hideFilter: function (category, value) { + hideFilter(category, value) { if (!this.filters) return; if (typeof value === "undefined") { var filterNode = this.$( - ".current-filters[data-category='" + category + "']", + `.current-filters[data-category='${category}']`, ).children(".current-filter"); } else { var filterNode = this.$( - ".current-filters[data-category='" + category + "']", - ).children("[data-term='" + value + "']"); + `.current-filters[data-category='${category}']`, + ).children(`[data-term='${value}']`); } // Try finding it a different way if (!filterNode || !filterNode.length) { - filterNode = this.$( - ".current-filter[data-category='" + category + "']", - ); + filterNode = this.$(`.current-filter[data-category='${category}']`); } // Remove the filter node from the DOM @@ -1427,29 +1418,21 @@ define([ }, // Adds a specified filter node to the DOM - showFilter: function ( - category, - term, - checkForDuplicates, - label, - options, - ) { + showFilter(category, term, checkForDuplicates, label, options) { if (!this.filters) return; - var viewRef = this; + const viewRef = this; if (typeof term === "undefined") return false; // Get the element to add the UI filter node to // The pattern is #current--filters - var filterContainer = this.$el.find( - "#current-" + category + "-filters", - ); + const filterContainer = this.$el.find(`#current-${category}-filters`); // Allow the option to only display this exact filter category and term once to the DOM // Helpful when adding a filter that is not stored in the search model (for display only) if (checkForDuplicates) { - var duplicate = false; + let duplicate = false; // Get the current terms from the DOM and check against the new term filterContainer.children().each(function () { @@ -1464,8 +1447,8 @@ define([ } } - var value = null, - desc = null; + let value = null; + let desc = null; // See if this filter is an object and extract the filter attributes if (typeof term === "object") { @@ -1496,7 +1479,7 @@ define([ desc = label; } - var categoryLabel = this.searchModel.fieldLabels[category]; + let categoryLabel = this.searchModel.fieldLabels[category]; if ( typeof categoryLabel === "undefined" && category == "additionalCriteria" @@ -1505,7 +1488,7 @@ define([ if (typeof categoryLabel === "undefined") categoryLabel = category; // Add a filter node to the DOM - var filterEl = viewRef.currentFilterTemplate({ + const filterEl = viewRef.currentFilterTemplate({ category: Utilities.encodeHTML(categoryLabel), value: Utilities.encodeHTML(value), label: Utilities.encodeHTML(label), @@ -1514,7 +1497,7 @@ define([ // Add the filter to the page - either replace or tack on if (options && options.replace) { - var currentFilter = filterContainer.find(".current-filter"); + const currentFilter = filterContainer.find(".current-filter"); if (currentFilter.length > 0) { currentFilter.replaceWith(filterEl); } else { @@ -1530,53 +1513,46 @@ define([ show: 800, }, }); - - return; }, /* * Get the member node list from the model and list the members in the filter list */ - listDataSources: function () { + listDataSources() { if (!this.filters) return; if (MetacatUI.nodeModel.get("members").length < 1) return; // Get the member nodes - var members = _.sortBy( - MetacatUI.nodeModel.get("members"), - function (m) { - if (m.name) { - return m.name.toLowerCase(); - } else { - return ""; - } - }, - ); - var filteredMembers = _.reject(members, function (m) { - return m.status != "operational"; + const members = _.sortBy(MetacatUI.nodeModel.get("members"), (m) => { + if (m.name) { + return m.name.toLowerCase(); + } + return ""; }); + const filteredMembers = _.reject( + members, + (m) => m.status != "operational", + ); // Get the current search filters for data source - var currentFilters = this.searchModel.get("dataSource"); + const currentFilters = this.searchModel.get("dataSource"); // Create an HTML list - var listMax = 4, - numHidden = filteredMembers.length - listMax, - list = $(document.createElement("ul")).addClass("checkbox-list"); + const listMax = 4; + const numHidden = filteredMembers.length - listMax; + const list = $(document.createElement("ul")).addClass("checkbox-list"); // Add a checkbox and label for each member node in the node model - _.each(filteredMembers, function (member, i) { - var listItem = document.createElement("li"), - input = document.createElement("input"), - label = document.createElement("label"); + _.each(filteredMembers, (member, i) => { + const listItem = document.createElement("li"); + const input = document.createElement("input"); + const label = document.createElement("label"); // If this member node is already a data source filter, then the checkbox is checked - var checked = _.findWhere(currentFilters, { + const checked = !!_.findWhere(currentFilters, { value: member.identifier, - }) - ? true - : false; + }); // Create a textual label for this data source $(label) @@ -1616,9 +1592,9 @@ define([ // Insert a "More" link after a certain amount to enable users to expand the list if (i == listMax) { - var moreLink = document.createElement("a"); + const moreLink = document.createElement("a"); $(moreLink) - .html("Show " + numHidden + " more") + .html(`Show ${numHidden} more`) .addClass("more-link pointer toggle-list") .append( $(document.createElement("i")).addClass("icon icon-expand-alt"), @@ -1632,7 +1608,7 @@ define([ }); if (numHidden > 0) { - var lessLink = document.createElement("a"); + const lessLink = document.createElement("a"); $(lessLink) .html("Collapse member nodes") .addClass("less-link toggle-list pointer hidden") @@ -1644,28 +1620,30 @@ define([ } // Add the list of checkboxes to the placeholder - var container = $(".member-nodes-placeholder"); + const container = $(".member-nodes-placeholder"); $(container).html(list); $(".tooltip-this").tooltip(); }, - resetDataSourceList: function () { + resetDataSourceList() { if (!this.filters) return; // Reset the Member Nodes checkboxes - var mnFilterContainer = $("#member-nodes-container"), - defaultMNs = this.searchModel.get("dataSource"); + const mnFilterContainer = $("#member-nodes-container"); + const defaultMNs = this.searchModel.get("dataSource"); // Make sure the member node filter exists if (!mnFilterContainer || mnFilterContainer.length == 0) return false; if (typeof defaultMNs === "undefined" || !defaultMNs) return false; // Reset each member node checkbox - var boxes = $(mnFilterContainer).find(".filter").prop("checked", false); + const boxes = $(mnFilterContainer) + .find(".filter") + .prop("checked", false); // Check the member node checkboxes that are defaults in the search model - _.each(defaultMNs, function (member, i) { - var value = null; + _.each(defaultMNs, (member, i) => { + let value = null; // Allow for string search model filter values and object filter values if (typeof member !== "object" && member) value = member; @@ -1674,20 +1652,20 @@ define([ else value = member.value; $(mnFilterContainer) - .find("checkbox[value='" + value + "']") + .find(`checkbox[value='${value}']`) .prop("checked", true); }); return true; }, - toggleList: function (e) { + toggleList(e) { if (!this.filters) return; - var link = e.target, - controls = $(link).parents("ul").find(".toggle-list"), - list = $(link).parents("ul"), - isHidden = !list.find(".more-link").is(".hidden"); + const link = e.target; + const controls = $(link).parents("ul").find(".toggle-list"); + const list = $(link).parents("ul"); + const isHidden = !list.find(".more-link").is(".hidden"); // Hide/Show the list if (isHidden) { @@ -1701,9 +1679,9 @@ define([ }, // add additional criteria to the search model based on link click - additionalCriteria: function (e) { + additionalCriteria(e) { // Get the clicked node - var targetNode = $(e.target); + const targetNode = $(e.target); // If this additional criteria is already applied, remove it if (targetNode.hasClass("active")) { @@ -1712,10 +1690,10 @@ define([ } // Get the filter criteria - var term = targetNode.attr("data-term"); + const term = targetNode.attr("data-term"); // Find this element's category in the data-category attribute - var category = targetNode.attr("data-category"); + const category = targetNode.attr("data-category"); // style the selection $(".keyword-search-link").removeClass("active"); @@ -1733,26 +1711,26 @@ define([ return false; }, - removeAdditionalCriteria: function (e) { + removeAdditionalCriteria(e) { // Get the clicked node - var targetNode = $(e.target); + const targetNode = $(e.target); // Reference to model - var model = this.searchModel; + const model = this.searchModel; // remove the styling $(".keyword-search-link").removeClass("active"); $(".keyword-search-link").parent().removeClass("active"); // Get the term - var term = targetNode.attr("data-term"); + const term = targetNode.attr("data-term"); // Get the current search model additional criteria - var current = this.searchModel.get("additionalCriteria"); + const current = this.searchModel.get("additionalCriteria"); // If this term is in the current search model (should be)... if (_.contains(current, term)) { - //then remove it - var newTerms = _.without(current, term); + // then remove it + const newTerms = _.without(current, term); model.set("additionalCriteria", newTerms); } @@ -1764,24 +1742,21 @@ define([ }, // Get the facet counts - getAutocompletes: function (e) { + getAutocompletes(e) { if (!e) return; // Get the text input to determine the filter type - var input = $(e.target), - category = input.attr("data-category"); + const input = $(e.target); + const category = input.attr("data-category"); if (!this.filters || !category) return; - var viewRef = this; + const viewRef = this; // Create the facet query by using our current search query - var facetQuery = - "q=" + - this.searchResults.currentquery + - "&rows=0" + - this.searchModel.getFacetQuery(category) + - "&wt=json&"; + const facetQuery = `q=${ + this.searchResults.currentquery + }&rows=0${this.searchModel.getFacetQuery(category)}&wt=json&`; // If we've cached these filter results, then use the cache instead of sending a new request if (!MetacatUI.appSearchModel.autocompleteCache) @@ -1795,25 +1770,25 @@ define([ } // Get the facet counts for the autocomplete - var requestSettings = { + const requestSettings = { url: MetacatUI.appModel.get("queryServiceUrl") + facetQuery, type: "GET", dataType: "json", - success: function (data, textStatus, xhr) { - var suggestions = [], - facetLimit = 999; + success(data, textStatus, xhr) { + let suggestions = []; + const facetLimit = 999; // Get all the facet counts - _.each(category.split(","), function (c) { - if (typeof c == "string") c = [c]; - _.each(c, function (thisCategory) { + _.each(category.split(","), (c) => { + if (typeof c === "string") c = [c]; + _.each(c, (thisCategory) => { // Get the field name(s) - var fieldNames = + let fieldNames = MetacatUI.appSearchModel.facetNameMap[thisCategory]; - if (typeof fieldNames == "string") fieldNames = [fieldNames]; + if (typeof fieldNames === "string") fieldNames = [fieldNames]; // Get the facet counts - _.each(fieldNames, function (fieldName) { + _.each(fieldNames, (fieldName) => { suggestions.push(data.facet_counts.facet_fields[fieldName]); }); }); @@ -1821,24 +1796,24 @@ define([ suggestions = _.flatten(suggestions); // Format the suggestions - var rankedSuggestions = new Array(); + const rankedSuggestions = new Array(); for ( - var i = 0; + let i = 0; i < Math.min(suggestions.length - 1, facetLimit); i += 2 ) { - //The label is the item value - var label = suggestions[i]; + // The label is the item value + let label = suggestions[i]; - //For all categories except the 'all' category, display the facet count + // For all categories except the 'all' category, display the facet count if (category != "all") { - label += " (" + suggestions[i + 1] + ")"; + label += ` (${suggestions[i + 1]})`; } - //Push the autocomplete item to the array + // Push the autocomplete item to the array rankedSuggestions.push({ value: suggestions[i], - label: label, + label, }); } @@ -1858,14 +1833,14 @@ define([ ); }, - setupAutocomplete: function (input, rankedSuggestions) { - var viewRef = this; + setupAutocomplete(input, rankedSuggestions) { + const viewRef = this; - //Override the _renderItem() function which renders a single autocomplete item. + // Override the _renderItem() function which renders a single autocomplete item. // We want to use the 'title' HTML attribute on each item. // This method must create a new
  • element, append it to the menu, and return it. $.widget("custom.autocomplete", $.ui.autocomplete, { - _renderItem: function (ul, item) { + _renderItem(ul, item) { return $(document.createElement("li")) .attr("title", item.label) .append(item.label) @@ -1873,25 +1848,23 @@ define([ }, }); input.autocomplete({ - source: function (request, response) { - var term = $.ui.autocomplete.escapeRegex(request.term), - startsWithMatcher = new RegExp("^" + term, "i"), - startsWith = $.grep(rankedSuggestions, function (value) { - return startsWithMatcher.test( - value.label || value.value || value, - ); - }), - containsMatcher = new RegExp(term, "i"), - contains = $.grep(rankedSuggestions, function (value) { - return ( - $.inArray(value, startsWith) < 0 && - containsMatcher.test(value.label || value.value || value) - ); - }); + source(request, response) { + const term = $.ui.autocomplete.escapeRegex(request.term); + const startsWithMatcher = new RegExp(`^${term}`, "i"); + const startsWith = $.grep(rankedSuggestions, (value) => + startsWithMatcher.test(value.label || value.value || value), + ); + const containsMatcher = new RegExp(term, "i"); + const contains = $.grep( + rankedSuggestions, + (value) => + $.inArray(value, startsWith) < 0 && + containsMatcher.test(value.label || value.value || value), + ); response(startsWith.concat(contains)); }, - select: function (event, ui) { + select(event, ui) { // set the text field input.val(ui.item.value); // add to the filter immediately @@ -1907,7 +1880,7 @@ define([ }); }, - hideClearButton: function () { + hideClearButton() { if (!this.filters) return; // Hide the current filters panel @@ -1918,7 +1891,7 @@ define([ this.setAutoHeight(); }, - showClearButton: function () { + showClearButton() { if (!this.filters) return; // Show the current filters panel @@ -1942,7 +1915,7 @@ define([ * ================================================================================================== */ // Update all the statistics throughout the page - updateStats: function () { + updateStats() { if (this.searchResults.header != null) { this.$statcounts = this.$("#statcounts"); this.$statcounts.html( @@ -1960,9 +1933,9 @@ define([ this.updatePager(); }, - updatePager: function () { + updatePager() { if (this.searchResults.header != null) { - var pageCount = Math.ceil( + const pageCount = Math.ceil( this.searchResults.header.get("numFound") / this.searchResults.header.get("rows"), ); @@ -1981,10 +1954,10 @@ define([ this.$("#resultspager").html(""); this.$(".resultspager").html(""); } else { - var pages = new Array(pageCount); + const pages = new Array(pageCount); // mark current page correctly, avoid NaN - var currentPage = -1; + let currentPage = -1; try { currentPage = Math.floor( (this.searchResults.header.get("start") / @@ -1992,39 +1965,39 @@ define([ pageCount, ); } catch (ex) { - console.log("Exception when calculating pages:" + ex.message); + console.log(`Exception when calculating pages:${ex.message}`); } // Populate the pagination element in the UI this.$(".resultspager").html( this.pagerTemplate({ - pages: pages, - currentPage: currentPage, + pages, + currentPage, }), ); this.$("#resultspager").html( this.pagerTemplate({ - pages: pages, - currentPage: currentPage, + pages, + currentPage, }), ); } } }, - updatePageNumber: function (page) { + updatePageNumber(page) { MetacatUI.appModel.set("page", page); if (!this.isSubView) { - var route = Backbone.history.fragment, - subroutePos = route.indexOf("/page/"), - newPage = parseInt(page) + 1; + let route = Backbone.history.fragment; + const subroutePos = route.indexOf("/page/"); + const newPage = parseInt(page) + 1; - //replace the last number with the new one + // replace the last number with the new one if (page > 0 && subroutePos > -1) { route = route.replace(/\d+$/, newPage); } else if (page > 0) { - route += "/page/" + newPage; + route += `/page/${newPage}`; } else if (subroutePos >= 0) { route = route.substring(0, subroutePos); } @@ -2034,35 +2007,35 @@ define([ }, // Next page of results - nextpage: function () { + nextpage() { this.loading(); this.searchResults.nextpage(); this.$resultsview.show(); this.updateStats(); - var page = MetacatUI.appModel.get("page"); + let page = MetacatUI.appModel.get("page"); page++; this.updatePageNumber(page); }, // Previous page of results - prevpage: function () { + prevpage() { this.loading(); this.searchResults.prevpage(); this.$resultsview.show(); this.updateStats(); - var page = MetacatUI.appModel.get("page"); + let page = MetacatUI.appModel.get("page"); page--; this.updatePageNumber(page); }, - navigateToPage: function (event) { - var page = $(event.target).attr("page"); + navigateToPage(event) { + const page = $(event.target).attr("page"); this.showPage(page); }, - showPage: function (page) { + showPage(page) { this.loading(); this.searchResults.toPage(page); this.$resultsview.show(); @@ -2076,7 +2049,7 @@ define([ * THE MAP * ================================================================================================== */ - renderMap: function () { + renderMap() { // If gmaps isn't enabled or loaded with an error, use list mode if (!gmaps || this.mode == "list") { this.ready = true; @@ -2092,8 +2065,8 @@ define([ // Get the map options and create the map gmaps.visualRefresh = true; - var mapOptions = this.mapModel.get("mapOptions"); - var defaultZoom = mapOptions.zoom; + const mapOptions = this.mapModel.get("mapOptions"); + const defaultZoom = mapOptions.zoom; $("#map-container").append("
    "); this.map = new gmaps.Map($("#map-canvas")[0], mapOptions); this.mapModel.set("map", this.map); @@ -2104,61 +2077,61 @@ define([ this.$(this.mapFilterToggle).hide(); // Store references - var mapRef = this.map; - var viewRef = this; + const mapRef = this.map; + const viewRef = this; - google.maps.event.addListener(mapRef, "zoom_changed", function () { + google.maps.event.addListener(mapRef, "zoom_changed", () => { // If the map is zoomed in further than the default zoom level, // than we want to mark the map as zoomed in if (viewRef.map.getZoom() > defaultZoom) { viewRef.hasZoomed = true; } - //If we are at the default zoom level or higher, than do not mark the map + // If we are at the default zoom level or higher, than do not mark the map // as zoomed in else { viewRef.hasZoomed = false; } }); - google.maps.event.addListener(mapRef, "dragend", function () { + google.maps.event.addListener(mapRef, "dragend", () => { viewRef.hasDragged = true; }); - google.maps.event.addListener(mapRef, "idle", function () { + google.maps.event.addListener(mapRef, "idle", () => { // Remove all markers from the map - for (var i = 0; i < viewRef.resultMarkers.length; i++) { + for (let i = 0; i < viewRef.resultMarkers.length; i++) { viewRef.resultMarkers[i].setMap(null); } viewRef.resultMarkers = new Array(); - //Check if the user has interacted with the map just now, and if so, we + // Check if the user has interacted with the map just now, and if so, we // want to alter the geohash filter (changing the geohash values or resetting it completely) - var alterGeohashFilter = + const alterGeohashFilter = viewRef.allowSearch || viewRef.hasZoomed || viewRef.hasDragged; if (!alterGeohashFilter) { return; } - //Determine if the map needs to be recentered. The map only needs to be + // Determine if the map needs to be recentered. The map only needs to be // recentered if it is not at the default lat,long center point AND it // is not zoomed in or dragged to a new center point - var setGeohashFilter = + const setGeohashFilter = viewRef.hasZoomed && viewRef.isMapFilterEnabled(); - //If we are using the geohash filter defined by this map, then + // If we are using the geohash filter defined by this map, then // apply the filter and trigger a new search if (setGeohashFilter) { viewRef.$(viewRef.mapFilterToggle).show(); // Get the Google map bounding box - var boundingBox = mapRef.getBounds(); + const boundingBox = mapRef.getBounds(); // Set the search model spatial filters // Encode the Google Map bounding box into geohash - var north = boundingBox.getNorthEast().lat(), - west = boundingBox.getSouthWest().lng(), - south = boundingBox.getSouthWest().lat(), - east = boundingBox.getNorthEast().lng(); + const north = boundingBox.getNorthEast().lat(); + const west = boundingBox.getSouthWest().lng(); + const south = boundingBox.getSouthWest().lat(); + const east = boundingBox.getNorthEast().lng(); viewRef.searchModel.set("north", north); viewRef.searchModel.set("west", west); @@ -2170,12 +2143,12 @@ define([ viewRef.mapModel.get("mapOptions").zoom = mapRef.getZoom(); // Determine the precision of geohashes to search for - var zoom = mapRef.getZoom(); + const zoom = mapRef.getZoom(); - var precision = viewRef.mapModel.getSearchPrecision(zoom); + const precision = viewRef.mapModel.getSearchPrecision(zoom); // Get all the geohash tiles contained in the map bounds - var geohashBBoxes = nGeohash.bboxes( + const geohashBBoxes = nGeohash.bboxes( south, west, north, @@ -2187,10 +2160,10 @@ define([ viewRef.searchModel.set("geohashes", geohashBBoxes); viewRef.searchModel.set("geohashLevel", precision); - //Start back at page 0 + // Start back at page 0 MetacatUI.appModel.set("page", 0); - //Mark the view as ready to start a search + // Mark the view as ready to start a search viewRef.ready = true; // Trigger a new search @@ -2198,37 +2171,35 @@ define([ viewRef.allowSearch = false; } else { - //Reset the map filter + // Reset the map filter viewRef.resetMap(); - //Start back at page 0 + // Start back at page 0 MetacatUI.appModel.set("page", 0); - //Mark the view as ready to start a search + // Mark the view as ready to start a search viewRef.ready = true; // Trigger a new search viewRef.triggerSearch(); viewRef.allowSearch = false; - - return; } }); }, // Resets the model and view settings related to the map - resetMap: function () { + resetMap() { if (!gmaps) { return; } // First reset the model // The categories pertaining to the map - var categories = ["east", "west", "north", "south"]; + const categories = ["east", "west", "north", "south"]; // Loop through each and remove the filters from the model - for (var i = 0; i < categories.length; i++) { + for (let i = 0; i < categories.length; i++) { this.searchModel.set(categories[i], null); } @@ -2239,18 +2210,18 @@ define([ this.allowSearch = false; }, - isMapFilterEnabled: function () { - var toggleInput = this.$("input" + this.mapFilterToggle); + isMapFilterEnabled() { + const toggleInput = this.$(`input${this.mapFilterToggle}`); if (typeof toggleInput === "undefined" || !toggleInput) return; return $(toggleInput).prop("checked"); }, - toggleMapFilter: function (e, a) { - var toggleInput = this.$("input" + this.mapFilterToggle); + toggleMapFilter(e, a) { + const toggleInput = this.$(`input${this.mapFilterToggle}`); if (typeof toggleInput === "undefined" || !toggleInput) return; - var isOn = $(toggleInput).prop("checked"); + let isOn = $(toggleInput).prop("checked"); // If the user clicked on the label, then change the checkbox for them if (e.target.tagName != "INPUT") { @@ -2265,25 +2236,25 @@ define([ }, /** - * Show the marker, infoWindow, and bounding coordinates polygon on + * Show the marker, infoWindow, and bounding coordinates polygon on the map when the user hovers on the marker icon in the result list - * @param {Event} e - */ - showResultOnMap: function (e) { + * @param {Event} e + */ + showResultOnMap(e) { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Get the attributes about this dataset - var resultRow = e.target, - id = $(resultRow).attr("data-id"); + let resultRow = e.target; + let id = $(resultRow).attr("data-id"); // The mouseover event might be triggered by a nested element, so loop through the parents to find the id - if (typeof id == "undefined") { + if (typeof id === "undefined") { $(resultRow) .parents() .each(function () { - if (typeof $(this).attr("data-id") != "undefined") { + if (typeof $(this).attr("data-id") !== "undefined") { id = $(this).attr("data-id"); resultRow = this; } @@ -2291,24 +2262,25 @@ define([ } // Find the tile for this data set and highlight it on the map - var resultGeohashes = this.searchResults + const resultGeohashes = this.searchResults .findWhere({ - id: id, + id, }) .get("geohash_9"); - for (var i = 0; i < resultGeohashes.length; i++) { - var thisGeohash = resultGeohashes[i], - latLong = nGeohash.decode(thisGeohash), - position = new google.maps.LatLng( - latLong.latitude, - latLong.longitude, - ), - containingTileGeohash = _.find(this.tileGeohashes, function (g) { - return thisGeohash.indexOf(g) == 0; - }), - containingTile = _.findWhere(this.tiles, { - geohash: containingTileGeohash, - }); + for (let i = 0; i < resultGeohashes.length; i++) { + var thisGeohash = resultGeohashes[i]; + const latLong = nGeohash.decode(thisGeohash); + const position = new google.maps.LatLng( + latLong.latitude, + latLong.longitude, + ); + const containingTileGeohash = _.find( + this.tileGeohashes, + (g) => thisGeohash.indexOf(g) == 0, + ); + const containingTile = _.findWhere(this.tiles, { + geohash: containingTileGeohash, + }); // If this is a geohash for a georegion outside the map, do not highlight a tile or display a marker if (typeof containingTile === "undefined") continue; @@ -2316,40 +2288,40 @@ define([ this.highlightTile(containingTile); // Set up the options for each marker - var markerOptions = { - position: position, + const markerOptions = { + position, icon: this.mapModel.get("markerImage"), zIndex: 99999, map: this.map, }; // Create the marker and add to the map - var marker = new google.maps.Marker(markerOptions); + const marker = new google.maps.Marker(markerOptions); this.resultMarkers.push(marker); } }, /** - * Hide the marker, infoWindow, and bounding coordinates polygon on + * Hide the marker, infoWindow, and bounding coordinates polygon on the map when the user stops hovering on the marker icon in the result list - * @param {Event} e - The event that brought us to this function - */ - hideResultOnMap: function (e) { + * @param {Event} e - The event that brought us to this function + */ + hideResultOnMap(e) { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Get the attributes about this dataset - var resultRow = e.target, - id = $(resultRow).attr("data-id"); + let resultRow = e.target; + let id = $(resultRow).attr("data-id"); // The mouseover event might be triggered by a nested element, so loop through the parents to find the id - if (typeof id == "undefined") { + if (typeof id === "undefined") { $(e.target) .parents() .each(function () { - if (typeof $(this).attr("data-id") != "undefined") { + if (typeof $(this).attr("data-id") !== "undefined") { id = $(this).attr("data-id"); resultRow = this; } @@ -2357,19 +2329,20 @@ define([ } // Get the map tile for this result and un-highlight it - var resultGeohashes = this.searchResults + const resultGeohashes = this.searchResults .findWhere({ - id: id, + id, }) .get("geohash_9"); - for (var i = 0; i < resultGeohashes.length; i++) { - var thisGeohash = resultGeohashes[i], - containingTileGeohash = _.find(this.tileGeohashes, function (g) { - return thisGeohash.indexOf(g) == 0; - }), - containingTile = _.findWhere(this.tiles, { - geohash: containingTileGeohash, - }); + for (let i = 0; i < resultGeohashes.length; i++) { + var thisGeohash = resultGeohashes[i]; + const containingTileGeohash = _.find( + this.tileGeohashes, + (g) => thisGeohash.indexOf(g) == 0, + ); + const containingTile = _.findWhere(this.tiles, { + geohash: containingTileGeohash, + }); // If this is a geohash for a georegion outside the map, do not unhighlight a tile if (typeof containingTile === "undefined") continue; @@ -2379,7 +2352,7 @@ define([ } // Remove all markers from the map - _.each(this.resultMarkers, function (marker) { + _.each(this.resultMarkers, (marker) => { marker.setMap(null); }); this.resultMarkers = new Array(); @@ -2387,8 +2360,8 @@ define([ /** * Create a tile for each geohash facet. A separate tile label is added to the map with the count of the facet. - **/ - drawTiles: function () { + */ + drawTiles() { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; @@ -2396,6 +2369,10 @@ define([ TextOverlay.prototype = new google.maps.OverlayView(); + /** + * + * @param options + */ function TextOverlay(options) { // Now initialize all properties. this.bounds_ = options.bounds; @@ -2403,7 +2380,7 @@ define([ this.text = options.text; this.color = options.color; - var length = options.text.toString().length; + const { length } = options.text.toString(); if (length == 1) this.width = 8; else if (length == 2) this.width = 17; else if (length == 3) this.width = 25; @@ -2421,7 +2398,7 @@ define([ TextOverlay.prototype.onAdd = function () { // Create the DIV and set some basic attributes. - var div = document.createElement("div"); + const div = document.createElement("div"); div.style.color = this.color; div.style.fontSize = "15px"; div.style.position = "absolute"; @@ -2436,7 +2413,7 @@ define([ // We add an overlay to a map via one of the map's panes. // We'll add this overlay to the overlayLayer pane. - var panes = this.getPanes(); + const panes = this.getPanes(); panes.overlayLayer.appendChild(div); }; @@ -2444,28 +2421,28 @@ define([ // Size and position the overlay. We use a southwest and northeast // position of the overlay to peg it to the correct position and size. // We need to retrieve the projection from this overlay to do this. - var overlayProjection = this.getProjection(); + const overlayProjection = this.getProjection(); // Retrieve the southwest and northeast coordinates of this overlay // in latlngs and convert them to pixels coordinates. // We'll use these coordinates to resize the DIV. - var sw = overlayProjection.fromLatLngToDivPixel( + const sw = overlayProjection.fromLatLngToDivPixel( this.bounds_.getSouthWest(), ); - var ne = overlayProjection.fromLatLngToDivPixel( + const ne = overlayProjection.fromLatLngToDivPixel( this.bounds_.getNorthEast(), ); // Resize the image's DIV to fit the indicated dimensions. - var div = this.div_; - var width = this.width; - var height = 20; - - div.style.left = sw.x - width / 2 + "px"; - div.style.top = ne.y - height / 2 + "px"; - div.style.width = width + "px"; - div.style.height = height + "px"; - div.style.width = width + "px"; - div.style.height = height + "px"; + const div = this.div_; + const { width } = this; + const height = 20; + + div.style.left = `${sw.x - width / 2}px`; + div.style.top = `${ne.y - height / 2}px`; + div.style.width = `${width}px`; + div.style.height = `${height}px`; + div.style.width = `${width}px`; + div.style.height = `${height}px`; }; TextOverlay.prototype.onRemove = function () { @@ -2474,16 +2451,17 @@ define([ }; // Determine the geohash level we will use to draw tiles - var currentZoom = this.map.getZoom(), - geohashLevelNum = this.mapModel.determineGeohashLevel(currentZoom), - geohashLevel = "geohash_" + geohashLevelNum, - geohashes = this.searchResults.facetCounts[geohashLevel]; + const currentZoom = this.map.getZoom(); + const geohashLevelNum = + this.mapModel.determineGeohashLevel(currentZoom); + const geohashLevel = `geohash_${geohashLevelNum}`; + const geohashes = this.searchResults.facetCounts[geohashLevel]; // Save the current geohash level in the map model this.mapModel.set("tileGeohashLevel", geohashLevelNum); // Get all the geohashes contained in the map - var mapBBoxes = _.flatten( + const mapBBoxes = _.flatten( _.values(this.searchModel.get("geohashGroups")), ); @@ -2495,10 +2473,10 @@ define([ var filteredTileGeohashes = []; for (var i = 0; i < geohashes.length - 1; i += 2) { // Get the geohash for this tile - var tileGeohash = geohashes[i], - isInsideMap = false, - index = 0, - searchString = tileGeohash; + var tileGeohash = geohashes[i]; + let isInsideMap = false; + let index = 0; + let searchString = tileGeohash; // Find if any of the bounding boxes/geohashes inside our map contain this tile geohash while (!isInsideMap && searchString.length > 0) { @@ -2517,59 +2495,56 @@ define([ } } - //If there are no tiles on the page, the map may have failed to render, so exit. + // If there are no tiles on the page, the map may have failed to render, so exit. if ( - typeof filteredTileGeohashes == "undefined" || + typeof filteredTileGeohashes === "undefined" || !filteredTileGeohashes.length ) { return; } // Make a copy of the array that is geohash counts only - var countsOnly = []; + const countsOnly = []; for (var i = 1; i < filteredTileGeohashes.length; i += 2) { countsOnly.push(filteredTileGeohashes[i]); } // Create a range of lightness to make different colors on the tiles - var lightnessMin = this.mapModel.get("tileLightnessMin"), - lightnessMax = this.mapModel.get("tileLightnessMax"), - lightnessRange = lightnessMax - lightnessMin; + const lightnessMin = this.mapModel.get("tileLightnessMin"); + const lightnessMax = this.mapModel.get("tileLightnessMax"); + const lightnessRange = lightnessMax - lightnessMin; // Get some stats on our tile counts so we can normalize them to create a color scale - var findMedian = function (nums) { + const findMedian = function (nums) { if (nums.length % 2 == 0) { return (nums[nums.length / 2 - 1] + nums[nums.length / 2]) / 2; - } else { - return nums[nums.length / 2 - 0.5]; } + return nums[nums.length / 2 - 0.5]; }; - var sortedCounts = countsOnly.sort(function (a, b) { - return a - b; - }), - maxCount = sortedCounts[sortedCounts.length - 1], - minCount = sortedCounts[0]; + const sortedCounts = countsOnly.sort((a, b) => a - b); + const maxCount = sortedCounts[sortedCounts.length - 1]; + const minCount = sortedCounts[0]; - var viewRef = this; + const viewRef = this; // Now draw a tile for each geohash facet for (var i = 0; i < filteredTileGeohashes.length - 1; i += 2) { // Convert this geohash to lat,long values - var tileGeohash = filteredTileGeohashes[i], - decodedGeohash = nGeohash.decode(tileGeohash), - latLngCenter = new google.maps.LatLng( - decodedGeohash.latitude, - decodedGeohash.longitude, - ), - geohashBox = nGeohash.decode_bbox(tileGeohash), - swLatLng = new google.maps.LatLng(geohashBox[0], geohashBox[1]), - neLatLng = new google.maps.LatLng(geohashBox[2], geohashBox[3]), - bounds = new google.maps.LatLngBounds(swLatLng, neLatLng), - tileCount = filteredTileGeohashes[i + 1], - drawMarkers = this.mapModel.get("drawMarkers"), - marker, - count, - color; + var tileGeohash = filteredTileGeohashes[i]; + const decodedGeohash = nGeohash.decode(tileGeohash); + const latLngCenter = new google.maps.LatLng( + decodedGeohash.latitude, + decodedGeohash.longitude, + ); + const geohashBox = nGeohash.decode_bbox(tileGeohash); + const swLatLng = new google.maps.LatLng(geohashBox[0], geohashBox[1]); + const neLatLng = new google.maps.LatLng(geohashBox[2], geohashBox[3]); + const bounds = new google.maps.LatLngBounds(swLatLng, neLatLng); + const tileCount = filteredTileGeohashes[i + 1]; + const drawMarkers = this.mapModel.get("drawMarkers"); + var marker; + var count; + var color; // Normalize the range of tiles counts and convert them to a lightness domain of 20-70% lightness. if (maxCount - minCount == 0) { @@ -2581,11 +2556,10 @@ define([ lightnessMin; } - var color = - "hsl(" + this.mapModel.get("tileHue") + "," + lightness + "%,50%)"; + var color = `hsl(${this.mapModel.get("tileHue")},${lightness}%,50%)`; // Add the count to the tile - var countLocation = new google.maps.LatLngBounds( + const countLocation = new google.maps.LatLngBounds( latLngCenter, latLngCenter, ); @@ -2599,22 +2573,22 @@ define([ }); // Set up the default tile options - var tileOptions = { + const tileOptions = { fillColor: color, strokeColor: color, map: this.map, visible: true, - bounds: bounds, + bounds, }; // Merge these options with any tile options set in the map model - var modelTileOptions = this.mapModel.get("tileOptions"); - for (var attr in modelTileOptions) { + const modelTileOptions = this.mapModel.get("tileOptions"); + for (const attr in modelTileOptions) { tileOptions[attr] = modelTileOptions[attr]; } // Draw this tile - var tile = this.drawTile(tileOptions, tileGeohash, count); + const tile = this.drawTile(tileOptions, tileGeohash, count); // Save the geohashes for tiles in the view for later this.tileGeohashes.push(tileGeohash); @@ -2632,47 +2606,51 @@ define([ * @param {object} options * @param {string} geohash * @param {string} label - **/ - drawTile: function (options, geohash, label) { + */ + drawTile(options, geohash, label) { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Add the tile for these datasets to the map - var tile = new google.maps.Rectangle(options); + const tile = new google.maps.Rectangle(options); - var viewRef = this; + const viewRef = this; // Save our tiles in the view - var tileObject = { + const tileObject = { text: label, shape: tile, - geohash: geohash, - options: options, + geohash, + options, }; this.tiles.push(tileObject); // Change styles when the tile is hovered on - google.maps.event.addListener(tile, "mouseover", function (event) { + google.maps.event.addListener(tile, "mouseover", (event) => { viewRef.highlightTile(tileObject); }); // Change the styles back after the tile is hovered on - google.maps.event.addListener(tile, "mouseout", function (event) { + google.maps.event.addListener(tile, "mouseout", (event) => { viewRef.unhighlightTile(tileObject); }); // If we are at the max zoom, we will display an info window. If not, we will zoom in. if (!this.mapModel.isMaxZoom(viewRef.map)) { - /** Set up some helper functions for zooming in on the map **/ - var myFitBounds = function (myMap, bounds) { + /** + * Set up some helper functions for zooming in on the map + * @param myMap + * @param bounds + */ + const myFitBounds = function (myMap, bounds) { myMap.fitBounds(bounds); // calling fitBounds() here to center the map for the bounds - var overlayHelper = new google.maps.OverlayView(); + const overlayHelper = new google.maps.OverlayView(); overlayHelper.draw = function () { if (!this.ready) { - var extraZoom = getExtraZoom( + const extraZoom = getExtraZoom( this.getProjection(), bounds, myMap.getBounds(), @@ -2692,11 +2670,11 @@ define([ actualBounds, ) { // in: LatLngBounds bounds -> out: height and width as a Point - var getSizeInPixels = function (bounds) { - var sw = projection.fromLatLngToContainerPixel( + const getSizeInPixels = function (bounds) { + const sw = projection.fromLatLngToContainerPixel( bounds.getSouthWest(), ); - var ne = projection.fromLatLngToContainerPixel( + const ne = projection.fromLatLngToContainerPixel( bounds.getNorthEast(), ); return new google.maps.Point( @@ -2705,8 +2683,8 @@ define([ ); }; - var expectedSize = getSizeInPixels(expectedBounds), - actualSize = getSizeInPixels(actualBounds); + const expectedSize = getSizeInPixels(expectedBounds); + const actualSize = getSizeInPixels(actualBounds); if ( Math.floor(expectedSize.x) == 0 || @@ -2715,9 +2693,9 @@ define([ return 0; } - var qx = actualSize.x / expectedSize.x; - var qy = actualSize.y / expectedSize.y; - var min = Math.min(qx, qy); + const qx = actualSize.x / expectedSize.x; + const qy = actualSize.y / expectedSize.y; + const min = Math.min(qx, qy); if (min < 1) { return 0; @@ -2727,24 +2705,24 @@ define([ }; // Zoom in when the tile is clicked on - gmaps.event.addListener(tile, "click", function (clickEvent) { + gmaps.event.addListener(tile, "click", (clickEvent) => { // Change the center viewRef.map.panTo(clickEvent.latLng); // Get this tile's bounds - var tileBounds = tile.getBounds(); + const tileBounds = tile.getBounds(); // Get the current map bounds - var mapBounds = viewRef.map.getBounds(); + const mapBounds = viewRef.map.getBounds(); // Change the zoom - //viewRef.map.fitBounds(tileBounds); + // viewRef.map.fitBounds(tileBounds); myFitBounds(viewRef.map, tileBounds); // Track this event MetacatUI.analytics?.trackEvent( "map", "clickTile", - "geohash : " + tileObject.geohash, + `geohash : ${tileObject.geohash}`, ); }); } @@ -2752,12 +2730,12 @@ define([ return tile; }, - highlightTile: function (tile) { + highlightTile(tile) { // Change the tile style on hover tile.shape.setOptions(this.mapModel.get("tileOnHover")); // Change the label color on hover - var div = tile.text.div_; + const div = tile.text.div_; if (div) { div.style.color = this.mapModel.get("tileLabelColorOnHover"); tile.text.div_ = div; @@ -2765,12 +2743,12 @@ define([ } }, - unhighlightTile: function (tile) { + unhighlightTile(tile) { // Change back the tile to it's original styling tile.shape.setOptions(tile.options); // Change back the label color - var div = tile.text.div_; + const div = tile.text.div_; div.style.color = this.mapModel.get("tileLabelColor"); tile.text.div_ = div; $(div).css("color", this.mapModel.get("tileLabelColor")); @@ -2780,47 +2758,43 @@ define([ * Get the details on each marker * And create an infowindow for that marker */ - addMarkers: function () { + addMarkers() { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Clone the Search model - var searchModelClone = this.searchModel.clone(), - geohashLevel = this.mapModel.get("tileGeohashLevel"), - viewRef = this, - markers = this.markers; + const searchModelClone = this.searchModel.clone(); + const geohashLevel = this.mapModel.get("tileGeohashLevel"); + const viewRef = this; + const { markers } = this; // Change the geohash filter to match our tiles searchModelClone.set("geohashLevel", geohashLevel); searchModelClone.set("geohashes", this.markerGeohashes); // Now run a query to get a list of documents that are represented by our markers - var query = - "q=" + - searchModelClone.getQuery() + - "&fl=id,title,geohash_9,abstract,geohash_" + - geohashLevel + - "&rows=1000" + - "&wt=json"; - - var requestSettings = { + const query = + `q=${searchModelClone.getQuery()}&fl=id,title,geohash_9,abstract,geohash_${geohashLevel}&rows=1000` + + `&wt=json`; + + const requestSettings = { url: MetacatUI.appModel.get("queryServiceUrl") + query, - success: function (data, textStatus, xhr) { - var docs = data.response.docs; - var uniqueGeohashes = viewRef.markerGeohashes; + success(data, textStatus, xhr) { + const { docs } = data.response; + let uniqueGeohashes = viewRef.markerGeohashes; // Create a marker and infoWindow for each document - _.each(docs, function (doc, key, list) { - var marker, - drawMarkersAt = []; + _.each(docs, (doc, key, list) => { + let marker; + const drawMarkersAt = []; // Find the tile place that this document belongs to // For each geohash value at the current geohash level for this document, - _.each(doc.geohash_9, function (geohash, key, list) { + _.each(doc.geohash_9, (geohash, key, list) => { // Loop through each unique tile location to find its match - for (var i = 0; i <= uniqueGeohashes.length; i++) { + for (let i = 0; i <= uniqueGeohashes.length; i++) { if (uniqueGeohashes[i] == geohash.substr(0, geohashLevel)) { drawMarkersAt.push(geohash); uniqueGeohashes = _.without(uniqueGeohashes, geohash); @@ -2829,14 +2803,14 @@ define([ }); _.each(drawMarkersAt, function (markerGeohash, key, list) { - var decodedGeohash = nGeohash.decode(markerGeohash), - latLng = new google.maps.LatLng( - decodedGeohash.latitude, - decodedGeohash.longitude, - ); + const decodedGeohash = nGeohash.decode(markerGeohash); + const latLng = new google.maps.LatLng( + decodedGeohash.latitude, + decodedGeohash.longitude, + ); // Set up the options for each marker - var markerOptions = { + const markerOptions = { position: latLng, icon: this.mapModel.get("markerImage"), zIndex: 99999, @@ -2844,7 +2818,7 @@ define([ }; // Create the marker and add to the map - var marker = new google.maps.Marker(markerOptions); + const marker = new google.maps.Marker(markerOptions); }); }); }, @@ -2861,60 +2835,51 @@ define([ * Get the details on each tile - a list of ids and titles for each dataset contained in that tile * And create an infowindow for that tile */ - addTileInfoWindows: function () { + addTileInfoWindows() { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Clone the Search model - var searchModelClone = this.searchModel.clone(), - geohashLevel = this.mapModel.get("tileGeohashLevel"), - geohashName = "geohash_" + geohashLevel, - viewRef = this, - infoWindows = []; + const searchModelClone = this.searchModel.clone(); + const geohashLevel = this.mapModel.get("tileGeohashLevel"); + const geohashName = `geohash_${geohashLevel}`; + const viewRef = this; + const infoWindows = []; // Change the geohash filter to match our tiles searchModelClone.set("geohashLevel", geohashLevel); searchModelClone.set("geohashes", this.tileGeohashes); // Now run a query to get a list of documents that are represented by our tiles - var query = - "q=" + - searchModelClone.getQuery() + - "&fl=id,title,geohash_9," + - geohashName + - "&rows=1000" + - "&wt=json"; - - var requestSettings = { + const query = + `q=${searchModelClone.getQuery()}&fl=id,title,geohash_9,${geohashName}&rows=1000` + + `&wt=json`; + + const requestSettings = { url: MetacatUI.appModel.get("queryServiceUrl") + query, - success: function (data, textStatus, xhr) { + success(data, textStatus, xhr) { // Make an infoWindow for each doc - var docs = data.response.docs; + const { docs } = data.response; // For each tile, loop through the docs to find which ones to include in its infoWindow - _.each(viewRef.tiles, function (tile, key, list) { - var infoWindowContent = ""; + _.each(viewRef.tiles, (tile, key, list) => { + let infoWindowContent = ""; - _.each(docs, function (doc, key, list) { - var docGeohashes = doc[geohashName]; + _.each(docs, (doc, key, list) => { + const docGeohashes = doc[geohashName]; if (docGeohashes) { // Is this document in this tile? - for (var i = 0; i < docGeohashes.length; i++) { + for (let i = 0; i < docGeohashes.length; i++) { if (docGeohashes[i] == tile.geohash) { // Add this doc to the infoWindow content - infoWindowContent += - "" + - doc.title + - " (" + - doc.id + - ")
    "; + infoWindowContent += `${doc.title} (${ + doc.id + })
    `; break; } } @@ -2922,21 +2887,19 @@ define([ }); // The center of the tile - var decodedGeohash = nGeohash.decode(tile.geohash), - tileCenter = new google.maps.LatLng( - decodedGeohash.latitude, - decodedGeohash.longitude, - ); + const decodedGeohash = nGeohash.decode(tile.geohash); + const tileCenter = new google.maps.LatLng( + decodedGeohash.latitude, + decodedGeohash.longitude, + ); // The infowindow - var infoWindow = new gmaps.InfoWindow({ + const infoWindow = new gmaps.InfoWindow({ content: - "
    " + - "

    Datasets located here

    " + - "

    " + - infoWindowContent + - "

    " + - "
    ", + `
    ` + + `

    Datasets located here

    ` + + `

    ${infoWindowContent}

    ` + + `
    `, isOpen: false, disableAutoPan: false, maxWidth: 250, @@ -2950,7 +2913,7 @@ define([ tile.shape, "click", function (clickEvent) { - //--- We are at max zoom, display an infowindow ----// + // --- We are at max zoom, display an infowindow ----// if (this.mapModel.isMaxZoom(viewRef.map)) { // Find the infowindow that belongs to this tile in the view infoWindow.open(viewRef.map); @@ -2960,13 +2923,13 @@ define([ viewRef.closeInfoWindows(infoWindow); } - //------ We are not at max zoom, so zoom into this tile ----// + // ------ We are not at max zoom, so zoom into this tile ----// else { // Change the center viewRef.map.panTo(clickEvent.latLng); // Get this tile's bounds - var bounds = tile.shape.getBounds(); + const bounds = tile.shape.getBounds(); // Change the zoom viewRef.map.fitBounds(bounds); @@ -2975,7 +2938,7 @@ define([ ); // Close the infowindow upon any click on the map - gmaps.event.addListener(viewRef.map, "click", function () { + gmaps.event.addListener(viewRef.map, "click", () => { infoWindow.close(); infoWindow.isOpen = false; }); @@ -2998,13 +2961,14 @@ define([ * Iterate over each infowindow that we have stored in the view and close it. * Pass an infoWindow object to this function to keep that infoWindow open/skip it * @param {infoWindow} - An infoWindow to keep open + * @param except */ - closeInfoWindows: function (except) { - var infoWindowLists = [this.markerInfoWindows, this.tileInfoWindows]; + closeInfoWindows(except) { + const infoWindowLists = [this.markerInfoWindows, this.tileInfoWindows]; - _.each(infoWindowLists, function (infoWindows, key, list) { + _.each(infoWindowLists, (infoWindows, key, list) => { // Iterate over all the marker infowindows and close all of them except for this one - for (var i = 0; i < infoWindows.length; i++) { + for (let i = 0; i < infoWindows.length; i++) { if (infoWindows[i].isOpen && infoWindows[i] != except) { // Close this info window and stop looking, since only one of each kind should be open anyway infoWindows[i].close(); @@ -3017,15 +2981,15 @@ define([ /** * Remove all the tiles and text from the map - **/ - removeTiles: function () { + */ + removeTiles() { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Remove the tile from the map - _.each(this.tiles, function (tile, key, list) { + _.each(this.tiles, (tile, key, list) => { if (tile.shape) tile.shape.setMap(null); if (tile.text) tile.text.setMap(null); }); @@ -3039,14 +3003,14 @@ define([ /** * Iterate over all the markers in the view and remove them from the map and view */ - removeMarkers: function () { + removeMarkers() { // Exit if maps are not in use if (this.mode != "map" || !gmaps) { return false; } // Remove the marker from the map - _.each(this.markers, function (marker, key, list) { + _.each(this.markers, (marker, key, list) => { marker.marker.setMap(null); }); @@ -3062,17 +3026,18 @@ define([ * ================================================================================================== */ - /** Add all items in the **SearchResults** collection + /** + * Add all items in the **SearchResults** collection * This loads the first 25, then waits for the map to be * fully loaded and then loads the remaining items. * Without this delay, the app waits until all records are processed */ - addAll: function () { + addAll() { // After the map is done loading, then load the rest of the results into the list if (this.ready) this.renderAll(); else { - var viewRef = this; - var intervalID = setInterval(function () { + const viewRef = this; + var intervalID = setInterval(() => { if (viewRef.ready) { clearInterval(intervalID); viewRef.renderAll(); @@ -3081,10 +3046,10 @@ define([ } // After all the results are loaded, query for our facet counts in the background - //this.getAutocompletes(); + // this.getAutocompletes(); }, - renderAll: function () { + renderAll() { // do this first to indicate coming results this.updateStats(); @@ -3096,7 +3061,7 @@ define([ this.$results.removeClass("loading"); // If there are no results, display so - var numFound = this.searchResults.length; + const numFound = this.searchResults.length; if (numFound == 0) { // Add a No Results Found message this.$results.html("

    No results found.

    "); @@ -3115,12 +3080,12 @@ define([ !MetacatUI.appSearchResults.length ) { $("#no-results-found").after( - "

    Where are my data sets?

    If you are a previous ACADIS Gateway user, " + - "you will need to take additional steps to access your data sets in the new NSF Arctic Data Center." + - "Send us a message at support@arcticdata.io with your old ACADIS " + - "Gateway username and your ORCID identifier (" + - MetacatUI.appUserModel.get("username") + - "), we will help.

    ", + `

    Where are my data sets?

    If you are a previous ACADIS Gateway user, ` + + `you will need to take additional steps to access your data sets in the new NSF Arctic Data Center.` + + `Send us a message at support@arcticdata.io with your old ACADIS ` + + `Gateway username and your ORCID identifier (${MetacatUI.appUserModel.get( + "username", + )}), we will help.

    `, ); } } @@ -3130,7 +3095,7 @@ define([ // Clear the results list before we start adding new rows this.$results.html(""); - //--First map all the results-- + // --First map all the results-- if (gmaps && this.mapModel) { // Draw all the tiles on the map to represent the datasets this.drawTiles(); @@ -3139,25 +3104,25 @@ define([ $("#map-container").removeClass("loading"); } - var pid_list = new Array(); + const pid_list = new Array(); - //--- Add all the results to the list --- + // --- Add all the results to the list --- for (i = 0; i < this.searchResults.length; i++) { pid_list.push(this.searchResults.models[i].get("id")); } if (MetacatUI.appModel.get("displayDatasetMetrics")) { - var metricsModel = new MetricsModel({ - pid_list: pid_list, + const metricsModel = new MetricsModel({ + pid_list, type: "catalog", }); metricsModel.fetch(); this.metricsModel = metricsModel; } - //--- Add all the results to the list --- + // --- Add all the results to the list --- for (i = 0; i < this.searchResults.length; i++) { - var element = this.searchResults.models[i]; + const element = this.searchResults.models[i]; if (typeof element !== "undefined") this.addOne(element, this.metricsModel); } @@ -3172,8 +3137,9 @@ define([ /** * Add a single SolrResult item to the list by creating a view for it and appending its element to the DOM. + * @param result */ - addOne: function (result) { + addOne(result) { // Get the view and package service URL's this.$view_service = MetacatUI.appModel.get("viewServiceUrl"); this.$package_service = MetacatUI.appModel.get("packageServiceUrl"); @@ -3182,7 +3148,7 @@ define([ package_service: this.$package_service, }); - var view = new SearchResultView({ + const view = new SearchResultView({ model: result, metricsModel: this.metricsModel, }); @@ -3194,23 +3160,23 @@ define([ if ( gmaps && this.mapModel && - typeof result.get("geohash_9") != "undefined" && + typeof result.get("geohash_9") !== "undefined" && result.get("geohash_9") != null ) { - var title = result.get("title"); + const title = result.get("title"); - for (var i = 0; i < result.get("geohash_9").length; i++) { - var centerGeohash = result.get("geohash_9")[i], - decodedGeohash = nGeohash.decode(centerGeohash), - position = new google.maps.LatLng( - decodedGeohash.latitude, - decodedGeohash.longitude, - ), - marker = new gmaps.Marker({ - position: position, - icon: this.mapModel.get("markerImage"), - zIndex: 99999, - }); + for (let i = 0; i < result.get("geohash_9").length; i++) { + const centerGeohash = result.get("geohash_9")[i]; + const decodedGeohash = nGeohash.decode(centerGeohash); + const position = new google.maps.LatLng( + decodedGeohash.latitude, + decodedGeohash.longitude, + ); + const marker = new gmaps.Marker({ + position, + icon: this.mapModel.get("markerImage"), + zIndex: 99999, + }); } } }, @@ -3221,9 +3187,9 @@ define([ * @param {SolrResult} model * @param {XMLHttpRequest.response} response */ - showError: function (model, response) { - var errorMessage = ""; - var statusCode = response.status; + showError(model, response) { + let errorMessage = ""; + let statusCode = response.status; if (!statusCode) { statusCode = parseInt(response.statusText); @@ -3241,17 +3207,14 @@ define([ errorMessage = ""; } } finally { - if (typeof errorMessage == "string" && errorMessage.length) { - errorMessage = "

    Error details: " + errorMessage + "

    "; + if (typeof errorMessage === "string" && errorMessage.length) { + errorMessage = `

    Error details: ${errorMessage}

    `; } } } MetacatUI.appView.showAlert( - "

    " + - this.solrErrorTitle + - ".

    " + - errorMessage, + `

    ${this.solrErrorTitle}.

    ${errorMessage}`, "alert-error", this.$results, ); @@ -3264,7 +3227,7 @@ define([ * STYLING THE UI * ================================================================================================== */ - toggleMapMode: function (e) { + toggleMapMode(e) { if (typeof e === "object") { e.preventDefault(); } @@ -3289,7 +3252,7 @@ define([ }, // Communicate that the page is loading - loading: function () { + loading() { $("#map-container").addClass("loading"); this.$results.addClass("loading"); @@ -3301,13 +3264,13 @@ define([ }, // Toggles the collapseable filters sidebar and result list in the default theme - collapse: function (e) { - var id = $(e.target).attr("data-collapse"); + collapse(e) { + const id = $(e.target).attr("data-collapse"); - $("#" + id).toggleClass("collapsed"); + $(`#${id}`).toggleClass("collapsed"); }, - toggleFilterCollapse: function (e) { + toggleFilterCollapse(e) { if (typeof e !== "undefined") { var container = $(e.target).parents(".filter-contain.collapsable"); } else { @@ -3349,7 +3312,7 @@ define([ /* * Either hides or shows the "clear all filters" button */ - toggleClearButton: function () { + toggleClearButton() { if (this.searchModel.filterCount() > 0) { this.showClearButton(); } else { @@ -3358,7 +3321,7 @@ define([ }, // Move the popover element up the page a bit if it runs off the bottom of the page - preventPopoverRunoff: function (e) { + preventPopoverRunoff(e) { // In map view only (because all elements are fixed and you can't scroll) if (this.mode == "map") { var viewportHeight = $("#map-container").outerHeight(); @@ -3367,9 +3330,9 @@ define([ } if ($(".popover").length > 0) { - var offset = $(".popover").offset(); - var popoverHeight = $(".popover").outerHeight(); - var topPosition = offset.top; + const offset = $(".popover").offset(); + const popoverHeight = $(".popover").outerHeight(); + const topPosition = offset.top; // If pixels are cut off the top of the page, readjust its vertical position if (topPosition < 0) { @@ -3378,11 +3341,11 @@ define([ }); } else { // Else, let's check if it is cut off at the bottom - var totalHeight = topPosition + popoverHeight; + const totalHeight = topPosition + popoverHeight; - var pixelsHidden = totalHeight - viewportHeight; + const pixelsHidden = totalHeight - viewportHeight; - var newTopPosition = topPosition - pixelsHidden - 40; + const newTopPosition = topPosition - pixelsHidden - 40; // If pixels are cut off the bottom of the page, readjust its vertical position if (pixelsHidden > 0) { @@ -3394,7 +3357,7 @@ define([ } }, - onClose: function () { + onClose() { this.stopListening(); $(".DataCatalog").removeClass("DataCatalog"); diff --git a/src/js/views/DataPackageView.js b/src/js/views/DataPackageView.js index a7ba4c97d..613ea3499 100644 --- a/src/js/views/DataPackageView.js +++ b/src/js/views/DataPackageView.js @@ -15,7 +15,7 @@ "text!templates/dataPackage.html", "text!templates/dataPackageStart.html", "text!templates/dataPackageHeader.html", -], function ( +], ( $, _, Backbone, @@ -32,7 +32,7 @@ DataPackageTemplate, DataPackageStartTemplate, DataPackageHeaderTemplate, -) { +) => { "use strict"; /** @@ -41,7 +41,7 @@ * a file/folder browser * @classcategory Views * @screenshot views/DataPackageView.png - * @extends Backbone.View + * @augments Backbone.View */ var DataPackageView = Backbone.View.extend( /** @lends DataPackageView.prototype */ { @@ -82,11 +82,11 @@ /* Flag indicating the open or closed state of the package rows */ isOpen: true, - initialize: function (options) { + initialize(options) { if (options === undefined || !options) var options = {}; if (!options.edit) { - //The edit option will allow the user to edit the table + // The edit option will allow the user to edit the table this.edit = options.edit || false; this.mode = "view"; this.packageId = options.packageId || null; @@ -109,18 +109,18 @@ this.listenTo(this.packageModel, "changeAll", this.render); } else { - //Get the options sent to this view - if (typeof options == "object") { - //The edit option will allow the user to edit the table + // Get the options sent to this view + if (typeof options === "object") { + // The edit option will allow the user to edit the table this.edit = options.edit || false; this.mode = "edit"; - //The data package to render + // The data package to render this.dataPackage = options.dataPackage || new DataPackage(); this.parentEditorView = options.parentEditorView || null; } - //Create a new DataPackage collection if one wasn't sent + // Create a new DataPackage collection if one wasn't sent else if (!this.dataPackage) { this.dataPackage = new DataPackage(); } @@ -132,7 +132,7 @@ /** * Render the DataPackage HTML */ - render: function () { + render() { this.$el.addClass("download-contents table-condensed"); this.$el.append( this.template({ @@ -160,13 +160,13 @@ this.addAll(); if (this.edit) { - //If this is a new data package, then display a message and button + // If this is a new data package, then display a message and button if ( (this.dataPackage.length == 1 && this.dataPackage.models[0].isNew()) || !this.dataPackage.length ) { - var messageRow = this.startMessageTemplate(); + const messageRow = this.startMessageTemplate(); this.$("tbody").append(messageRow); @@ -175,7 +175,7 @@ }); } - //Render the Share control(s) + // Render the Share control(s) this.renderShareControl(); } else { // check for nessted datasets @@ -190,13 +190,14 @@ /** * Add a single DataItemView row to the DataPackageView + * @param item + * @param dataPackage */ - addOne: function (item, dataPackage) { + addOne(item, dataPackage) { if (!item) return false; - //Don't add duplicate rows - if (this.$(".data-package-item[data-id='" + item.id + "']").length) - return; + // Don't add duplicate rows + if (this.$(`.data-package-item[data-id='${item.id}']`).length) return; // Don't add data package if ( @@ -206,18 +207,21 @@ return; } - var dataItemView, scimetaParent, parentRow, delayed_models; + let dataItemView; + let scimetaParent; + let parentRow; + let delayed_models; if (_.contains(Object.keys(this.subviews), item.id)) { return false; // Don't double render } - var itemPath = null, - view = this; + let itemPath = null; + const view = this; if (!_.isEmpty(this.atLocationObj)) { itemPath = this.atLocationObj[item.get("id")]; if (itemPath[0] != "/") { - itemPath = "/" + itemPath; + itemPath = `/${itemPath}`; } } @@ -228,37 +232,37 @@ if (typeof dataPackageId === "undefined") dataPackageId = this.dataPackage.id; - var insertInfoIcon = this.edit + const insertInfoIcon = this.edit ? false : view.dataEntities.includes(item.id); dataItemView = new DataItemView({ model: item, metricsModel: this.metricsModel, - itemPath: itemPath, - insertInfoIcon: insertInfoIcon, + itemPath, + insertInfoIcon, currentlyViewing: this.currentlyViewing, mode: this.mode, parentEditorView: this.parentEditorView, - dataPackageId: dataPackageId, + dataPackageId, }); this.subviews[item.id] = dataItemView; // keep track of all views if (this.edit) { - //Get the science metadata that documents this item + // Get the science metadata that documents this item scimetaParent = item.get("isDocumentedBy"); - //If this item is not documented by a science metadata object, + // If this item is not documented by a science metadata object, // and there is only one science metadata doc in the package, then assume it is // documented by that science metadata doc - if (typeof scimetaParent == "undefined" || !scimetaParent) { - //Get the science metadata models - var metadataIds = this.dataPackage.sciMetaPids; + if (typeof scimetaParent === "undefined" || !scimetaParent) { + // Get the science metadata models + const metadataIds = this.dataPackage.sciMetaPids; - //If there is only one science metadata model in the package, then use it + // If there is only one science metadata model in the package, then use it if (metadataIds.length == 1) scimetaParent = metadataIds[0]; } - //Otherwise, get the first science metadata doc that documents this object + // Otherwise, get the first science metadata doc that documents this object else { scimetaParent = scimetaParent[0]; } @@ -278,7 +282,7 @@ } else { // Find the parent row by it's id, stored in a custom attribute if (scimetaParent) - parentRow = this.$("[data-id='" + scimetaParent + "']"); + parentRow = this.$(`[data-id='${scimetaParent}']`); if (typeof parentRow !== "undefined" && parentRow.length) { // This is a data row, insert below it's metadata parent folder @@ -287,7 +291,7 @@ // Remove it from the delayedModels list if necessary if (_.contains(Object.keys(this.delayedModels), scimetaParent)) { delayed_models = this.delayedModels[scimetaParent]; - var index = _.indexOf(delayed_models, item); + const index = _.indexOf(delayed_models, item); delayed_models = delayed_models.splice(index, 1); // Put the shortened array back if delayed models remains @@ -301,9 +305,7 @@ this.trigger("addOne"); } else { console.warn( - "Couldn't render " + - item.id + - ". Delayed until parent is rendered.", + `Couldn't render ${item.id}. Delayed until parent is rendered.`, ); // Postpone the data row until the parent is rendered delayed_models = this.delayedModels[scimetaParent]; @@ -332,8 +334,8 @@ /** * Render the Data Package View and insert it into this view */ - renderDataPackage: function () { - var view = this; + renderDataPackage() { + const view = this; if (MetacatUI.rootDataPackage.packageModel.isNew()) { view.renderMember(this.model); @@ -345,23 +347,23 @@ this.listenTo(model, "sync", view.renderMember); else if (model.get("synced")) view.renderMember(model); - //Listen for changes on this member + // Listen for changes on this member model.on("change:fileName", model.addToUploadQueue); }); - //Render the Data Package view + // Render the Data Package view this.dataPackageView = new DataPackageView({ edit: true, dataPackage: MetacatUI.rootDataPackage, parentEditorView: this, }); - //Render the view - var $packageTableContainer = this.$("#data-package-container"); + // Render the view + const $packageTableContainer = this.$("#data-package-container"); $packageTableContainer.html(this.dataPackageView.render().el); - //Make the view resizable on the bottom - var handle = $(document.createElement("div")) + // Make the view resizable on the bottom + const handle = $(document.createElement("div")) .addClass("ui-resizable-handle ui-resizable-s") .attr("title", "Drag to resize") .append( @@ -372,15 +374,15 @@ handles: { s: handle }, minHeight: 100, maxHeight: 900, - resize: function () { + resize() { view.emlView.resizeTOC(); }, }); - var tableHeight = ($(window).height() - $("#Navbar").height()) * 0.4; - $packageTableContainer.css("height", tableHeight + "px"); + const tableHeight = ($(window).height() - $("#Navbar").height()) * 0.4; + $packageTableContainer.css("height", `${tableHeight}px`); - var table = this.dataPackageView.$el; + const table = this.dataPackageView.$el; this.listenTo(this.dataPackageView, "addOne", function () { if ( table.outerHeight() > $packageTableContainer.outerHeight() && @@ -396,7 +398,7 @@ if (this.emlView) this.emlView.resizeTOC(); - //Save the view as a subview + // Save the view as a subview this.subviews.push(this.dataPackageView); this.listenTo( @@ -409,12 +411,12 @@ /** * Add all rows to the DataPackageView */ - addAll: function () { + addAll() { this.$el.find("#data-package-table-body").html(""); // clear the table first this.dataPackage.sort(); if (!this.edit) { - var atLocationObj = this.dataPackage.getAtLocation(); + const atLocationObj = this.dataPackage.getAtLocation(); this.atLocationObj = atLocationObj; // form path to D1 object dictionary @@ -430,11 +432,11 @@ } }, this); - for (let key of Object.keys(this.atLocationObj)) { - var path = this.atLocationObj[key]; - var pathArray = path.split("/"); + for (const key of Object.keys(this.atLocationObj)) { + const path = this.atLocationObj[key]; + const pathArray = path.split("/"); pathArray.pop(); - var parentPath = pathArray.join("/"); + const parentPath = pathArray.join("/"); if (filePathObj.hasOwnProperty(parentPath)) { filePathObj[parentPath].push(key); } else { @@ -445,31 +447,33 @@ } // add top level data package row to the package table - var tableRow = null, - view = this, - title = this.packageTitle, - packageUrl = null; + let tableRow = null; + const view = this; + let title = this.packageTitle; + let packageUrl = null; if (title === "") { - let metadataObj = _.filter(this.dataPackage.models, function (m) { - return m.get("id") == view.currentlyViewing; - }); + const metadataObj = _.filter( + this.dataPackage.models, + (m) => m.get("id") == view.currentlyViewing, + ); if (metadataObj.length > 0) { title = metadataObj[0].get("title"); - let metaId = metadataObj[0].get("id"); + const metaId = metadataObj[0].get("id"); this.metaId = metaId; } else { title = this.dataPackage.get("id"); } } - let titleTooltip = title; + const titleTooltip = title; title = title.length > 150 - ? title.slice(0, 75) + - "..." + - title.slice(title.length - 75, title.length) + ? `${title.slice(0, 75)}...${title.slice( + title.length - 75, + title.length, + )}` : title; // set the package URL @@ -478,13 +482,13 @@ MetacatUI.appModel.get("packageServiceUrl") + encodeURIComponent(view.dataPackage.id); - var disablePackageDownloads = this.disablePackageDownloads; + const { disablePackageDownloads } = this; tableRow = this.dataPackageHeaderTemplate({ id: view.dataPackage.id, - title: title, - titleTooltip: titleTooltip, + title, + titleTooltip, downloadUrl: packageUrl, - disablePackageDownloads: disablePackageDownloads, + disablePackageDownloads, disablePackageUrl: true, }); @@ -492,7 +496,7 @@ if (this.atLocationObj !== undefined && filePathObj !== undefined) { // sort the filePath by length - var sortedFilePathObj = Object.keys(filePathObj) + const sortedFilePathObj = Object.keys(filePathObj) .sort() .reduce((obj, key) => { obj[key] = filePathObj[key]; @@ -511,23 +515,25 @@ /** * Add all the files and folders + * @param sortedFilePathObj */ - addFilesAndFolders: function (sortedFilePathObj) { + addFilesAndFolders(sortedFilePathObj) { if (!sortedFilePathObj) return false; - var insertedPath = new Array(); - let pathMap = new Object(); + const insertedPath = new Array(); + const pathMap = new Object(); pathMap[""] = ""; - for (let key of Object.keys(sortedFilePathObj)) { + for (const key of Object.keys(sortedFilePathObj)) { // add folder - var pathArray = key.split("/"); - //skip the first empty value + const pathArray = key.split("/"); + // skip the first empty value for (let i = 0; i < pathArray.length; i++) { if (pathArray[i].length < 1) continue; if (!(pathArray[i] in pathMap)) { // insert path - var dataItemView, itemPath; + var dataItemView; + var itemPath; // root if (i == 0) { @@ -539,7 +545,7 @@ dataItemView = new DataItemView({ mode: this.mode, itemName: pathArray[i], - itemPath: itemPath, + itemPath, itemType: "folder", parentEditorView: this.parentEditorView, dataPackageId: this.dataPackage.id, @@ -551,12 +557,12 @@ this.trigger("addOne"); - pathMap[pathArray[i]] = itemPath + "/" + pathArray[i]; + pathMap[pathArray[i]] = `${itemPath}/${pathArray[i]}`; } } // add files in the folder - var itemArray = sortedFilePathObj[key]; + const itemArray = sortedFilePathObj[key]; // Add metadata object at the top of the file table if ( @@ -564,12 +570,12 @@ this.metaId !== "undefined" && itemArray.includes(this.metaId) ) { - let item = this.metaId; + const item = this.metaId; this.addOne(this.dataPackage.get(item)); } for (let i = 0; i < itemArray.length; i++) { - let item = itemArray[i]; + const item = itemArray[i]; this.addOne(this.dataPackage.get(item)); } } @@ -577,10 +583,9 @@ /** Remove the subview represented by the given model item. - @param item The model representing the sub view to be removed - */ - removeOne: function (item) { + */ + removeOne(item) { if (_.contains(Object.keys(this.subviews), item.id)) { // Remove the view and the its reference in the subviews list this.subviews[item.id].remove(); @@ -588,8 +593,8 @@ } }, - handleAddFiles: function (e) { - //Pass this on to the DataItemView for the root data package + handleAddFiles(e) { + // Pass this on to the DataItemView for the root data package this.$(".data-package-item.folder") .first() .data("view") @@ -600,7 +605,7 @@ * Renders a control that opens the AccessPolicyView for editing permissions on this package * @since 2.15.0 */ - renderShareControl: function () { + renderShareControl() { if ( this.parentEditorView && !this.parentEditorView.isAccessPolicyEditEnabled() @@ -612,31 +617,32 @@ /** * Close subviews as needed */ - onClose: function () { + onClose() { // Close each subview _.each( Object.keys(this.subviews), function (id) { - var subview = this.subviews[id]; + const subview = this.subviews[id]; subview.onClose(); }, this, ); - //Reset the subviews from the view completely (by removing it from the prototype) + // Reset the subviews from the view completely (by removing it from the prototype) this.__proto__.subviews = {}; }, /** Show or hide the data rows associated with the event row science metadata - */ - toggleRows: function (event) { + * @param event + */ + toggleRows(event) { if (this.isOpen) { // Get the DataItemView associated with each id _.each( Object.keys(this.subviews), function (id) { - var subview = this.subviews[id]; + const subview = this.subviews[id]; if (subview.model.get("type") === "Data" && subview.remove) { // Remove the view from the DOM @@ -664,7 +670,7 @@ this.isOpen = false; } else { // Add sub rows to the view - var dataModels = this.dataPackage.where({ type: "Data" }); + const dataModels = this.dataPackage.where({ type: "Data" }); _.each( dataModels, function (model) { @@ -698,23 +704,23 @@ * @param {Event} e - The event object. * @since 2.28.0 */ - expand: function (e) { + expand(e) { // Don't do anything... e.preventDefault(); - var view = this; - var eventEl = $(e.target).parents("td"); - var rowEl = $(e.target).parents("tr"); + const view = this; + const eventEl = $(e.target).parents("td"); + const rowEl = $(e.target).parents("tr"); - var parentId = rowEl.data("id"); - var children = "tr[data-parent='" + parentId + "']"; + const parentId = rowEl.data("id"); + const children = `tr[data-parent='${parentId}']`; this.$(children).fadeIn(); this.$(eventEl) .children() .children(".expand-control") - .fadeOut(function () { + .fadeOut(() => { view .$(eventEl) .children() @@ -727,7 +733,7 @@ .children() .children() .children(".collapse-control") - .fadeOut(function () { + .fadeOut(() => { view .$(children) .children() @@ -740,25 +746,24 @@ /** * Collapse function to hide rows when a user clicks on a collapse control. * @param {Event} e - The event object. - * * @since 2.28.0 */ - collapse: function (e) { + collapse(e) { // Don't do anything... e.preventDefault(); - var view = this; - var eventEl = $(e.target).parents("td"); - var rowEl = $(e.target).parents("tr"); + const view = this; + const eventEl = $(e.target).parents("td"); + const rowEl = $(e.target).parents("tr"); - var parentId = rowEl.data("id"); - var children = "tr[data-parent^='" + parentId + "']"; + const parentId = rowEl.data("id"); + const children = `tr[data-parent^='${parentId}']`; this.$(children).fadeOut(); this.$(eventEl) .children() .children(".collapse-control") - .fadeOut(function () { + .fadeOut(() => { view.$(eventEl).children().children(".expand-control").fadeIn(); view.$(".tooltip-this").tooltip(); }); @@ -767,25 +772,24 @@ /** * Expand all function to show all child rows when a user clicks on an expand-all control. * @param {Event} e - The event object. - * * @since 2.28.0 */ - expandAll: function (e) { + expandAll(e) { // Don't do anything... e.preventDefault(); - var view = this; - var eventEl = $(e.target).parents("td"); - var rowEl = $(e.target).parents("tr"); + const view = this; + const eventEl = $(e.target).parents("td"); + const rowEl = $(e.target).parents("tr"); - var parentId = rowEl.data("id"); - var children = "tr[data-packageid='" + parentId + "']"; + const parentId = rowEl.data("id"); + const children = `tr[data-packageid='${parentId}']`; this.$(children).fadeIn(); this.$(eventEl) .children(".d1package-expand") - .fadeOut(function () { + .fadeOut(() => { view.$(eventEl).children(".d1package-collapse").fadeIn("fast"); view.$(".tooltip-this").tooltip(); }); @@ -794,7 +798,7 @@ .children() .children() .children(".collapse-control") - .fadeOut(function () { + .fadeOut(() => { view .$(children) .children() @@ -807,31 +811,30 @@ /** * Collapse all function to hide all child rows when a user clicks on a collapse-all control. * @param {Event} e - The event object. - * * @since 2.28.0 */ - collapseAll: function (e) { + collapseAll(e) { // Don't do anything... e.preventDefault(); - var view = this; - var eventEl = $(e.target).parents("td"); - var rowEl = $(e.target).parents("tr"); + const view = this; + const eventEl = $(e.target).parents("td"); + const rowEl = $(e.target).parents("tr"); - var parentId = rowEl.data("id"); - var children = "tr[data-packageid='" + parentId + "']"; + const parentId = rowEl.data("id"); + const children = `tr[data-packageid='${parentId}']`; this.$(children).each(function () { $(this).fadeOut(); - let childId = $(this).data("id"); - let grandchildren = "tr[data-parent^='" + childId + "']"; + const childId = $(this).data("id"); + const grandchildren = `tr[data-parent^='${childId}']`; $(grandchildren).fadeOut(); }); this.$(eventEl) .children(".d1package-collapse") - .fadeOut(function () { + .fadeOut(() => { view.$(eventEl).children(".d1package-expand").fadeIn(); view.$(".tooltip-this").tooltip(); }); @@ -839,27 +842,26 @@ /** * Check for private members and disable download buttons if necessary. - * * @since 2.28.0 */ - checkForPrivateMembers: function () { + checkForPrivateMembers() { try { - var packageModel = this.model, - packageCollection = this.dataPackage; + const packageModel = this.model; + const packageCollection = this.dataPackage; if (!packageModel || !packageCollection) { return; } - var numMembersFromSolr = packageModel.get("members").length, - numMembersFromRDF = packageCollection.length; + const numMembersFromSolr = packageModel.get("members").length; + const numMembersFromRDF = packageCollection.length; if (numMembersFromRDF > numMembersFromSolr) { - var downloadButtons = this.$(".btn.download"); + const downloadButtons = this.$(".btn.download"); - for (var i = 0; i < downloadButtons.length; i++) { - var btn = downloadButtons[i]; - var downloadURL = $(btn).attr("href"); + for (let i = 0; i < downloadButtons.length; i++) { + const btn = downloadButtons[i]; + const downloadURL = $(btn).attr("href"); if ( downloadURL.indexOf(packageModel.get("id")) > -1 || @@ -890,24 +892,23 @@ /** * Retrieves and processes nested packages for the current package. - * * @since 2.28.0 */ - getNestedPackages: function () { - var nestedPackages = new Array(); - var nestedPackageIds = new Array(); + getNestedPackages() { + const nestedPackages = new Array(); + const nestedPackageIds = new Array(); this.nestedPackages = nestedPackages; // get all the child packages for this resource map - var childPackages = this.dataPackage.filter(function (m) { - return m.get("formatType") === "RESOURCE"; - }); + const childPackages = this.dataPackage.filter( + (m) => m.get("formatType") === "RESOURCE", + ); // iterate over the list of child packages and add their members - for (var ite in childPackages) { - var childPkg = childPackages[ite]; + for (const ite in childPackages) { + const childPkg = childPackages[ite]; if (!nestedPackageIds.includes(childPkg.get("id"))) { - var nestedPackage = new PackageModel(); + const nestedPackage = new PackageModel(); nestedPackage.set("id", childPkg.get("id")); nestedPackage.setURL(); nestedPackage.getMembers(); @@ -926,65 +927,63 @@ /** * Adds a nested data package to the package table. - * - * @param {Object} dataPackage - The data package to be added. + * @param {object} dataPackage - The data package to be added. * @since 2.28.0 */ - addNestedPackages: function (dataPackage) { + addNestedPackages(dataPackage) { /** * Generates the table row for the data package header. * @type {null|Element} */ - var tableRow = null, - /** - * Reference to the current view. - * @type {Object} - */ - view = this, - /** - * The title of the data package. - * @type {null|string} - */ - title = null, - /** - * The URL of the data package. - * @type {null|string} - */ - packageUrl = null, - /** - * The URL of the nested data package. - * @type {null|string} - */ - nestedPackageUrl = null; + let tableRow = null; + /** + * Reference to the current view. + * @type {object} + */ + var view = this; + /** + * The title of the data package. + * @type {null|string} + */ + let title = null; + /** + * The URL of the data package. + * @type {null|string} + */ + let packageUrl = null; + /** + * The URL of the nested data package. + * @type {null|string} + */ + let nestedPackageUrl = null; /** * The members of the data package. - * * @type {Array} */ - var members = dataPackage.get("members"); + let members = dataPackage.get("members"); /** * Filters out metadata objects from the members. - * * @type {Array} */ - let metadataObj = _.filter(members, function (m) { - return m.get("type") == "Metadata" || m.get("type") == "metadata"; - }); + const metadataObj = _.filter( + members, + (m) => m.get("type") == "Metadata" || m.get("type") == "metadata", + ); title = metadataObj[0].get("title"); /** * The tooltip for the title (used for long titles). - * * @type {string} */ - let titleTooltip = title; + const titleTooltip = title; title = title.length > 150 - ? title.slice(0, 75) + - "..." + - title.slice(title.length - 75, title.length) + ? `${title.slice(0, 75)}...${title.slice( + title.length - 75, + title.length, + )}` : title; // Set the package URL @@ -995,18 +994,16 @@ // Set the nested package URL if (MetacatUI.root !== undefined && dataPackage.id !== undefined) - nestedPackageUrl = - MetacatUI.root + "/view/" + encodeURIComponent(dataPackage.id); + nestedPackageUrl = `${MetacatUI.root}/view/${encodeURIComponent(dataPackage.id)}`; /** * The HTML content for the data package header. - * * @type {string} */ tableRow = this.dataPackageHeaderTemplate({ id: dataPackage.id, - title: title, - titleTooltip: titleTooltip, + title, + titleTooltip, disablePackageDownloads: false, downloadUrl: packageUrl, disablePackageUrl: false, @@ -1026,17 +1023,15 @@ // Add the downloadButtonView el to the span this.$el - .find(".downloadAction[data-id='" + dataPackage.id + "']") + .find(`.downloadAction[data-id='${dataPackage.id}']`) .html(this.downloadButtonView.el); // Filter out the packages from the member list - members = _.filter(members, function (m) { - return m.type != "Package"; - }); + members = _.filter(members, (m) => m.type != "Package"); // Add each member to the package table view var view = this; - _.each(members, function (m) { + _.each(members, (m) => { // Update the size to bytes format m.set({ size: Utilities.bytesToSize(m.get("size")) }); @@ -1045,7 +1040,7 @@ }); }, - /*showDownloadProgress: function(e){ + /* showDownloadProgress: function(e){ e.preventDefault(); var button = $(e.target); @@ -1054,7 +1049,7 @@ return true; - }*/ + } */ }, ); return DataPackageView; diff --git a/src/js/views/DownloadButtonView.js b/src/js/views/DownloadButtonView.js index f35d06bcc..e97cef402 100644 --- a/src/js/views/DownloadButtonView.js +++ b/src/js/views/DownloadButtonView.js @@ -5,15 +5,15 @@ define([ "models/SolrResult", "models/DataONEObject", "models/PackageModel", -], function ($, _, Backbone, SolrResult, DataONEObject, PackageModel) { +], ($, _, Backbone, SolrResult, DataONEObject, PackageModel) => { "use strict"; - var DownloadButtonView = Backbone.View.extend({ + const DownloadButtonView = Backbone.View.extend({ tagName: "a", className: "btn download", - initialize: function (options) { + initialize(options) { if (!options) var options = {}; this.view = options.view || null; this.id = options.id || null; @@ -25,14 +25,14 @@ define([ click: "download", }, - render: function () { - var fileName = this.model.get("fileName") || ""; + render() { + let fileName = this.model.get("fileName") || ""; - if (typeof fileName == "string") { + if (typeof fileName === "string") { fileName = fileName.trim(); } - //Add the href and id attributes + // Add the href and id attributes let hrefLink = this.model.get("url"); if ( this.model instanceof DataONEObject && @@ -54,7 +54,7 @@ define([ .attr("data-id", this.model.get("id")) .attr("download", fileName); - //Check for CORS downloads. For CORS, the 'download' attribute may not work, + // Check for CORS downloads. For CORS, the 'download' attribute may not work, // so open in a new tab. if ( typeof hrefLink !== "undefined" && @@ -63,7 +63,7 @@ define([ this.$el.attr("target", "_blank"); } - //For packages + // For packages if (typeof this.view !== "undefined" && this.view == "actionsView") { this.$el.append( $(document.createElement("i")).addClass( @@ -77,7 +77,7 @@ define([ if (this.model.type == "Package") { this.$el.text("Download All").addClass("btn-primary"); - //if the Package Model has no Solr index document associated with it, then we + // if the Package Model has no Solr index document associated with it, then we // can assume the resource map object is private. So disable the download button. if (!this.model.get("indexDoc")) { this.$el @@ -93,18 +93,18 @@ define([ }); } } - //For individual DataONEObjects + // For individual DataONEObjects else { this.$el.text("Download"); } - //Add a download icon + // Add a download icon this.$el.append( $(document.createElement("i")).addClass("icon icon-cloud-download"), ); } - //If this is a Download All button for a package but it's too large, then disable the button with a message + // If this is a Download All button for a package but it's too large, then disable the button with a message if ( this.model.type == "Package" && this.model.getTotalSize() > MetacatUI.appModel.get("maxDownloadSize") @@ -128,12 +128,11 @@ define([ } }, - download: function (e) { + download(e) { // Checking if the Download All button is disabled because the package is too large - var isDownloadDisabled = + const isDownloadDisabled = !!( this.$el.attr("disabled") === "disabled" || this.$el.is(".disabled") - ? true - : false; + ); // Do nothing if the `disabled` attribute is set!. // If the download is already in progress, don't try to download again @@ -142,41 +141,38 @@ define([ return; } - //If the user isn't logged in, let the browser handle the download normally + // If the user isn't logged in, let the browser handle the download normally if ( MetacatUI.appUserModel.get("tokenChecked") && !MetacatUI.appUserModel.get("loggedIn") ) { return; } - //If the authentication hasn't been checked yet, wait for it - else if (!MetacatUI.appUserModel.get("tokenChecked")) { - var view = this; - this.listenTo( - MetacatUI.appUserModel, - "change:tokenChecked", - function () { - view.download(e); - }, - ); + // If the authentication hasn't been checked yet, wait for it + if (!MetacatUI.appUserModel.get("tokenChecked")) { + const view = this; + this.listenTo(MetacatUI.appUserModel, "change:tokenChecked", () => { + view.download(e); + }); return; } - //If the user is logged in but the object is public, download normally - else if (this.model.get("isPublic")) { - //If this is a "Download All" button for a package, and at least object is private, then + // If the user is logged in but the object is public, download normally + if (this.model.get("isPublic")) { + // If this is a "Download All" button for a package, and at least object is private, then // we need to download via XHR with credentials if (this.model.type == "Package") { - //If we found a private object, download the package via XHR so we can send the auth token. - var privateObject = _.find(this.model.get("members"), function (m) { - return m.get("isPublic") !== true; - }); - //If no private object is found, download normally. + // If we found a private object, download the package via XHR so we can send the auth token. + const privateObject = _.find( + this.model.get("members"), + (m) => m.get("isPublic") !== true, + ); + // If no private object is found, download normally. // This may still fail when there is a private object that the logged-in user doesn't have access to. if (!privateObject) { return; } } - //All other object types (data and metadata objects) can be downloaded normally + // All other object types (data and metadata objects) can be downloaded normally else { return; } @@ -184,9 +180,9 @@ define([ e.preventDefault(); - //Show that the download has started + // Show that the download has started this.$el.addClass("in-progress"); - var buttonHTML = this.$el.html(); + const buttonHTML = this.$el.html(); if (typeof this.view !== "undefined" && this.view == "actionsView") { this.$el.html( "", @@ -197,9 +193,9 @@ define([ ); } - var thisRef = this; + const thisRef = this; - this.listenToOnce(this.model, "downloadComplete", function () { + this.listenToOnce(this.model, "downloadComplete", () => { let iconEl = ""; let downloadEl = ""; @@ -208,27 +204,27 @@ define([ downloadEl = buttonHTML; } - //Show that the download is complete + // Show that the download is complete thisRef.$el .html(iconEl) .addClass("complete") .removeClass("in-progress error"); - //Put the download button back to normal - setTimeout(function () { - //After one second, change the background color with an animation + // Put the download button back to normal + setTimeout(() => { + // After one second, change the background color with an animation thisRef.$el.removeClass("complete").html(downloadEl); }, 2000); }); - this.listenToOnce(this.model, "downloadError", function () { + this.listenToOnce(this.model, "downloadError", () => { let iconEl = ""; if (thisRef.view != "actionsView") { iconEl += "Error "; } - //Show that the download failed to compelete. + // Show that the download failed to compelete. thisRef.$el .html(iconEl) .addClass("error") @@ -241,7 +237,7 @@ define([ }); }); - //Fire the download event via the SolrResult model + // Fire the download event via the SolrResult model this.model.downloadWithCredentials(); }, }); diff --git a/src/js/views/MetadataIndexView.js b/src/js/views/MetadataIndexView.js index b9192035b..3ee33ea9d 100644 --- a/src/js/views/MetadataIndexView.js +++ b/src/js/views/MetadataIndexView.js @@ -10,7 +10,7 @@ define([ "text!templates/alert.html", "text!templates/attribute.html", "text!templates/dataDisplay.html", -], function ( +], ( $, _, Backbone, @@ -22,8 +22,8 @@ define([ alertTemplate, AttributeTemplate, DataDisplayTemplate, -) { - var MetadataIndexView = Backbone.View.extend({ +) => { + const MetadataIndexView = Backbone.View.extend({ type: "MetadataIndex", id: "Metadata", @@ -46,9 +46,9 @@ define([ events: {}, - initialize: function (options) { + initialize(options) { this.pid = options.pid || null; - //this.el.id = this.id + "-" + this.pid; //Give this element a specific ID in case multiple MetadataIndex views are on one page + // this.el.id = this.id + "-" + this.pid; //Give this element a specific ID in case multiple MetadataIndex views are on one page this.parentView = options.parentView || null; // use these to tailor the annotation ui widget @@ -63,30 +63,29 @@ define([ }; }, - render: function () { + render() { if (!this.pid) return false; - var view = this; + const view = this; - //Get all the fields from the Solr index - var query = - 'q=(id:"' + - encodeURIComponent(this.pid) + - '"+OR+seriesId:"' + - encodeURIComponent(this.pid) + - '")&rows=1&start=0&fl=*&wt=json'; + // Get all the fields from the Solr index + const query = `q=(id:"${encodeURIComponent( + this.pid, + )}"+OR+seriesId:"${encodeURIComponent( + this.pid, + )}")&rows=1&start=0&fl=*&wt=json`; var requestSettings = { url: MetacatUI.appModel.get("queryServiceUrl") + query, - success: function (data, textStatus, xhr) { + success(data, textStatus, xhr) { try { if (!data?.response?.numFound) { if (view.parentView && view.parentView.model) { - //Show a "not indexed" message if there is system metadata but nothing in + // Show a "not indexed" message if there is system metadata but nothing in // the index if (view.parentView.model.get("systemMetadata")) { view.showNotIndexed(); } - //Show a "not found" message if there is no system metadata and no results in the index + // Show a "not found" message if there is no system metadata and no results in the index else { view.parentView.model.set("notFound", true); view.parentView.showNotFound(); @@ -97,8 +96,8 @@ define([ } else { view.docs = data.response.docs; - _.each(data.response.docs, function (doc, i, list) { - //If this is a data object and there is a science metadata doc that describes it, then navigate to that Metadata View. + _.each(data.response.docs, (doc, i, list) => { + // If this is a data object and there is a science metadata doc that describes it, then navigate to that Metadata View. if ( doc.formatType == "DATA" && doc.isDocumentedBy && @@ -106,26 +105,26 @@ define([ ) { view.onClose(); MetacatUI.uiRouter.navigate( - "view/" + doc.isDocumentedBy[0], + `view/${doc.isDocumentedBy[0]}`, true, ); return; } - var metadataEl = $(document.createElement("section")).attr( - "id", - "metadata-index-details", - ), - id = doc.id, - creator = doc.origin, - title = doc.title, - pubDate = doc.pubDate, - dateUploaded = doc.dateUploaded, - keys = Object.keys(doc), - docModel = new SolrResult(doc); - - //Extract General Info details that we want to list first - var generalInfoKeys = [ + const metadataEl = $(document.createElement("section")).attr( + "id", + "metadata-index-details", + ); + const { id } = doc; + const creator = doc.origin; + const { title } = doc; + const { pubDate } = doc; + const { dateUploaded } = doc; + let keys = Object.keys(doc); + const docModel = new SolrResult(doc); + + // Extract General Info details that we want to list first + const generalInfoKeys = [ "title", "id", "abstract", @@ -141,8 +140,8 @@ define([ ), ); - //Extract Spatial details - var spatialKeys = [ + // Extract Spatial details + const spatialKeys = [ "site", "southBoundCoord", "northBoundCoord", @@ -158,8 +157,8 @@ define([ ), ); - //Extract Temporal Coverage details - var temporalKeys = ["beginDate", "endDate"]; + // Extract Temporal Coverage details + const temporalKeys = ["beginDate", "endDate"]; keys = _.difference(keys, temporalKeys); $(metadataEl).append( view.formatAttributeSection( @@ -169,8 +168,8 @@ define([ ), ); - //Extract Taxonomic Coverage details - var taxonKeys = [ + // Extract Taxonomic Coverage details + const taxonKeys = [ "order", "phylum", "family", @@ -187,8 +186,8 @@ define([ ), ); - //Extract People details - var peopleKeys = [ + // Extract People details + const peopleKeys = [ "origin", "investigator", "contactOrganization", @@ -203,8 +202,8 @@ define([ ), ); - //Extract Access Control details - var accessKeys = [ + // Extract Access Control details + const accessKeys = [ "isPublic", "submitter", "rightsHolder", @@ -222,7 +221,7 @@ define([ ), ); - //Add the rest of the metadata + // Add the rest of the metadata $(metadataEl).append( view.formatAttributeSection(docModel, keys, "Other"), ); @@ -233,16 +232,14 @@ define([ }); } } catch (e) { - console.log("Error parsing Solr response: " + e); - console.log("Solr response: " + data); + console.log(`Error parsing Solr response: ${e}`); + console.log(`Solr response: ${data}`); view.parentView.showNotFound(); } }, - error: function () { - var msg = "

    Sorry, no dataset was found.

    "; - view.$el.html( - view.alertTemplate({ msg: msg, classes: "alert-danger" }), - ); + error() { + const msg = "

    Sorry, no dataset was found.

    "; + view.$el.html(view.alertTemplate({ msg, classes: "alert-danger" })); }, }; @@ -250,65 +247,64 @@ define([ _.extend(requestSettings, MetacatUI.appUserModel.createAjaxSettings()), ); - //Send a request for the EML doc itself to extract certain info + // Send a request for the EML doc itself to extract certain info if (this.parentView && this.parentView.model) { - var formatId = this.parentView.model.get("formatId"); + const formatId = this.parentView.model.get("formatId"); if (formatId.indexOf("eml://") >= 0) { - var url = + const url = `${ MetacatUI.appModel.get("baseUrl") + MetacatUI.appModel.get("context") + - MetacatUI.appModel.get("d1Service") + - "/object/" + - encodeURIComponent(this.parentView.model.get("id")); + MetacatUI.appModel.get("d1Service") + }/object/${encodeURIComponent(this.parentView.model.get("id"))}`; var requestSettings = { - url: url, - success: function (data, textStatus, xhr) { + url, + success(data, textStatus, xhr) { if (!data || !$(data).length) return; - //Find the distribution information - var emlDoc = $(data) + // Find the distribution information + const emlDoc = $(data) .find("distribution") - .each(function (i, dist) { - var onlineDist = $(dist).children("online"); + .each((i, dist) => { + const onlineDist = $(dist).children("online"); if (onlineDist.length) { var linkText = $(onlineDist).text(); if (linkText.indexOf("ecogrid") >= 0) { - //Clean up the link text - var start = linkText.lastIndexOf("/"); - var ecogridPid = linkText.substr(start + 1).trim(), - dataObjects = []; + // Clean up the link text + const start = linkText.lastIndexOf("/"); + const ecogridPid = linkText.substr(start + 1).trim(); + let dataObjects = []; - //Iterate over each id in the package and try to fuzzily match the ecogrid link to the id + // Iterate over each id in the package and try to fuzzily match the ecogrid link to the id if (view.parentView.packageModels) { - //Get all the data objects in this metadata's packages - _.each(view.parentView.packageModels, function (pckg) { + // Get all the data objects in this metadata's packages + _.each(view.parentView.packageModels, (pckg) => { dataObjects.push(pckg.get("members")); }); dataObjects = _.flatten(dataObjects); } for (var i = 0; i < dataObjects.length; i++) { - //If we find a match, replace the ecogrid links with a DataONE API link to the object + // If we find a match, replace the ecogrid links with a DataONE API link to the object if (dataObjects[i].get("id").indexOf(ecogridPid) > -1) { var linkText = dataObjects[i].get("url"); - //We can stop looking now + // We can stop looking now i = dataObjects.length; } } } - var link = $(document.createElement("a")) - .attr("href", linkText) - .text(linkText), - fullHTML = view.formatAttribute( - "Online Distribution Info", - link, - ); + const link = $(document.createElement("a")) + .attr("href", linkText) + .text(linkText); + const fullHTML = view.formatAttribute( + "Online Distribution Info", + link, + ); - //Find the "General" section of this page + // Find the "General" section of this page if (view.$(".General").length) view.$(".General").after(fullHTML); else view.$el.append(fullHTML); @@ -329,7 +325,7 @@ define([ return this; }, - formatAttributeSection: function (doc, keys, title, className) { + formatAttributeSection(doc, keys, title, className) { if (keys.length == 0) return ""; if (typeof title === "string") { @@ -343,15 +339,15 @@ define([ var titleText = titleHTML.text(); } - var html = "", - sectionClass = - typeof className === "undefined" - ? titleText.replace(/ /g, "") - : className, - view = this, - populated = false; + let html = ""; + const sectionClass = + typeof className === "undefined" + ? titleText.replace(/ /g, "") + : className; + const view = this; + let populated = false; - _.each(keys, function (key, keyNum, list) { + _.each(keys, (key, keyNum, list) => { if (typeof key === "object" && doc.get(key.field)) { html += view.formatAttribute(key.display, doc.get(key.field)); populated = true; @@ -362,37 +358,38 @@ define([ }); if (populated) { - var section = $(document.createElement("section")) + const section = $(document.createElement("section")) .addClass(sectionClass) .append(titleHTML) .append(html); return section; - } else return null; + } + return null; }, - formatAttribute: function (attribute, value) { - var html = "", - view = this, - embeddedAttributes = "", - type = "sem_annotation"; + formatAttribute(attribute, value) { + let html = ""; + const view = this; + let embeddedAttributes = ""; + let type = "sem_annotation"; // see if there is special handling for this field if (this.semanticFields[attribute]) { type = this.semanticFields[attribute]; } - //If this is a multi-valued field from Solr, the attribute value is actually multiple embedded attribute templates - var numAttributes = + // If this is a multi-valued field from Solr, the attribute value is actually multiple embedded attribute templates + const numAttributes = Array.isArray(value) && value.length > 1 ? value.length : 0; - for (var i = 0; i < numAttributes; i++) { + for (let i = 0; i < numAttributes; i++) { embeddedAttributes += view.attributeTemplate({ attribute: "", formattedAttribute: view.transformCamelCase(attribute), value: value[i].toString(), - id: attribute + "_" + (i + 1), - type: type, - resource: "#xpointer(//" + attribute + "[" + (i + 1) + "])", + id: `${attribute}_${i + 1}`, + type, + resource: `#xpointer(//${attribute}[${i + 1}])`, }); } @@ -401,39 +398,39 @@ define([ } html += view.attributeTemplate({ - attribute: attribute, + attribute, formattedAttribute: view.transformCamelCase(attribute), value: embeddedAttributes || value.toString(), id: attribute, - type: type, - resource: "#xpointer(//" + attribute + ")", + type, + resource: `#xpointer(//${attribute})`, }); return html; }, - transformCamelCase: function (string) { - var result = string + transformCamelCase(string) { + const result = string .replace(/([A-Z]+)/g, " $1") .replace(/([A-Z][a-z])/g, " $1"); - var finalResult = result.charAt(0).toUpperCase() + result.slice(1); + const finalResult = result.charAt(0).toUpperCase() + result.slice(1); return finalResult; }, - insertDataDetails: function () { - var view = this; + insertDataDetails() { + const view = this; - //Get the Package Model - it is attached with the parent Metadata View - var pkg = this.parentView.packageModel; + // Get the Package Model - it is attached with the parent Metadata View + const pkg = this.parentView.packageModel; if (!pkg) return; if (pkg.get("members").length <= 1) return; - //Start some html - var html = $(document.createElement("section")); + // Start some html + const html = $(document.createElement("section")); - _.each(pkg.get("members"), function (solrResult, i) { + _.each(pkg.get("members"), (solrResult, i) => { if (solrResult.get("formatType") != "DATA") return; solrResult.set( @@ -441,8 +438,8 @@ define([ Utilities.bytesToSize(solrResult.get("size")), ); - //Add a section for the data details, just like the other attribute sections - var keys = [ + // Add a section for the data details, just like the other attribute sections + const keys = [ "id", { field: "formattedSize", display: "size" }, "views", @@ -451,42 +448,42 @@ define([ "formatId", ]; - //Determine the icon type based on format id - var type = solrResult.getType(), - icon = ""; + // Determine the icon type based on format id + const type = solrResult.getType(); + var icon = ""; if (type == "program") icon = "icon-code"; else if (type == "metadata") icon = "icon-file-text"; else if (type == "image") icon = "icon-picture"; else if (type == "pdf") icon = "icon-file pdf"; else icon = "icon-table"; - var icon = $(document.createElement("i")).addClass(icon), - title = $(document.createElement("span")) - .text(solrResult.get("id")) - .addClass("title"), - downloadBtn = new DownloadButtonView({ model: solrResult }), - anchor = $(document.createElement("a")).attr( - "name", - encodeURIComponent(solrResult.get("id")), - ), - header = $(document.createElement("h4")) - .append(anchor) - .append(icon) - .append(title) - .append(downloadBtn.render().el); - - //Create the section - var entityDetailsSection = view + var icon = $(document.createElement("i")).addClass(icon); + const title = $(document.createElement("span")) + .text(solrResult.get("id")) + .addClass("title"); + const downloadBtn = new DownloadButtonView({ model: solrResult }); + const anchor = $(document.createElement("a")).attr( + "name", + encodeURIComponent(solrResult.get("id")), + ); + const header = $(document.createElement("h4")) + .append(anchor) + .append(icon) + .append(title) + .append(downloadBtn.render().el); + + // Create the section + const entityDetailsSection = view .formatAttributeSection(solrResult, keys, header, "entitydetails") .attr("data-id", solrResult.get("id")); - //Create an image thumbnail, if this is an image + // Create an image thumbnail, if this is an image if (type == "image") { - //var thumbnail = view.parentView.createThumbnail(solrResult.get("id")); - //$(entityDetailsSection).prepend(thumbnail); + // var thumbnail = view.parentView.createThumbnail(solrResult.get("id")); + // $(entityDetailsSection).prepend(thumbnail); } - //Mark this section with an anchor tag with the doc id + // Mark this section with an anchor tag with the doc id $(entityDetailsSection).prepend( $(document.createElement("a")).attr( "id", @@ -497,19 +494,19 @@ define([ $(html).append(entityDetailsSection); }); - //Glue together the header and attribute info section - var header = $(document.createElement("h4")).text( + // Glue together the header and attribute info section + const header = $(document.createElement("h4")).text( "Data Table, Image, and Other Data Details", ); - var section = $(html).prepend(header); + const section = $(html).prepend(header); - //Insert into the DOM right after the "general" information + // Insert into the DOM right after the "general" information this.$(".General").after(section); }, - //Shows a message to the user that indicates this object has not been indexed - showNotIndexed: function () { - var message = this.alertTemplate({ + // Shows a message to the user that indicates this object has not been indexed + showNotIndexed() { + const message = this.alertTemplate({ classes: "alert-warning", msg: "

    There is limited information about this content.

    " + @@ -520,44 +517,44 @@ define([ }); this.$el.append(message); - //If this metadata doc is not indexed, we need to search the system metadata - //to see if it is publicly accessible. + // If this metadata doc is not indexed, we need to search the system metadata + // to see if it is publicly accessible. if (this.parentView && this.parentView.model) { - //Get the system metadata string - var sysMeta = this.parentView.model.get("systemMetadata"); + // Get the system metadata string + let sysMeta = this.parentView.model.get("systemMetadata"); if (sysMeta) { - //Parse it into XML nodes + // Parse it into XML nodes sysMeta = $.parseXML(sysMeta); - //Find the allow permission for the public - var publicPermission = $(sysMeta).find( + // Find the allow permission for the public + const publicPermission = $(sysMeta).find( "allow subject:contains('public')", ); if (publicPermission.length) { - //Remove the "private" icon + // Remove the "private" icon $("#metadata-controls-container .private").remove(); } } - //If there is no system metadata, default to hiding the private icon + // If there is no system metadata, default to hiding the private icon else { $("#metadata-controls-container .private").remove(); } } }, - flagComplete: function () { + flagComplete() { this.complete = true; this.trigger("complete"); }, - onClose: function () { + onClose() { this.$el.html(this.loadingTemplate()); this.pid = null; - //Detach this view from its parent view + // Detach this view from its parent view this.parentView.subviews = _.without(this.parentView.subviews, this); this.parentView = null; - //Remove listeners + // Remove listeners this.stopListening(); }, }); diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js index 793f43d1b..341117d6a 100644 --- a/src/js/views/MetadataView.js +++ b/src/js/views/MetadataView.js @@ -38,7 +38,7 @@ define([ "text!templates/metaTagsHighwirePress.html", "uuid", "views/MetricView", -], function ( +], ( $, $ui, _, @@ -78,18 +78,18 @@ define([ metaTagsHighwirePressTemplate, uuid, MetricView, -) { +) => { "use strict"; /** * @class MetadataView * @classdesc A human-readable view of a science metadata file * @classcategory Views - * @extends Backbone.View - * @constructor + * @augments Backbone.View + * @class * @screenshot views/MetadataView.png */ - var MetadataView = Backbone.View.extend( + const MetadataView = Backbone.View.extend( /** @lends MetadataView.prototype */ { subviews: [], @@ -116,7 +116,7 @@ define([ type: "Metadata", - //Templates + // Templates template: _.template(MetadataTemplate), alertTemplate: _.template(AlertTemplate), doiTemplate: _.template(PublishDoiTemplate), @@ -156,7 +156,7 @@ define([ "click #save-metadata-prov": "saveProv", }, - initialize: function (options) { + initialize(options) { if (options === undefined || !options) var options = {}; this.pid = @@ -168,13 +168,13 @@ define([ }, // Render the main metadata view - render: function () { + render() { this.stopListening(); MetacatUI.appModel.set("headerType", "default"); // this.showLoading("Loading..."); - //Reset various properties of this view first + // Reset various properties of this view first this.classMap = new Array(); this.subviews = new Array(); this.model.set(this.model.defaults); @@ -185,18 +185,18 @@ define([ this.listenTo(MetacatUI.appUserModel, "change:loggedIn", this.render); - //Listen to when the metadata has been rendered + // Listen to when the metadata has been rendered this.once("metadataLoaded", function () { this.createAnnotationViews(); this.insertMarkdownViews(); }); - //Listen to when the package table has been rendered + // Listen to when the package table has been rendered this.once("dataPackageRendered", function () { - var packageTableContainer = this.$("#data-package-container"); + const packageTableContainer = this.$("#data-package-container"); $(packageTableContainer).children(".loading").remove(); - //Scroll to the element on the page that is in the hash fragment (if there is one) + // Scroll to the element on the page that is in the hash fragment (if there is one) this.scrollToFragment(); }); @@ -211,11 +211,11 @@ define([ * table view, if there is one. * @param {string} pid - The PID of the resource map */ - getDataPackage: function (pid) { - //Create a DataONEObject model to use in the DataPackage collection. - var dataOneObject = new ScienceMetadata({ id: this.model.get("id") }); + getDataPackage(pid) { + // Create a DataONEObject model to use in the DataPackage collection. + const dataOneObject = new ScienceMetadata({ id: this.model.get("id") }); - var view = this; + const view = this; // Create a new data package with this id this.dataPackage = new DataPackage([dataOneObject], { id: pid }); @@ -235,7 +235,7 @@ define([ this.listenToOnce(this.dataPackage, "complete", function () { this.dataPackageSynced = true; this.trigger("changed:dataPackageSynced"); - var dataPackageView = _.findWhere(this.subviews, { + const dataPackageView = _.findWhere(this.subviews, { type: "DataPackage", }); if (dataPackageView) { @@ -244,16 +244,16 @@ define([ } }); - this.listenToOnce(this.dataPackage, "fetchFailed", function () { + this.listenToOnce(this.dataPackage, "fetchFailed", () => { view.dataPackageSynced = false; // stop listening to the fetch complete view.stopListening(view.dataPackage, "complete"); - //Remove the loading elements + // Remove the loading elements view.$(view.tableContainer).find(".loading").remove(); - //Show an error message + // Show an error message MetacatUI.appView.showAlert( "Error retrieving files for this data package.", "alert-error", @@ -281,15 +281,15 @@ define([ * Retrieves information from the index about this object, given the id (passed from the URL) * When the object info is retrieved from the index, we set up models depending on the type of object this is */ - getModel: function (pid) { - //Get the pid and sid - if (typeof pid === "undefined" || !pid) var pid = this.pid; + getModel(pid) { + // Get the pid and sid + if (typeof pid === "undefined" || !pid) var { pid } = this; if (typeof this.seriesId !== "undefined" && this.seriesId) var sid = this.seriesId; - //Get the package ID + // Get the package ID this.model.set({ id: pid, seriesId: sid }); - var model = this.model; + const { model } = this; this.listenToOnce(model, "sync", function () { if ( @@ -299,94 +299,89 @@ define([ this.model = model; this.renderMetadata(); } else if (this.model.get("formatType") == "DATA") { - //Get the metadata pids that document this data object - var isDocBy = this.model.get("isDocumentedBy"); + // Get the metadata pids that document this data object + const isDocBy = this.model.get("isDocumentedBy"); - //If there is only one metadata pid that documents this data object, then + // If there is only one metadata pid that documents this data object, then // get that metadata model for this view. if (isDocBy && isDocBy.length == 1) { this.navigateWithFragment(_.first(isDocBy), this.pid); return; } - //If more than one metadata doc documents this data object, it is most likely + // If more than one metadata doc documents this data object, it is most likely // multiple versions of the same metadata. So we need to find the latest version. - else if (isDocBy && isDocBy.length > 1) { - var view = this; - - require([ - "collections/Filters", - "collections/SolrResults", - ], function (Filters, SolrResults) { - //Create a search for the metadata docs that document this data object - var searchFilters = new Filters([ - { - values: isDocBy, - fields: ["id", "seriesId"], - operator: "OR", - fieldsOperator: "OR", - matchSubstring: false, - }, - ]), - //Create a list of search results - searchResults = new SolrResults([], { - rows: isDocBy.length, - query: searchFilters.getQuery(), - fields: "obsoletes,obsoletedBy,id", - }); + if (isDocBy && isDocBy.length > 1) { + const view = this; + + require(["collections/Filters", "collections/SolrResults"], ( + Filters, + SolrResults, + ) => { + // Create a search for the metadata docs that document this data object + const searchFilters = new Filters([ + { + values: isDocBy, + fields: ["id", "seriesId"], + operator: "OR", + fieldsOperator: "OR", + matchSubstring: false, + }, + ]); + // Create a list of search results + const searchResults = new SolrResults([], { + rows: isDocBy.length, + query: searchFilters.getQuery(), + fields: "obsoletes,obsoletedBy,id", + }); - //When the search results are returned, process those results - view.listenToOnce( - searchResults, - "sync", - function (searchResults) { - //Keep track of the latest version of the metadata doc(s) - var latestVersions = []; - - //Iterate over each search result and find the latest version of each metadata version chain - searchResults.each(function (searchResult) { - //If this metadata isn't obsoleted by another object, it is the latest version - if (!searchResult.get("obsoletedBy")) { - latestVersions.push(searchResult.get("id")); - } - //If it is obsoleted by another object but that newer object does not document this data, then this is the latest version - else if ( - !_.contains(isDocBy, searchResult.get("obsoletedBy")) - ) { - latestVersions.push(searchResult.get("id")); - } - }, view); - - //If at least one latest version was found (should always be the case), - if (latestVersions.length) { - //Set that metadata pid as this view's pid and get that metadata model. - // TODO: Support navigation to multiple metadata docs. This should be a rare occurence, but - // it is possible that more than one metadata version chain documents a data object, and we need - // to show the user that the data is involved in multiple datasets. - view.navigateWithFragment(latestVersions[0], view.pid); + // When the search results are returned, process those results + view.listenToOnce(searchResults, "sync", (searchResults) => { + // Keep track of the latest version of the metadata doc(s) + const latestVersions = []; + + // Iterate over each search result and find the latest version of each metadata version chain + searchResults.each((searchResult) => { + // If this metadata isn't obsoleted by another object, it is the latest version + if (!searchResult.get("obsoletedBy")) { + latestVersions.push(searchResult.get("id")); } - //If a latest version wasn't found, which should never happen, but just in case, default to the - // last metadata pid in the isDocumentedBy field (most liekly to be the most recent since it was indexed last). - else { - view.navigateWithFragment(_.last(isDocBy), view.pid); + // If it is obsoleted by another object but that newer object does not document this data, then this is the latest version + else if ( + !_.contains(isDocBy, searchResult.get("obsoletedBy")) + ) { + latestVersions.push(searchResult.get("id")); } - }, - ); + }, view); + + // If at least one latest version was found (should always be the case), + if (latestVersions.length) { + // Set that metadata pid as this view's pid and get that metadata model. + // TODO: Support navigation to multiple metadata docs. This should be a rare occurence, but + // it is possible that more than one metadata version chain documents a data object, and we need + // to show the user that the data is involved in multiple datasets. + view.navigateWithFragment(latestVersions[0], view.pid); + } + // If a latest version wasn't found, which should never happen, but just in case, default to the + // last metadata pid in the isDocumentedBy field (most liekly to be the most recent since it was indexed last). + else { + view.navigateWithFragment(_.last(isDocBy), view.pid); + } + }); - //Send the query to the Solr search service + // Send the query to the Solr search service searchResults.query(); }); return; - } else { - this.noMetadata(this.model); } + this.noMetadata(this.model); } else if (this.model.get("formatType") == "RESOURCE") { - var packageModel = new Package({ id: this.model.get("id") }); + const packageModel = new Package({ id: this.model.get("id") }); packageModel.on( "complete", function () { - var metadata = packageModel.getMetadata(); + const metadata = packageModel.getMetadata(); if (!metadata) { this.noMetadata(packageModel); @@ -404,23 +399,23 @@ define([ return; } - //Get the package information + // Get the package information this.getPackageDetails(model.get("resourceMap")); }); - //Listen to 404 and 401 errors when we get the metadata object + // Listen to 404 and 401 errors when we get the metadata object this.listenToOnce(model, "404", this.showNotFound); this.listenToOnce(model, "401", this.showIsPrivate); - //Fetch the model + // Fetch the model model.getInfo(); }, - renderMetadata: function () { - var pid = this.model.get("id"); + renderMetadata() { + const pid = this.model.get("id"); this.hideLoading(); - //Load the template which holds the basic structure of the view + // Load the template which holds the basic structure of the view this.$el.html(this.template()); this.$(this.tableContainer).html( this.loadingTemplate({ @@ -428,11 +423,11 @@ define([ }), ); - //Insert the breadcrumbs + // Insert the breadcrumbs this.insertBreadcrumbs(); - //Insert the citation + // Insert the citation this.insertCitation(); - //Insert the data source logo + // Insert the data source logo this.insertDataSource(); // is this the latest version? (includes DOI link when needed) this.showLatestVersion(); @@ -443,11 +438,11 @@ define([ // If we're displaying the metrics well then display copy citation and edit button // inside the well if (MetacatUI.appModel.get("displayDatasetMetrics")) { - //Insert Metrics Stats into the dataset landing pages + // Insert Metrics Stats into the dataset landing pages this.insertMetricsControls(); } - //Show loading icon in metadata section + // Show loading icon in metadata section this.$(this.metadataContainer).html( this.loadingTemplate({ msg: "Retrieving metadata ..." }), ); @@ -461,15 +456,15 @@ define([ MetacatUI.appModel.get("viewServiceUrl") + encodeURIComponent(pid); if (endpoint && typeof endpoint !== "undefined") { - var viewRef = this; - var loadSettings = { + const viewRef = this; + const loadSettings = { url: endpoint, - success: function (response, status, xhr) { + success(response, status, xhr) { try { - //If the user has navigated away from the MetadataView, then don't render anything further + // If the user has navigated away from the MetadataView, then don't render anything further if (MetacatUI.appView.currentView != viewRef) return; - //Our fallback is to show the metadata details from the Solr index + // Our fallback is to show the metadata details from the Solr index if ( status == "error" || !response || @@ -477,7 +472,7 @@ define([ ) viewRef.renderMetadataFromIndex(); else { - //Check for a response that is a 200 OK status, but is an error msg + // Check for a response that is a 200 OK status, but is an error msg if ( response.length < 250 && response.indexOf("Error transforming document") > -1 && @@ -486,8 +481,8 @@ define([ viewRef.renderMetadataFromIndex(); return; } - //Mark this as a metadata doc with no stylesheet, or one that is at least different than usual EML and FGDC - else if (response.indexOf('id="Metadata"') == -1) { + // Mark this as a metadata doc with no stylesheet, or one that is at least different than usual EML and FGDC + if (response.indexOf('id="Metadata"') == -1) { viewRef.$el.addClass("container no-stylesheet"); if (viewRef.model.get("indexed")) { @@ -496,12 +491,10 @@ define([ } } - //Now show the response from the view service + // Now show the response from the view service viewRef.$(viewRef.metadataContainer).html(response); - viewRef.storeEntityPIDs(response); - - //If there is no info from the index and there is no metadata doc rendered either, then display a message + // If there is no info from the index and there is no metadata doc rendered either, then display a message if ( viewRef.$el.is(".no-stylesheet") && viewRef.model.get("archived") && @@ -517,7 +510,7 @@ define([ viewRef.trigger("metadataLoaded"); - //Add a map of the spatial coverage + // Add a map of the spatial coverage if (gmaps) viewRef.insertSpatialCoverageMap(); // Injects Clipboard objects into DOM elements returned from the View Service @@ -532,7 +525,7 @@ define([ viewRef.renderMetadataFromIndex(); } }, - error: function (xhr, textStatus, errorThrown) { + error(xhr, textStatus, errorThrown) { viewRef.renderMetadataFromIndex(); }, }; @@ -544,7 +537,7 @@ define([ // Insert the Linked Data into the header of the page. if (MetacatUI.appModel.get("isJSONLDEnabled")) { - var json = this.generateJSONLD(); + const json = this.generateJSONLD(); this.insertJSONLD(json); } @@ -552,76 +545,76 @@ define([ }, /* If there is no view service available, then display the metadata fields from the index */ - renderMetadataFromIndex: function () { - var metadataFromIndex = new MetadataIndex({ + renderMetadataFromIndex() { + const metadataFromIndex = new MetadataIndex({ pid: this.pid, parentView: this, }); this.subviews.push(metadataFromIndex); - //Add the metadata HTML + // Add the metadata HTML this.$(this.metadataContainer).html(metadataFromIndex.render().el); - var view = this; + const view = this; - this.listenTo(metadataFromIndex, "complete", function () { - //Add the package contents + this.listenTo(metadataFromIndex, "complete", () => { + // Add the package contents view.insertPackageDetails(); - //Add a map of the spatial coverage + // Add a map of the spatial coverage if (gmaps) view.insertSpatialCoverageMap(); }); }, - removeCitation: function () { - var citation = "", - citationEl = null; + removeCitation() { + let citation = ""; + let citationEl = null; - //Find the citation element + // Find the citation element if (this.$(".citation").length > 0) { - //Get the text for the citation + // Get the text for the citation citation = this.$(".citation").text(); - //Save this element in the view + // Save this element in the view citationEl = this.$(".citation"); } - //Older versions of Metacat (v2.4.3 and older) will not have the citation class in the XSLT. Find the citation another way + // Older versions of Metacat (v2.4.3 and older) will not have the citation class in the XSLT. Find the citation another way else { - //Find the DOM element with the citation - var wells = this.$(".well"), - viewRef = this; + // Find the DOM element with the citation + const wells = this.$(".well"); + const viewRef = this; - //Find the div.well with the citation. If we never find it, we don't insert the list of contents - _.each(wells, function (well) { + // Find the div.well with the citation. If we never find it, we don't insert the list of contents + _.each(wells, (well) => { if ( (!citationEl && $(well).find("#viewMetadataCitationLink").length > 0) || $(well).children(".row-fluid > .span10 > a") ) { - //Save this element in the view + // Save this element in the view citationEl = well; - //Mark this in the DOM for CSS styling + // Mark this in the DOM for CSS styling $(well).addClass("citation"); - //Save the text of the citation + // Save the text of the citation citation = $(well).text(); } }); - //Remove the unnecessary classes that are used in older versions of Metacat (2.4.3 and older) - var citationText = $(citationEl).find(".span10"); + // Remove the unnecessary classes that are used in older versions of Metacat (2.4.3 and older) + const citationText = $(citationEl).find(".span10"); $(citationText).removeClass("span10").addClass("span12"); } - //Set the document title to the citation + // Set the document title to the citation MetacatUI.appModel.set("title", citation); citationEl.remove(); }, - insertBreadcrumbs: function () { - var breadcrumbs = $(document.createElement("ol")) + insertBreadcrumbs() { + const breadcrumbs = $(document.createElement("ol")) .addClass("breadcrumb") .append( $(document.createElement("li")) @@ -640,12 +633,13 @@ define([ $(document.createElement("a")) .attr( "href", - MetacatUI.root + - "/data" + - (MetacatUI.appModel.get("page") > 0 - ? "/page/" + - (parseInt(MetacatUI.appModel.get("page")) + 1) - : ""), + `${MetacatUI.root}/data${ + MetacatUI.appModel.get("page") > 0 + ? `/page/${ + parseInt(MetacatUI.appModel.get("page")) + 1 + }` + : "" + }`, ) .addClass("search") .text("Search"), @@ -656,7 +650,7 @@ define([ $(document.createElement("a")) .attr( "href", - MetacatUI.root + "/view/" + encodeURIComponent(this.pid), + `${MetacatUI.root}/view/${encodeURIComponent(this.pid)}`, ) .addClass("inactive") .text("Metadata"), @@ -668,11 +662,11 @@ define([ $(document.createElement("a")) .attr( "href", - MetacatUI.root + - "/data/page/" + - (MetacatUI.appModel.get("page") > 0 + `${MetacatUI.root}/data/page/${ + MetacatUI.appModel.get("page") > 0 ? parseInt(MetacatUI.appModel.get("page")) + 1 - : ""), + : "" + }`, ) .attr("title", "Back") .addClass("back") @@ -690,16 +684,16 @@ define([ /* * When the metadata object doesn't exist, display a message to the user */ - showNotFound: function () { - //If the model was found, exit this function + showNotFound() { + // If the model was found, exit this function if (!this.model.get("notFound")) { return; } try { - //Check if a query string was in the URL and if so, try removing it in the identifier + // Check if a query string was in the URL and if so, try removing it in the identifier if (this.model.get("id").match(/\?\S+\=\S+/g) && !this.findTries) { - let newID = this.model.get("id").replace(/\?\S+\=\S+/g, ""); + const newID = this.model.get("id").replace(/\?\S+\=\S+/g, ""); this.onClose(); this.model.set("id", newID); this.pid = newID; @@ -711,38 +705,38 @@ define([ console.warn("Caught error while determining query string", e); } - //Construct a message that shows this object doesn't exist - var msg = - "

    Nothing was found.

    " + - "

    The dataset identifier '" + - Utilities.encodeHTML(this.model.get("id")) + - "' " + - "does not exist or it may have been removed. Search for " + - "datasets that mention " + - Utilities.encodeHTML(this.model.get("id")) + - "

    "; + // Construct a message that shows this object doesn't exist + const msg = + `

    Nothing was found.

    ` + + `

    The dataset identifier '${Utilities.encodeHTML( + this.model.get("id"), + )}' ` + + `does not exist or it may have been removed. Search for ` + + `datasets that mention ${Utilities.encodeHTML( + this.model.get("id"), + )}

    `; - //Remove the loading message + // Remove the loading message this.hideLoading(); - //Show the not found error message + // Show the not found error message this.showError(msg); - //Add the pid to the link href. Add via JS so it is Attribute-encoded to prevent XSS attacks + // Add the pid to the link href. Add via JS so it is Attribute-encoded to prevent XSS attacks this.$("#metadata-view-not-found-message a").attr( "href", - MetacatUI.root + - "/data/query=" + - encodeURIComponent(this.model.get("id")), + `${MetacatUI.root}/data/query=${encodeURIComponent( + this.model.get("id"), + )}`, ); }, /* * When the metadata object is private, display a message to the user */ - showIsPrivate: function () { - //If we haven't checked the logged-in status of the user yet, wait a bit - //until we show a 401 msg, in case this content is their private content + showIsPrivate() { + // If we haven't checked the logged-in status of the user yet, wait a bit + // until we show a 401 msg, in case this content is their private content if (!MetacatUI.appUserModel.get("checked")) { this.listenToOnce( MetacatUI.appUserModel, @@ -752,7 +746,7 @@ define([ return; } - //If the user is logged in, the message will display that this dataset is private. + // If the user is logged in, the message will display that this dataset is private. if (MetacatUI.appUserModel.get("loggedIn")) { var msg = '' + " This is a private dataset."; } - //If the user isn't logged in, display a log in link. + // If the user isn't logged in, display a log in link. else { var msg = - '' + - '' + - '' + - " This is a private dataset. If you believe you have permission " + - 'to access this dataset, then sign in.'; + `` + + `` + + `` + + ` This is a private dataset. If you believe you have permission ` + + `to access this dataset, then sign in.`; } - //Remove the loading message + // Remove the loading message this.hideLoading(); - //Show the not found error message + // Show the not found error message this.showError(msg); }, - getPackageDetails: function (packageIDs) { - var completePackages = 0; + getPackageDetails(packageIDs) { + let completePackages = 0; - //This isn't a package, but just a lonely metadata doc... + // This isn't a package, but just a lonely metadata doc... if (!packageIDs || !packageIDs.length) { - var thisPackage = new Package({ id: null, members: [this.model] }); + const thisPackage = new Package({ id: null, members: [this.model] }); thisPackage.flagComplete(); this.packageModels = [thisPackage]; this.insertPackageDetails(thisPackage, { @@ -798,32 +790,30 @@ define([ _.each( packageIDs, function (thisPackageID, i) { - //Create a model representing the data package - var thisPackage = new Package({ id: thisPackageID }); + // Create a model representing the data package + const thisPackage = new Package({ id: thisPackageID }); - //Listen for any parent packages + // Listen for any parent packages this.listenToOnce( thisPackage, "change:parentPackageMetadata", this.insertParentLink, ); - //When the package info is fully retrieved + // When the package info is fully retrieved this.listenToOnce( thisPackage, "complete", function (thisPackage) { - //When all packages are fully retrieved + // When all packages are fully retrieved completePackages++; if (completePackages >= packageIDs.length) { - var latestPackages = _.filter( + const latestPackages = _.filter( this.packageModels, - function (m) { - return !_.contains(packageIDs, m.get("obsoletedBy")); - }, + (m) => !_.contains(packageIDs, m.get("obsoletedBy")), ); - //Set those packages as the most recent package + // Set those packages as the most recent package this.packageModels = latestPackages; this.insertPackageDetails(latestPackages); @@ -831,13 +821,13 @@ define([ }, ); - //Save the package in the view + // Save the package in the view this.packageModels.push(thisPackage); - //Make sure we get archived content, too + // Make sure we get archived content, too thisPackage.set("getArchivedMembers", true); - //Get the members + // Get the members thisPackage.getMembers({ getParentMetadata: true }); }, this, @@ -845,19 +835,19 @@ define([ } }, - alterMarkup: function () { - //Find the taxonomic range and give it a class for styling - for older versions of Metacat only (v2.4.3 and older) + alterMarkup() { + // Find the taxonomic range and give it a class for styling - for older versions of Metacat only (v2.4.3 and older) if (!this.$(".taxonomicCoverage").length) this.$('h4:contains("Taxonomic Range")') .parent() .addClass("taxonomicCoverage"); - //Remove ecogrid links and replace them with workable links + // Remove ecogrid links and replace them with workable links this.replaceEcoGridLinks(); - //Find the tab links for attribute names - this.$(".attributeListTable tr a").on("shown", function (e) { - //When the attribute link is clicked on, highlight the tab as active + // Find the tab links for attribute names + this.$(".attributeListTable tr a").on("shown", (e) => { + // When the attribute link is clicked on, highlight the tab as active $(e.target) .parents(".attributeListTable") .find(".active") @@ -865,7 +855,7 @@ define([ $(e.target).parents("tr").first().addClass("active"); }); - //Mark the first row in each attribute list table as active since the first attribute is displayed at first + // Mark the first row in each attribute list table as active since the first attribute is displayed at first this.$(".attributeListTable tr:first-child()").addClass("active"); // Add explanation text to the alternate identifier @@ -879,7 +869,7 @@ define([ * @returns {jQuery} The jQuery object for the icon element. * @since 2.26.0 */ - renderAltIdentifierHelpText: function () { + renderAltIdentifierHelpText() { try { // Find the HTML element that contains the alternate identifier. const altIdentifierLabel = this.$( @@ -917,17 +907,17 @@ define([ /* * Inserts a table with all the data package member information and sends the call to display annotations */ - insertPackageDetails: function (packages, options) { + insertPackageDetails(packages, options) { if (typeof options === "undefined") { var options = {}; } - //Don't insert the package details twice - var view = this; - var tableEls = this.$(view.tableContainer).children().not(".loading"); + // Don't insert the package details twice + const view = this; + const tableEls = this.$(view.tableContainer).children().not(".loading"); if (tableEls.length > 0) return; - //wait for the metadata to load - var metadataEls = this.$(view.metadataContainer).children(); + // wait for the metadata to load + const metadataEls = this.$(view.metadataContainer).children(); if (!metadataEls.length || metadataEls.first().is(".loading")) { this.once("metadataLoaded", function () { view.insertPackageDetails(this.packageModels, options); @@ -937,26 +927,26 @@ define([ if (!packages) var packages = this.packageModels; - //Get the entity names from this page/metadata + // Get the entity names from this page/metadata this.getEntityNames(packages); _.each( packages, function (packageModel) { - //If the package model is not complete, don't do anything + // If the package model is not complete, don't do anything if (!packageModel.complete) return; - //Insert a package table for each package in viewRef dataset - var nestedPckgs = packageModel.getNestedPackages(), - nestedPckgsToDisplay = []; + // Insert a package table for each package in viewRef dataset + const nestedPckgs = packageModel.getNestedPackages(); + let nestedPckgsToDisplay = []; - //If this metadata is not archived, filter out archived packages + // If this metadata is not archived, filter out archived packages if (!this.model.get("archived")) { - nestedPckgsToDisplay = _.reject(nestedPckgs, function (pkg) { - return pkg.get("archived"); - }); + nestedPckgsToDisplay = _.reject(nestedPckgs, (pkg) => + pkg.get("archived"), + ); } else { - //Display all packages is this metadata is archived + // Display all packages is this metadata is archived nestedPckgsToDisplay = nestedPckgs; } @@ -968,16 +958,16 @@ define([ ) ) { var title = packageModel.get("id") - ? 'Package: ' + - packageModel.get("id") + - "" + ? `Package: ${packageModel.get( + "id", + )}` : ""; - options.title = "Files in this dataset " + title; + options.title = `Files in this dataset ${title}`; options.nested = true; this.insertPackageTable(packageModel, options); } } else { - //If this metadata is not archived, then don't display archived packages + // If this metadata is not archived, then don't display archived packages if ( !( !this.model.get("archived") && @@ -985,24 +975,24 @@ define([ ) ) { var title = packageModel.get("id") - ? 'Package: ' + - packageModel.get("id") + - "" + ? `Package: ${packageModel.get( + "id", + )}` : ""; - options.title = "Files in this dataset " + title; + options.title = `Files in this dataset ${title}`; this.insertPackageTable(packageModel, options); } } - //Remove the extra download button returned from the XSLT since the package table will have all the download links + // Remove the extra download button returned from the XSLT since the package table will have all the download links $("#downloadPackage").remove(); }, this, ); - //If this metadata doc is not in a package, but is just a lonely metadata doc... + // If this metadata doc is not in a package, but is just a lonely metadata doc... if (!packages.length) { - var packageModel = new Package({ + const packageModel = new Package({ members: [this.model], }); packageModel.complete = true; @@ -1011,7 +1001,7 @@ define([ this.insertPackageTable(packageModel, options); } - //Insert the data details sections + // Insert the data details sections this.insertDataDetails(); // Get data package, if there is one, before checking write permissions @@ -1025,20 +1015,20 @@ define([ try { // Get the most recent package to display the provenance graphs if (packages.length) { - //Find the most recent Package model and fetch it + // Find the most recent Package model and fetch it let mostRecentPackage = _.find( packages, (p) => !p.get("obsoletedBy"), ); - //If all of the packages are obsoleted, then use the last package in the array, + // If all of the packages are obsoleted, then use the last package in the array, // which is most likely the most recent. /** @todo Use the DataONE version API to find the most recent package in the version chain */ if (!mostRecentPackage) { mostRecentPackage = packages[packages.length - 1]; } - //Get the data package only if it is not the same as the previously fetched package + // Get the data package only if it is not the same as the previously fetched package if (mostRecentPackage.get("id") != packages[0].get("id")) this.getDataPackage(mostRecentPackage.get("id")); } @@ -1049,16 +1039,16 @@ define([ ); } - //Initialize tooltips in the package table(s) + // Initialize tooltips in the package table(s) this.$(".tooltip-this").tooltip(); return this; }, - insertPackageTable: function (packageModel, options) { - var view = this; + insertPackageTable(packageModel, options) { + const view = this; if (this.dataPackage == null || !this.dataPackageSynced) { - this.listenToOnce(this, "changed:dataPackageSynced", function () { + this.listenToOnce(this, "changed:dataPackageSynced", () => { view.insertPackageTable(packageModel, options); }); return; @@ -1083,39 +1073,39 @@ define([ nested = false, disablePackageDownloads = false; - //** Draw the package table **// - var tableView = new DataPackageView({ + //* * Draw the package table **// + const tableView = new DataPackageView({ edit: false, dataPackage: this.dataPackage, currentlyViewing: this.pid, dataEntities: this.entities, - disablePackageDownloads: disablePackageDownloads, + disablePackageDownloads, parentView: this, - title: title, + title, packageTitle: this.model.get("title"), - nested: nested, + nested, metricsModel: this.metricsModel, }); - //Get the package table container - var tablesContainer = this.$(this.tableContainer); + // Get the package table container + const tablesContainer = this.$(this.tableContainer); - //After the first table, start collapsing them - var numTables = $(tablesContainer).find( + // After the first table, start collapsing them + const numTables = $(tablesContainer).find( "table.download-contents", ).length; if (numTables == 1) { var tableContainer = $(document.createElement("div")).attr( "id", - "additional-tables-for-" + this.cid, + `additional-tables-for-${this.cid}`, ); tableContainer.hide(); $(tablesContainer).append(tableContainer); } else if (numTables > 1) - var tableContainer = this.$("#additional-tables-for-" + this.cid); + var tableContainer = this.$(`#additional-tables-for-${this.cid}`); else var tableContainer = tablesContainer; - //Insert the package table HTML + // Insert the package table HTML $(tableContainer).empty(); $(tableContainer).append(tableView.render().el); @@ -1140,39 +1130,39 @@ define([ this.subviews.push(tableView); - //Trigger a custom event in this view that indicates the package table has been rendered + // Trigger a custom event in this view that indicates the package table has been rendered this.trigger("dataPackageRendered"); }, - insertParentLink: function (packageModel) { - var parentPackageMetadata = packageModel.get("parentPackageMetadata"), - view = this; + insertParentLink(packageModel) { + const parentPackageMetadata = packageModel.get("parentPackageMetadata"); + const view = this; - _.each(parentPackageMetadata, function (m, i) { - var title = m.get("title"), - icon = $(document.createElement("i")).addClass( - "icon icon-on-left icon-level-up", - ), - link = $(document.createElement("a")) - .attr( - "href", - MetacatUI.root + "/view/" + encodeURIComponent(m.get("id")), - ) - .addClass("parent-link") - .text("Parent dataset: " + title) - .prepend(icon); + _.each(parentPackageMetadata, (m, i) => { + const title = m.get("title"); + const icon = $(document.createElement("i")).addClass( + "icon icon-on-left icon-level-up", + ); + const link = $(document.createElement("a")) + .attr( + "href", + `${MetacatUI.root}/view/${encodeURIComponent(m.get("id"))}`, + ) + .addClass("parent-link") + .text(`Parent dataset: ${title}`) + .prepend(icon); view.$(view.parentLinkContainer).append(link); }); }, - insertSpatialCoverageMap: function (customCoordinates) { - //Find the geographic region container. Older versions of Metacat (v2.4.3 and less) will not have it classified so look for the header text + insertSpatialCoverageMap(customCoordinates) { + // Find the geographic region container. Older versions of Metacat (v2.4.3 and less) will not have it classified so look for the header text if (!this.$(".geographicCoverage").length) { - //For EML - var title = this.$('h4:contains("Geographic Region")'); + // For EML + let title = this.$('h4:contains("Geographic Region")'); - //For FGDC + // For FGDC if (title.length == 0) { title = this.$('label:contains("Bounding Coordinates")'); } @@ -1185,11 +1175,11 @@ define([ var directions = new Array("north", "south", "east", "west"); } - for (var i = 0; i < georegionEls.length; i++) { + for (let i = 0; i < georegionEls.length; i++) { var georegion = georegionEls[i]; if (typeof customCoordinates !== "undefined") { - //Extract the coordinates + // Extract the coordinates var n = customCoordinates[0]; var s = customCoordinates[1]; var e = customCoordinates[2]; @@ -1197,16 +1187,16 @@ define([ } else { var coordinates = new Array(); - _.each(directions, function (direction) { - //Parse text for older versions of Metacat (v2.4.3 and earlier) + _.each(directions, (direction) => { + // Parse text for older versions of Metacat (v2.4.3 and earlier) if (parseText) { - var labelEl = $(georegion).find( - 'label:contains("' + direction + '")', + const labelEl = $(georegion).find( + `label:contains("${direction}")`, ); if (labelEl.length) { var coordinate = $(labelEl).next().html(); if ( - typeof coordinate != "undefined" && + typeof coordinate !== "undefined" && coordinate.indexOf(" ") > -1 ) coordinate = coordinate.substring( @@ -1216,115 +1206,62 @@ define([ } } else { var coordinate = $(georegion) - .find("." + direction + "BoundingCoordinate") + .find(`.${direction}BoundingCoordinate`) .attr("data-value"); } - //Save our coordinate value + // Save our coordinate value coordinates.push(coordinate); }); - //Extract the coordinates + // Extract the coordinates var n = coordinates[0]; var s = coordinates[1]; var e = coordinates[2]; var w = coordinates[3]; } - //Create Google Map LatLng objects out of our coordinates - var latLngSW = new gmaps.LatLng(s, w); - var latLngNE = new gmaps.LatLng(n, e); - var latLngNW = new gmaps.LatLng(n, w); - var latLngSE = new gmaps.LatLng(s, e); + // Create Google Map LatLng objects out of our coordinates + const latLngSW = new gmaps.LatLng(s, w); + const latLngNE = new gmaps.LatLng(n, e); + const latLngNW = new gmaps.LatLng(n, w); + const latLngSE = new gmaps.LatLng(s, e); - //Get the centertroid location of this data item - var bounds = new gmaps.LatLngBounds(latLngSW, latLngNE); - var latLngCEN = bounds.getCenter(); + // Get the centertroid location of this data item + const bounds = new gmaps.LatLngBounds(latLngSW, latLngNE); + const latLngCEN = bounds.getCenter(); - //If there isn't a center point found, don't draw the map. - if (typeof latLngCEN == "undefined") { + // If there isn't a center point found, don't draw the map. + if (typeof latLngCEN === "undefined") { return; } - //Get the map path color - var pathColor = MetacatUI.appModel.get("datasetMapPathColor"); + // Get the map path color + let pathColor = MetacatUI.appModel.get("datasetMapPathColor"); if (pathColor) { - pathColor = "color:" + pathColor + "|"; + pathColor = `color:${pathColor}|`; } else { pathColor = ""; } - //Get the map path fill color - var fillColor = MetacatUI.appModel.get("datasetMapFillColor"); + // Get the map path fill color + let fillColor = MetacatUI.appModel.get("datasetMapFillColor"); if (fillColor) { - fillColor = "fillcolor:" + fillColor + "|"; + fillColor = `fillcolor:${fillColor}|`; } else { fillColor = ""; } - //Create a google map image - var mapHTML = - ""; - - //Find the spot in the DOM to insert our map image + // Create a google map image + const mapHTML = + ``; + + // Find the spot in the DOM to insert our map image if (parseText) var insertAfter = $(georegion) .find('label:contains("West")') @@ -1332,7 +1269,7 @@ define([ .parent().length ? $(georegion).find('label:contains("West")').parent().parent() : georegion; - //The last coordinate listed + // The last coordinate listed else var insertAfter = georegion; // Get the URL to the interactive Google Maps instance @@ -1342,7 +1279,7 @@ define([ $(insertAfter).append( this.mapTemplate({ map: mapHTML, - url: url, + url, }), ); @@ -1367,7 +1304,7 @@ define([ * @returns {string} The URL to the Google Maps instance. * @since 2.27.0 */ - getGoogleMapsUrl: function (latLngCEN, bounds) { + getGoogleMapsUrl(latLngCEN, bounds) { // Use the window width and height as a proxy for the map dimensions const mapDim = { height: $(window).height(), @@ -1384,50 +1321,60 @@ define([ * Returns the zoom level that will display the given bounding box at * the given dimensions. * @param {LatLngBounds} bounds - The bounding box to display. - * @param {Object} mapDim - The dimensions of the map. + * @param {object} mapDim - The dimensions of the map. * @param {number} mapDim.height - The height of the map. * @param {number} mapDim.width - The width of the map. * @returns {number} The zoom level. * @since 2.27.0 */ - getBoundsZoomLevel: function (bounds, mapDim) { - var WORLD_DIM = { height: 256, width: 256 }; - var ZOOM_MAX = 15; + getBoundsZoomLevel(bounds, mapDim) { + const WORLD_DIM = { height: 256, width: 256 }; + const ZOOM_MAX = 15; // 21 is actual max, but any closer and the map is too zoomed in to be // useful + /** + * + * @param lat + */ function latRad(lat) { - var sin = Math.sin((lat * Math.PI) / 180); - var radX2 = Math.log((1 + sin) / (1 - sin)) / 2; + const sin = Math.sin((lat * Math.PI) / 180); + const radX2 = Math.log((1 + sin) / (1 - sin)) / 2; return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2; } + /** + * + * @param mapPx + * @param worldPx + * @param fraction + */ function zoom(mapPx, worldPx, fraction) { return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2); } - var ne = bounds.getNorthEast(); - var sw = bounds.getSouthWest(); + const ne = bounds.getNorthEast(); + const sw = bounds.getSouthWest(); - var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI; + const latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI; - var lngDiff = ne.lng() - sw.lng(); - var lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360; + const lngDiff = ne.lng() - sw.lng(); + const lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360; - var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction); - var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction); + const latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction); + const lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction); return Math.min(latZoom, lngZoom, ZOOM_MAX); }, - insertCitation: function () { + insertCitation() { if (!this.model) return false; - //Create a citation header element from the model attributes - var header = new CitationHeaderView({ model: this.model }); + // Create a citation header element from the model attributes + const header = new CitationHeaderView({ model: this.model }); this.$(this.citationContainer).html(header.render().el); }, - insertDataSource: function () { + insertDataSource() { if ( !this.model || !MetacatUI.nodeModel || @@ -1436,12 +1383,12 @@ define([ ) return; - var dataSource = MetacatUI.nodeModel.getMember(this.model), - replicaMNs = MetacatUI.nodeModel.getMembers( - this.model.get("replicaMN"), - ); + const dataSource = MetacatUI.nodeModel.getMember(this.model); + let replicaMNs = MetacatUI.nodeModel.getMembers( + this.model.get("replicaMN"), + ); - //Filter out the data source from the replica nodes + // Filter out the data source from the replica nodes if (Array.isArray(replicaMNs) && replicaMNs.length) { replicaMNs = _.without(replicaMNs, dataSource); } @@ -1449,20 +1396,20 @@ define([ if (dataSource && dataSource.logo) { this.$("img.data-source").remove(); - //Construct a URL to the profile of this repository - var profileURL = + // Construct a URL to the profile of this repository + const profileURL = dataSource.identifier == MetacatUI.appModel.get("nodeId") - ? MetacatUI.root + "/profile" - : MetacatUI.appModel.get("dataoneSearchUrl") + - "/portals/" + - dataSource.shortIdentifier; + ? `${MetacatUI.root}/profile` + : `${MetacatUI.appModel.get("dataoneSearchUrl")}/portals/${ + dataSource.shortIdentifier + }`; - //Insert the data source template + // Insert the data source template this.$(this.dataSourceContainer) .html( this.dataSourceTemplate({ node: dataSource, - profileURL: profileURL, + profileURL, }), ) .addClass("has-data-source"); @@ -1474,25 +1421,19 @@ define([ .popover({ trigger: "manual", html: true, - title: "From the " + dataSource.name + " repository", - content: function () { - var content = "

    " + dataSource.description + "

    "; + title: `From the ${dataSource.name} repository`, + content() { + let content = `

    ${dataSource.description}

    `; if (replicaMNs.length) { - content += - "
    Exact copies hosted by " + - replicaMNs.length + - ' repositories: