I have a few questions about ATLAS with KnockoutJS

[chankch]

Hello. I'm a researcher and developer.

I'm modifying ATLAS to make it more convenient to me.

In 'Cohort Definitions -> New Cohort Definition', I wanna add tab 'Search' like this capture

In 'Search' tab, I can search for concepts. it is same with original 'Search'

So, I'm studying 'KnockoutJS' but it's too complicated...

I hope you guys to help me add a 'Search' tab.

[chrisknoll]

First part is adding the search tab, which I think you already did, but for completeness, you add the search item here:

            <li role="presentation" data-bind="css: { active: $component.tabMode() == 'conceptsets' }, click: function() { $component.tabMode('conceptsets'); }">
                <a>Concept Sets</a>
            </li>
            <li role="presentation" data-bind="css: { active: $component.tabMode() == 'search' }, click: function() { $component.tabMode('search'); }">
                <a>Search</a>
            </li>

            <li role="presentation" data-bind="css: { active: $component.tabMode() == 'generation' }, click: function() { $component.tabMode('generation'); }">
                <a>Generation</a>
            </li>

            <li role="presentation" data-bind="css: { active: $component.tabMode() == 'reporting' }, click: function() { $component.tabMode('reporting'); }">
                <a>Reporting</a>
            </li>

Note the $component.tabMode('search'). Basically, when they click on the tab, it will assign the value search to the observable tabMode.

Further below, you have the different <div> elemetns for the tabs. the atlas cohort editor is like so:

<div role="tabpanel" data-bind="css: { active: $component.tabMode() == 'definition' }" class="tab-pane">
  <atlas.cohort-editor params="canEditCurrentCohortDefinition: canEdit, loadConceptSet: loadConceptSet"></atlas.cohort-editor>
</div>

Adding the search tab content would be done like so:

<!-- add this after the tabpanel for the editor... -->
<div role="tabpanel" data-bind="css: { active: $component.tabMode() == 'search' }" class="tab-pane">
  <vocabulary-search  params="searchParams"></vocabulary-search>
</div>

Based on the vocabulary search component defined here, the params object contains an observable field query. I'm not the author of the component, but you can set up breakpoints to see how it functions.

I appreciate your interest in learning about the library, but diving right in the middle of a large application like Atlas may not be the best way to get oriented. Knockout provides an excellent tutorial that is a hands-on and real-time learning experience. You should start there.

[chankch]

@chrisknoll Thank you!! (and sorry for the late reply.) Because of your advice, I can study more about Knockout and Atlas.

I added Search tab in create/modify concept_set page and I don't have to move original Search tab when I want create new concept_set.

Now I am trying to add Search tab in Cohort_definitions page with your advice.

Again, Thanks for your help!! ^-^ have a nice day.

[chrisknoll]

Closing as a discussion ticket, but please feel free to share your experiences here.