Expected behavior and actual behavior:

Safari9, when an item is selected in the panel, the height/width of the panel can shrink causing a vertical & horizontal scrollbar to appear overlaying the last item in the panel.
Doesn't seem to happen on the main panel, but as you navigate down to the children view, it seems to happen.

Environment:

CB: Redesign branch
app-helpers: multi branch

Browser: Safari 9

Screenshot:

Expected behavior and actual behavior:

Getting an 'undefined promise' in the dist version of context browser in IE11. Nothing other than the filter is rendered.

Environment:

CB: Redesign branch
Browser: IE11 on win7

Screenshots:

IE11:

Firefox:

/cc @davidrleonard

The following changes need to be made/concepts need to be explained:

• Explain that IDs should be unique in items in the asset graph (or at the very least, paths of IDs should be unique ... e.g. no siblings share the same ID) (#47)

An option to pre-load a number of levels of the asset hierarchy would make it much more neat than having to wait every level to be loaded when the user clicks on an asset.
For example it could load up to 5 levels down the hierarchy and when the user opens the level 4 it would pre-load the next 5 levels (5 to 10).
I know that there are use cases where you will need to do level by level load but we could have both options to choose from.

Expected behavior and actual behavior:

When open arrow is added to the list of actionable icon, it should be persistent in panel header like favorites/select icons are. Not the case currently.

Environment:

CB: redesign branch/latest pull
Browser: Chrome59

Screenshot :

/cc @davidrleonard

Submit an Issue

The Context Browser Spinner never goes away after a failed call to getChildren from getNewChildren. The only way to get out of this scenario is to refresh the page.
The Context Browser Spinner does not have an onRejected handler, and the call to turn off the spinner is never called, unless the getChildren pretends it was successful.

Expected behavior and actual behavior:

Expected behavior is that the spinner should turn off even in a failure condition.
Actual behavior is that the spinner never turns off in a failure condition.

Steps to reproduce the problem:

getChildren calls APM Asset browse for example https://apm-asset-preprod.preprod-apm-api.predix.com/v1/browse/instances?parent=someparent&components=BASIC. This call can sometimes timeout, and return a 500 internal server error.
In this case, the spinner never goes away.

It is possible to have the client getChildren to catch this condition, and then pretend it was successful by not returning any children. This is the only current way for a client to prevent this issue. It would be more ideal for the px-content-browser to handle this.

Environment (component version number, Browser (including version), operating system, hardware, etc):

px-browser-component versions 1.3.16 and 1.6.9.
Chrome V57.0.2987.98 (64 bit)
Mac OS X El Capitan

Screenshots (optional, but very helpful):

Video to context browser freezing
https://ge.box.com/s/h4gitnd5q3bewp1aqz4wmlp32hyldlny
Video to context browser no longer freezing
https://ge.box.com/s/v3o8kw1ci97ibd3lp7n0swriox4yqoaf

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

This code would be appropriate to fix the issue.

getNewChildren: function(parentNode) {
this.spinner('show');

var fulFilled = function(data){
_this.spinner('hide');
// Do More Stuff
};

var rejected = function(error){
_this.spinner('hide');
// Log a warning for easy debugging
};

//call the getChildren function, which expects a promise in return.
this.handlers.getChildren(parentNode).then( fulFilled, rejected );

}

Expected behavior and actual behavior:

When navigating back from children back to the top level parent by tapping on the panel header, when you land at the top level browser panel, the filter shows as selected and virtual keyboard is opened.

This is happening in mobile both portrait and landscape modes.

Environment:

CB: master pull latest with mobile implementation today
Browser: Safari on iphone plus, ios 10.3.1

Screenshot:

/cc @davidrleonard

Hi Predix Team

I encounter an issue , when filtering objects in the context browser

When i have 3 columns in the context browser and filter in the third column
it display the filtered values but
if i don't clear the filter value in the third column
and change to another item in the first column
when i try to comeback to my previous selection is only displaying the filtered values that i left before
and not all the children items

I am not able to see the Header Panel while on Opera Browser, when the Modal is active.

Long-named assets wrap their name over multiple lines, with the same spacing between lines as there is between assets. This makes it hard to distinguish three 3-line assets from 9 single-line assets - the only difference is the arrow.

Possible fixes: truncation, dividing lines, smaller line-height for multiline assets.

Expected behavior and actual behavior:

placeholder="Filter" within px-context-browser-typeahead should be localized using the localize method

Environment (component version number, Browser (including version), operating system, hardware, etc):

Px-Context-Browser Version 1.8

Screenshots (optional, but very helpful):

"Filter" search box

Thanks!

Expected behavior and actual behavior:

When there are no children for an item, the first time through when you select the arrow to navigate to the children, it works perfectly fine, the progress bar is animating and as soon as the timeout hits, it'll send you back out of the empty child panel back to its parent.

However, if you select to go back to the same item's child view a 2nd time, it will take you to an empty panel with no progress bar animation and timeout doesn't trigger to send you back out to the parent, so the CB can get stuck in the empty panel. unless the CB is closed out.

Tried different values for loading timeouts,(200 to 1000ms) and no change in behavior.

Environment:

CB+App-helpers: Latest Master pull, 4pm today.
Browsers: All

Screenshot:

/cc @davidrleonard

When the context browser is opened in IE11 any attempt to navigate to a child node, sometimes works but with an error in the log, and most times it has and unpredictable behavior, pointing to a null child and removing the parent from the header.

Steps to reproduce the problem:

Navigate to any child

Environment:

CB: Redesign Branch/today's pull
app-helpers: Master/today's pull

Browser: IE11 on a win7

Screenshots :

/cc @davidrleonard

Expected behavior and actual behavior:

Tracking issue for a missing design interaction in implementation.
Per design: "The Context Browser Panel will open as a modal sheet from the bottom of the view when the app has reached the mobile break point. "

Currently that is not the case, tapping on the trigger icon will place an overlay without any animation from the bottom.

Environment:

CB: master pull latest with mobile implementation today
Browser: Safari on iphone plus, ios 10.3.1

/cc @davidrleonard

This is a tracking issue for the remaining work on the demo page:

• Update the demo
• Update the introduction section
• Fix errors/warnings
• Fix typos in api documentation.
• Update description for items, looks like it might be applicable to nav not CB.

Additional changes:

• Explain that IDs should be unique in items in the asset graph (or at the very least, paths of IDs should be unique ... e.g. no siblings share the same ID) (#47)

Screenshots :

Console errors/warning when loading the demo page.

API Section Edits

Update description for Items

/cc @davidrleonard

Various console errors.

Hi,

I am getting lot of errors in console for loading svg images. Issue is about violating content security policy directive.
Follwoing is the screen shot for one of them.

following is one of the exact link of svg element present in console errors. (can copy and paste in browsers to try)

data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"12"%20viewBox%3D"0%200%20658%201024"><path%20fill%3D"%233b3b3f"%20d%3D"M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z"%2F><%2Fsvg>

Please me to solve the problem

https://forum.predix.io/questions/9827/px-context-browser-bug-with-nest-children.html

I got a solution for this "bug ???" that I can push.

---- inline post ----

Hello guys,

I got this weird bug when loading a json file (using iron-ajax) and pass it to the px-context-browser browser-context property.

I used this very simple json:

{
  "data": [{
    "name": "test 1",
    "id": "001-1",
    "isOpenable": false,
    "children": [{
      "name": "Child 1-1",
      "id": "001-1a",
      "isOpenable": true,
      "selectedAsset": true
    }]
  }, {
    "name": "test 2",
    "id": "001-2",
    "isOpenable": false,
    "children": [{
      "name": "Child 2-1",
      "id": "001-2a",
      "isOpenable": true
    }]
  }]
}

And this is what I got:

And without setting "selectedAsset":

I also tried with a more complex json without success, all the nested children got added...
I think that this control keeps adding data and is expecting us to pass the first level of the json and rely on the getChildren callback to get the remaining data... or I may be wrong.

I also checked this file https://github.com/PredixDev/px-context-browser/blob/master/directContext.json, but it didn't work when I added children to the first element ( "identifier": "001-1").

Cheers

Some documentation about context browser's data structure will be very helpful

It should not show spinner when there is no handler for getChildren.

If there are many assets in application that the scrollbar appears and now when user scrolls down and reaches the end of the scroll there is a call for getChildren even though user has not clicked on any of the asset. Why is it so?

The use case for my project doesn't require this automatic call when it has reached the end while user is scrolling. Is there any way to disable on-scroll function that calls getChildren at the end?

Expected behavior and actual behavior:

There should be a call to getChildren only when user clicks on any asset.

Steps to reproduce the problem:

Log into any application that has many assets and try to scroll to the end and observe that there is a call for getChildren

Expected behavior and actual behavior:

Tried to preselect a route using the "selected-route" attribute, but the route doesn't seem to get pre-selected as expected.

Environment:

CB: Redesign branch - today's pull
App-helpers: Master - today's pull

Screenshot:

Code example:

        <px-context-browser
            selected-route='["Sy1DFzRs_ENTERPRISE","r1TutzRs_SITE"]'
            items="{{data}}"
            selected="{{selectedItem}}"
            has-filter
            open-arrow
            has-favorites
            loading-timeout=0
            enable-warnings
            >
        </px-context-browser>

/cc @davidrleonard

Expected behavior and actual behavior:

When all actionable icons are present, their order should be switched to match the design.

Environment

CB: redesign branch/latest pull
Browser: chrome59

Screenshots:

Design

Implemented

/cc @davidrleonard

Steps to reproduce the problem:

• Used the same context browser test case.
• Placed on in Context browser directory and a copy of the file in a different project(timeseries).
• bower link the timeseries directory to the context browser.
• When I do a gulp serve and server the test file, context browser does render properly.
• If you select the item (up arrow icon), it seems to work fine.
• But if you select the open arrow to open the children panel, it results in a "cancel" error in the console log and the context browser instance becomes unresponsive at that point.

Environment:

CB: Redesign branch/latest pull
Browser: Chrome59

Screenshot:

webanimation versions context browser vs. timeseries projects:

Error in Timeseries Project

No error in Context Browser Project

Code example:

<!doctype html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>CB</title>
        <!-- Requires Webcomponents.js polyfill is provided by the page for browsers that don't support html imports -->
        <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
        <!-- Import custom element. Note: see comment about relative paths to dependencies in the *.html file referenced below -->
        <link rel="import" href="../px-theme/px-theme-styles.html">
        <!-- <link rel="import" href="../px-dark-theme/px-dark-theme-styles.html"> -->
        <style include="px-theme-styles" is="custom-style"></style>

        <link rel="import" href="../iron-ajax/iron-ajax.html"/>
        <link rel="import" href="px-context-browser.html">
    </head>

    <dom-module id="demo-context-browser">
      <body style="padding:30px; ">
    <!-- <body style="padding:30px; background-color: rgb(27,42,51);"> -->
      <template id="CBtest1" is="dom-bind">

      <h2>NEW CB </h2>

      <style> px-context-browser {--px-context-browser-panel-width:500px} </style>

      <px-context-browser
          items="{{data}}"
          collapse-all
          collapse-with-icon
          open-arrow
          has-favorites
          has-filter
          >
      </px-context-browser>

      <iron-ajax auto url="padi_cb1.json" last-response="{{data}}"></iron-ajax>
    </dom-module>
  </template>
  </body>
</html>


/cc @davidrleonard

Expected behavior and actual behavior:

When open arrow is configured into the CB, there seems to be a jittering effect when hovering over the icons as the open arrow appears/disappears and the rest of the icons are redrawn.

Can't attach the clip, but see screenshots for the open arrow presence/removal on hover.

Environment:

CB: Redesign Branch/latest pull
Browser: Chrome

Screenshots:

/cc @davidrleonard

Expected behavior and actual behavior:

API doc: set loading-timeout to 0 to wait forever to load:

1. That's not the case, there is no wait to load children if loading-timeout is set to 0. As soon as the open arrow is selected, it returns you back to the parent.
2. If the behavior is implemented to actually "wait forever", we should add a warning alerting the developer.

Environment :

CB: Redesign branch, today's pull
App-helpers: Master branch, today's pull

Browsers: Chrome

Screenshot

Code example

        <px-context-browser
            items="{{data}}"
            selected="{{selectedItem}}"
            has-filter
            open-arrow
            has-favorites
            loading-timeout=0
            enable-warnings
            >
        </px-context-browser>

/cc @davidrleonard

When adding assets during user creation/editing, user cannot select the enterprise or site that is at the bottom of the list. There should be vertical scroll bar so that user can scroll to the bottom and pick the enterprise or site. See screenshot attached.

Steps:
Login with admin permission. Go to Administrator.
Create a new user. Select one of the permission set.
Click on drop down botton to select an Asset.
Click on all resources

Result: Notice that if you many enterprise or sites, then you are able to scroll down and pick the one that is at the bottom of the list.

Expected behavior and actual behavior:

Duplicated id's are not generating an error/warning, e.g.:

            "label": "Scottsdale",
            "id": "Scottie",
            "children": [
              {
                "label": "Country Club1",
                "id": "SC1",
                "hasChildren": true
              },
              {
                "label": "Country Club2",
                "id": "SC1",
                "hasChildren": false
              }

Environment:

CB: Redesign branch/latest pull
Chrome: 59

Screenshot:

/cc @davidrleonard

Is there a property that is in the works or streamlined in the backlog for disabling the context-browser?

I am getting the attached error on the console when I use the component.
Can anyone help removing those?

The bower file is -
"dependencies": {
"angular": "1.5.8",
"angular-route": "1.5.x",
"bootstrap": "3.3.x",
"angular-mocks": "1.5.x",
"angular-bootstrap": "latest",
"px-spinner": "latest",
"px-context-browser": null,
"q": "#1.0.1",
"px-dropdown": "^0.12.2",
"px-data-table": "https://github.com/PredixDev/px-data-table.git#^1.14.4",
"px-alert-message": "^0.7.20"
},
"resolutions": {
"angular": "1.5.8",
"polymer": "^v1.6.0",
"polymer-font-awesome": "0.1.9",
"px-theme": "~v1.1.2",
"px-defaults-design": "^0.3.0",
"px-functions-design": "~1.0.0",
"px-typography-design": "^1.1.3",
"px-iconography-design": "^0.2.10",
"px-alert-message": "^0.7.20",
"px-actionable-text-icons": "^0.1.0"
}

Expected behavior and actual behavior:

This is hard to describe and since I can't attach a clip to the issue will try to describe it. Compared to Chrome and Safari, the fadein/out animations in Firefox are jittery as if they are happening in slower speed. Mostly noticeable in transitions when the text fading in is overlaying the existing item causing the animation to not appear smooth.

Attaching a few frames out of a clip, showing the text being overlaid during the animation. Not sure if this will help with debugging or if this is a limitation of the browser itself and can't be addressed.

Environment:

CB: Redesign branch/dist version
Browser: FF 54.0.1

Screenshots:

/cc @davidrleonard

Expected behavior and actual behavior:

In px-context-browser when we set label-field to different field other than name, the change is reflecting on Context Browser, but Breadcrumbs still shows the name.

Ideally, Asset label which we see in context browser ,same label should be there in bread crumbs

Steps to reproduce the problem:

1. Pass label-field to px-context-browser other than name. e.g. identifier

Environment (component version number, Browser (including version), operating system, hardware, etc):

Component Version : 1.6.2
Browser : Chrome 56 , IE 11

Screenshots (optional, but very helpful):

Code examples

<px-context-browser label-field="identifier" id-field="identifier" opened-item-name="Select Context" show-chevron="true"></px-context-browser>

Expected behavior and actual behavior:

On a selected item, hovering over the up arrow icon doesn't match the design spec.

Environment:

CB: redesign branch, latest pull
Browser: Chrome59

Screenshots:

Design

Implemented Version:

/cc @davidrleonard

Expected behavior and actual behavior:

Enhancement Request:

1. To view the context of a selected item, the select icon is placed on the right hand corner near the edge of the screen. The tap area seems small enough that it can take multiple attempts to actually get the item selected.

2. Same issue with Close (X) on filter.

Would be nice to increase the tap areas for these 2 items so it's not so challenging to select them.

Environment:

CB: master pull latest with mobile implementation today
Browser: Safari on iphone plus, ios 10.3.1

Summary says it all...

I am using Predix Polymer components in a micro App which uses Angular + Polymer. My problem that the app crashes when opened on Firefox or IE. When I do a clone(like say- clone = document.importNode(t.content, true);) of the template container and append(like - conatiner.appendChild(clone);) to the parent explicitly the App works in FF and IE as well. Any directions?
Also may see this

Submit an Issue

Hi,

I have browser context called on my html, however it was not pulling the json from the folder(px-context-browser). I've also tried calling initialContext and directContext json through iron-ajax in the html still it didn't populate the json. Can please suggest how to set this up?

- i've called like this, also clarify what is this last-response does?

Do we need to include below 2 dependency as well?
"px-tabs": "^0.6.0",
"px-api-viewer": "^0.1.0",

Getting a different behavior in IE11 with the same Config test file (has selected-route defined in its config). The context browser is missing the panel on IE11 in and gets a promise undefined error compared to other browsers running the same config.

Environment :

CB: Redesign Branch/today's pull
app-helpers: Master/today's pull

Browser: IE11 on win7

Screenshots:

###Test config on IE11

###Test config on Chrome

Code examples

<px-context-browser-trigger trigger="{{trigger}}">  </px-context-browser-trigger>

        <px-context-browser
            selected-route='["Sy1DFzRs_ENTERPRISE","r1TutzRs_SITE"]'
            items="{{data}}"
            selected="{{selectedItem}}"
            open-trigger="{{trigger}}"
            has-filter
            open-arrow
            has-favorites
            loading-timeout= 0
            enable-warnings
            >
        </px-context-browser>

/cc @davidrleonard

Expected behavior and actual behavior:

The grey overlay tap area on top of the browser is too narrow to tap into for browser dismissal.
Only the case in landscape mode.

Environment:

CB: master pull latest with mobile implementation today
Browser: Safari on iphone plus, ios 10.3.1

Screenshot:

/cc @davidrleonard

Expected behavior and actual behavior:

When navigating to the child level, while the "in progress bar" is active, selecting the panel header would cause the child loading to cancel out as expected, but it jumps back 2 levels up(back to grandparent) instead of 1 level(parent).

Environment:

CB: Redesign Branch/today's pull
app-helpers: Master/today's pull
Browsers: All

Screenshots:

/cc @davidrleonard

Hi Team,

We are facing an issue, when the name of member in the list is longer, scroll bar comes up, but if we scroll, remaining name and 'open' button disappears. I am attaching the screenshots for the same.

1. Scroll Bar to extreme left
   
2. Scroll Bar to Extreme right
   

Expected behavior and actual behavior:

Doesn't seem like the mobile interactions have been implemented per design. Opening this issue so we can track the future effort.
There also seems to be an issue with responsive behavior. CB doesn't quite fit in the iphone view and doesn't resize to fit as expected.

Steps to reproduce the problem:

Open the local instance in a chrome screen size simulator.

Environment:

CB: Redesign branch, latest pull
Browser: Chrome simulator

Screenshot:

/cc @davidrleonard

Related to the bug fixed in #77: 0a3f2a8

1. When I go to the Demo page and refresh
2. Open the Context Browser in the "Basic" tab
3. Then go to the "Advanced" tab
4. Open the Context Browser in there
5. It opens to the previously selected state (from the "Basic" tab), rather than the currently selectedRoute. It does SELECT the right thing, and when I navigate to that level I can see that the correct item is selected, but it does not open to the correct level.

Same thing happens if I start by opening the CB in the "Advanced" tab then in "Basic."

Expected behavior and actual behavior:

Setting hasChildren to false should remove the open arrow from the actionable icons since there will be no children for that node, but that doesn't seem to be the case.

Environment:

CB: Redesign branch/latest pull
Browser: Chrome59

Screenshots:

Implemented:

/cc @davidrleonard

There is an issue in the context browser in lazy loading mode when the children item list is too long for the column (ie : when a scrollbar is used in the column) :

When an asset has many children, they will all be displayed in the same column in the browser after the internal call to getChildren (using my custom promise assigned to getChildren handler).
In that case, the current column will have a scrollbar.

If you scroll down to the bottom of the column (for example with your mouse wheel), there is an anormal behavior in the browser : the getChildren handler will be called many unneccessary times for the parent asset.

.

Expected behavior and actual behavior:

Selecting the context at the top/parent level works in IE11, but if you navigate to any child level and try to open the context by selecting the uparrow icon, it won't work with an error "Object expected" in the console log.

Environment:

CB: Master/latest pull 7/21.
App-nav: Master/latest pull 7/21

Browser: IE11

Screenshot:

Expected behavior and actual behavior:

Redesigned CB is not working in IE11, Safari9 and latest Firefox. We need a hybrid version.

Environment:

CB: Redesign Branch/latest pull
Browser: IE11, Safari9, FF

Screenshot:

/cc @davidrleonard

Hi Team,

If text in headers are longer, custom components existing at right side overlaps with this text.
following screenshot will clear the scenario.

Context Browser's chevron gets misaligned with the icon in IE11 only when dev tool is open.
The chevron remains aligned in all other browsers with or without the dev tools open.

Environment :

CB: Redesign Branch/today's pull
app-helpers: Master/today's pull

Browser: IE11 on win7 (when dev tools are open)
Browser: Safari on ios(iphone plus)

Screenshots:

IE11 dev tools open

IE11 devtools closed

iphone:

/cc @davidrleonard

404s for font-awesome file references in px-context-browser

Hi,

We are noticing 404s for font awesome font files when using px-context-browser
version 1.4.5

Expected behavior and actual behavior:

No 404s

Steps to reproduce the problem:

Install version 1.4.5 of px-context-browser and open the demo page, use

Environment (component version number, Browser (including version), operating system, hardware, etc):

Windows7
IE 11

Expected behavior and actual behavior:

Size of the chevron should be resized to match the design. It's currently much larger.

Environment :

CB: Redesign branch/latest pull
Browser: Chrome59

Screenshots:

Design:

Implemented Version:

/cc @davidrleonard