From 2ef78e1735ef948e5cfd88e563b833c340180abe Mon Sep 17 00:00:00 2001
From: Anthony Sena <anthonysena@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:55:36 -0500
Subject: [PATCH] Allow read-only custom feature browsing (#2975)

---
 js/components/multi-select.html               |  4 +-
 js/components/multi-select.js                 |  1 +
 .../fa-view-edit/fa-design.html               | 79 ++++++++++---------
 .../feature-analysis-view-edit.html           |  2 +-
 4 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/js/components/multi-select.html b/js/components/multi-select.html
index d2f6a68de..cbdd6d990 100644
--- a/js/components/multi-select.html
+++ b/js/components/multi-select.html
@@ -1,8 +1,8 @@
 <div class="multi-select" data-bind="eventListener: [{event: 'hide.bs.dropdown', selector: 'div.dropdown.bootstrap-select', callback: onSelectionComplete}]">
     <!-- ko if: multiple == true -->
-        <select data-bind="selectedOptions: selectedValues, options: optionVals, optionsText: optionsText, multiSelect: { liveSearch: true, selectedTextFormat: selectedTextFormat, noneSelectedText: ko.unwrap(noneSelectedText), noneResultsText: ko.unwrap(noneResultsText), countSelectedText: ko.unwrap(countSelectedText) }" multiple></select>
+        <select data-bind="attr: disabled, selectedOptions: selectedValues, options: optionVals, optionsText: optionsText, multiSelect: { liveSearch: true, selectedTextFormat: selectedTextFormat, noneSelectedText: ko.unwrap(noneSelectedText), noneResultsText: ko.unwrap(noneResultsText), countSelectedText: ko.unwrap(countSelectedText) }" multiple></select>
     <!-- /ko -->
     <!-- ko if: multiple == false -->
-        <select data-bind="options: options, value: selectedValue, optionsText: 'label', optionsValue: 'value', multiSelect: { liveSearch: true, selectedTextFormat: 'count > 2', noneSelectedText: ko.unwrap(noneSelectedText), noneResultsText: ko.unwrap(noneResultsText) }"></select>
+        <select data-bind="attr: disabled, options: options, value: selectedValue, optionsText: 'label', optionsValue: 'value', multiSelect: { liveSearch: true, selectedTextFormat: 'count > 2', noneSelectedText: ko.unwrap(noneSelectedText), noneResultsText: ko.unwrap(noneResultsText) }"></select>
     <!-- /ko -->
 </div>
\ No newline at end of file
diff --git a/js/components/multi-select.js b/js/components/multi-select.js
index 389a204a3..62b39a860 100644
--- a/js/components/multi-select.js
+++ b/js/components/multi-select.js
@@ -14,6 +14,7 @@ define(
 
       self.multiple = params.multiple;
       self.options = params.options;
+	  self.disable = (params.disable || false);
       self.selectedValues = ko.observableArray(params.selectedValues && params.selectedValues());
       self.selectedValue = params.selectedValue;
       self.selectedTextFormat = params.selectedTextFormat || 'count > 2';
diff --git a/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html b/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html
index c8737eb7c..c0a308f82 100644
--- a/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html
+++ b/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html
@@ -16,13 +16,13 @@
             <!-- /ko -->
             <textarea data-bind="
                     css: classes({ element: 'descr', extra: 'form-control' }),
-                    attr: { disabled: $component.canEdit() ? null : true },
+					attr: { disabled: $component.canEdit() ? null : true }
                     textInput: $component.data().descr
                 "></textarea>
         </div>
     </div>
 
-    <div data-bind="css: classes({ element: 'design-panel', extra: 'panel panel-primary' })">
+    <div data-bind="css: classes({ element: 'design-panel', extra: 'panel panel-primary'})">
         <div class="panel-heading" data-bind="text: ko.i18n('cc.fa.design', 'Design')"></div>
         <div data-bind="css: classes({ element: 'design-panel-body' })">
             <div data-bind="css: classes('type-selector')">
@@ -32,6 +32,7 @@
                         data-bind="
                             if: $component.canEdit() || $component.data().type() === $component.featureTypes.PRESET,
                             css: classes({ element: 'nav-pill', extra: $component.data().type() === $component.featureTypes.PRESET ? 'active' : null }),
+							attr: { disabled: $component.canEdit() ? null : true },
                             click: setType.bind(null, $component.featureTypes.PRESET)
                         ">
                         <a data-bind="text: ko.i18n('cc.fa.preset', 'Preset')"></a>
@@ -44,6 +45,7 @@
                         data-bind="
                             if: ($component.canEdit() && !$component.featureId()) || $component.data().type() === $component.featureTypes.CRITERIA_SET,
                             css: classes({ element: 'nav-pill', extra: $component.data().type() === $component.featureTypes.CRITERIA_SET ? 'active' : null }),
+							attr: { disabled: $component.canEdit() ? null : true },
                             click: setType.bind(null, $component.featureTypes.CRITERIA_SET)
                         ">
                         <a data-bind="text: ko.i18n('cc.fa.criteria', 'Criteria')"></a>
@@ -52,6 +54,7 @@
                         data-bind="
                             if: ($component.canEdit() && !$component.featureId()) || $component.data().type() === $component.featureTypes.CUSTOM_FE,
                             css: classes({ element: 'nav-pill', extra: $component.data().type() === $component.featureTypes.CUSTOM_FE ? 'active' : null }),
+							attr: { disabled: $component.canEdit() ? null : true },
                             click: setType.bind(null, $component.featureTypes.CUSTOM_FE)
                         ">
                         <a data-bind="text: ko.i18n('cc.fa.custom', 'Custom')"></a>
@@ -63,27 +66,27 @@
                 <span data-bind="css: classes('criteria-descr'), text: ko.i18n('cc.fa.featureExtractionPresetName', 'FeatureExtraction preset name:')"></span>
                 <input data-bind="
                         css: classes({ element: 'preset-input', extra: 'form-control' }),
-                        attr: { disabled: $component.canEdit() ? null : true },
                         textInput: $component.data().design
                     " />
             </div>
             <!-- /ko -->
             <div data-bind="
-                    if: $component.data().type() === $component.featureTypes.CRITERIA_SET, css: classes('design')
+                    if: $component.data().type() === $component.featureTypes.CRITERIA_SET, 
+					css: classes('design')
                 ">
                 <div data-bind="css: classes({extra: 'panel panel-primary'})">
                     <div data-bind="css: classes({ extra: 'panel-heading' }), text: ko.i18n('cc.fa.analysisType', 'Analysis type:')"></div>
                     <div data-bind="css: classes('stat-type-selector')">
                         <multi-select
                                 data-bind="css: classes()"
-                                params="options: $component.statTypeOptions,
+                                params="options: $component.statTypeOptions,  disable: !$component.canEdit(),
                                 selectedValue: $component.data().statType, multiple: false"></multi-select>
                     </div>
                 </div>
                 <span data-bind="if: data().statType() === 'PREVALENCE'">
-                        <button data-bind="css: classes({ element: 'add-criteria-group', extra: 'btn btn-success' }), click: addCriteria, text: ko.i18n('cc.fa.addCriteriaFeature', 'Add Criteria feature')"></button>
+                        <button data-bind="css: classes({ element: 'add-criteria-group', extra: 'btn btn-success' }), attr: { disabled: $component.canEdit() ? null : true }, click: addCriteria, text: ko.i18n('cc.fa.addCriteriaFeature', 'Add Criteria feature')"></button>
                     </span>
-                <span data-bind="if: data().statType() === 'DISTRIBUTION', css: classes('add-criteria-windowed')">
+                <span data-bind="if: data().statType() === 'DISTRIBUTION', css: classes('add-criteria-windowed'), attr: { disabled: $component.canEdit() ? null : true }">
                         <div>
                             <div class="btn-group">
                                 <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i>
@@ -100,35 +103,37 @@
                         </div>
                     </span>
                 <!-- ko foreach: $component.data().design -->
-                <div data-bind="
-                            css: $component.classes('criteria'),
-                            eventListener: [
-                                { event: 'click', selector: '.conceptset_import', callback: $component.handleConceptSetImport},
-                                { event: 'click', selector: '.conceptset_edit', callback: $component.handleEditConceptSet }
-                            ]
-                        ">
-                    <div data-bind="css: $component.classes('criteria-heading')">
-                        <input
-                                data-bind="css: $component.classes({ element: 'criteria-name', extra: 'form-control' }), textInput: $data.name, placeholder: ko.i18n('cc.fa.criteriaName', 'Criteria name')"
-                        />
-                        <button
-                                type="button"
-                                data-bind="css: $component.classes({ element: 'criteria-delete', extra: 'btn btn-sm btn-danger' }), click: () => $component.removeCriteria($index())"
-                        ><i class="fa fa-trash-alt"></i></button>
-                    </div>
-                    <!-- Aggregate -->
-                    <div data-bind="if: $parent.data().statType() === 'DISTRIBUTION' && $data.criteriaType !== 'DemographicCriteria'">
-                        <aggregate-select params="aggregates: $component.aggregates, currentAggregate: $data.aggregate, domains: $component.domains, criteria: $data"></aggregate-select>
-                    </div>
-                    <div data-bind="if: $data.criteriaType === 'CriteriaGroup'">
-                        <criteria-group params="{ expression: { ConceptSets: $component.data().conceptSets }, group: $data.expression }"></criteria-group>
-                    </div>
-                    <div data-bind="if: $data.criteriaType === 'DemographicCriteria'">
-                        <demographic-criteria params="{ criteria: $data.expression }"></demographic-criteria>
-                    </div>
-                    <div data-bind="if: $data.criteriaType === 'WindowedCriteria'">
-                        <windowed-criteria params="{ expression: { ConceptSets: $component.data().conceptSets }, criteria: $data.expression, disableObservationPeriod: true, defaultObservationPeriod: true }"></windowed-criteria>
-                    </div>
+				<div data-bind="css: $component.canEdit() ? '' : 'feature-analysis-view-edit__content--disabled'">
+					<div data-bind="
+								css: $component.classes('criteria'),
+								eventListener: [
+									{ event: 'click', selector: '.conceptset_import', callback: $component.handleConceptSetImport},
+									{ event: 'click', selector: '.conceptset_edit', callback: $component.handleEditConceptSet }
+								]
+							">
+						<div data-bind="css: $component.classes('criteria-heading')">
+							<input
+									data-bind="css: $component.classes({ element: 'criteria-name', extra: 'form-control' }), textInput: $data.name, placeholder: ko.i18n('cc.fa.criteriaName', 'Criteria name')"
+							/>
+							<button
+									type="button"
+									data-bind="css: $component.classes({ element: 'criteria-delete', extra: 'btn btn-sm btn-danger' }), attr: { disabled: $component.canEdit() ? null : true }, click: () => $component.removeCriteria($index())"
+							><i class="fa fa-trash-alt"></i></button>
+						</div>
+						<!-- Aggregate -->
+						<div data-bind="if: $parent.data().statType() === 'DISTRIBUTION' && $data.criteriaType !== 'DemographicCriteria'">
+							<aggregate-select params="aggregates: $component.aggregates, currentAggregate: $data.aggregate, domains: $component.domains, criteria: $data"></aggregate-select>
+						</div>
+						<div data-bind="if: $data.criteriaType === 'CriteriaGroup'">
+							<criteria-group params="{ expression: { ConceptSets: $component.data().conceptSets }, group: $data.expression}"></criteria-group>
+						</div>
+						<div data-bind="if: $data.criteriaType === 'DemographicCriteria'">
+							<demographic-criteria params="{ criteria: $data.expression }"></demographic-criteria>
+						</div>
+						<div data-bind="if: $data.criteriaType === 'WindowedCriteria'">
+							<windowed-criteria params="{ expression: { ConceptSets: $component.data().conceptSets }, criteria: $data.expression, disableObservationPeriod: true, defaultObservationPeriod: true }"></windowed-criteria>
+						</div>
+					</div>
                 </div>
                 <!-- /ko -->
             </div>
@@ -146,7 +151,7 @@
                     <span data-bind="css: classes('criteria-sql')">SELECT covariate_id, covariate_name, concept_id, sum_value, average_value FROM (</span>
                     <textarea data-bind="
                             css: classes({ element: 'raw-sql-box', extra: 'form-control' }),
-                            attr: { disabled: $component.canEdit() ? null : true, placeholder: demoCustomSqlAnalysisDesign },
+                            attr: { placeholder: demoCustomSqlAnalysisDesign },
                             textInput: $component.data().design
                         "></textarea>
                     <span data-bind="css: classes('criteria-sql')">)</span>
diff --git a/js/pages/characterizations/components/feature-analyses/feature-analysis-view-edit.html b/js/pages/characterizations/components/feature-analyses/feature-analysis-view-edit.html
index 85d579285..f3872bed6 100644
--- a/js/pages/characterizations/components/feature-analyses/feature-analysis-view-edit.html
+++ b/js/pages/characterizations/components/feature-analyses/feature-analysis-view-edit.html
@@ -38,7 +38,7 @@
     </div>
 
     <!-- ko if: selectedTabKey -->
-    <tabs data-bind="css: editorClasses(), visible: !$component.loading()" params="
+    <tabs data-bind="visible: !$component.loading()" params="
             selectedTabKey: $component.selectedTabKey,
         selectTab: $component.selectTab,
         tabs: $component.tabs">