dlr-eoc / ukis-frontend-libraries Goto Github PK

Description

To easily see what version of ukis was used on a deployed running app we could set it like angular or clarity on the HTML at runtime.

• https://github.com/vmware/clarity/blob/c77f0a86fc40c600adad1e5e8d8073f3fb1d282e/packages/core/src/internal/utils/global.ts
• https://github.com/angular/angular/blob/b49ffcd50e46ca7907ee2049f6cade8e080f5980/packages/core/src/render3/component_ref.ts#L159

Relevant Package

This feature request is for @dlr-eoc/....
Or if it is not fitting anywhere then a new @dlr-eoc/

Describe the bug

Main Release was not triggered after pull request.

Expected behavior

If a pull request is closed it should normally trigger the the workflow 'Main Release'. When a Tag was pushed before the close, like described in "publish a new version" the workflow should succeed and create packages on github and npm. If the Tag was not pushed the workflow should fail, like in this example repo.

Additional context

relates to #65

Description

The project dlr-eoc/owc-control does not add much useful anymore.
As discussed here, it used to be useful because it added a download-functionality in combination with saving current state as OWC-Json, but that download functionality is now also available in @dlr-eoc/utils-browser.

As such, this project can be removed.

• Does this change impact existing behaviors? If so how?
  • No, the project has not been used anywhere else in the frontend-libraries, and neither has it been used in any other projects derived from FELibs as far as I could find.

Relevant Package

This feature request is for @dlr-eoc/owc-control

Description

When a CustomLayer is used, it is possible to listen on "OpenLayers" events for the layer or the source e.g. source.on('tileloadend', () =>)
Such an interface should also be available for UkisLayers (RasterLayer | VectorLayer)

Popups are also sometimes needed for several events e.g. show something on click and something different on move.

I would propose to use one Interface for all this Events because the are all bound to the layer and then remove the Layer.popup.
This would be a breaking change, but then there is only one interface for events which looks nearly the same for all.

export interface ILayerMapEvent {
  event: 'click' | 'dblclick' | 'pointermove';
  popup?: Layer['popup'];
  listener?: (args?: any) => void;
}

export interface ILayerBaseEvent {
  event: 'postrender' | 'prerender' | string;
  listener: (args?: any) => void;
}

export interface ILayerSourceEvent {
  event: '<source>loadend' | '<source>loadstart' | '<source>loaderror' | string;
  listener: (args?: any) => void;
}

export interface ILayerOptions {
...
  events?: {
    map?: ILayerMapEvent[];
    layer?: ILayerBaseEvent[];
    source?: ILayerSourceEvent[];
  };
...

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/map-ol
• @dlr-eoc/services-layers

Examples

const eventLayer= new RasterLayer({
      ...
      events: {
        map: [
        { event: 'click', 
          popup: {
              dynamicPopup: {
                component: TablePopupComponent,
                getAttributes: (args: IDynamicPopupArgs) => {
                   return { data: args.properties };
                 }
              }
          } 
        }, 
        { event: 'pointermove', popup: true },
        // the dblclick is currently used to remove all open popups so we have to check how this is working together!
        { event: 'dblclick', 
          popup: {
             pupupFunktion: (obj) => { ... }
          } 
        }],
        source: [{
          event: 'tileloadstart', listener: (arg) => {
            ...
          }
        },
        {
          event: 'tileloadend', listener: (arg) => {
            ...
          }
        }]
      }
      ...
    });

// Popup only example
const vectorLayer = new VectorLayer({
      ...
      // old implementation
      popup:  true,
      
      // new implementation
      events: {
         map: [{ event: 'click'  popup: true }]
      }
      ...
    });

Describe the bug

The LayerentryGroup Component only triggers LayersService.updateLayer() if the Layerentry Component emits a change.

package: @dlr-eoc/layer-control

To Reproduce

In e.g. demo-maps custom-layers:

1. Subscribe to LayersService.getLayerGroups()
2. Check if the subscription emits when the visibility of a layer in the group is changed.

Expected behavior

A visibility change of a Layer in the LayerGroup also should trigger a change for the LayerGroup if the visibility of the group changes.

Versions

App

• Angular: ~9.0.5
• Node: v12.13.0
• Clarity: 3.0.0
• UKIS: 7.1.0

Device:

• Type: Dell Notebook
• OS: Windows 10
• Browser Chrome(80), Firefox(68.5.0esr)

Description

To better handle dependencies management try to use NPM 7 workspaces with the monorepo.

• https://docs.npmjs.com/cli/v7/using-npm/workspaces

• https://dev.to/limal/simplify-your-monorepo-with-npm-7-workspaces-5gmj

• https://2ality.com/2021/07/simple-monorepos.html?utm_source=typescript-weekly.com&utm_campaign=typescript_weekly_175&utm_medium=email

// package.json
workspaces": [
    "projects/*",
    "scripts/*"
  ],
...

Dependencies management right now (NPM)

• there is on package.json in the root of the repo which includes all dependencies used in all the projects
• each project has its own package.json which includes:
  • peerDependencies to angular and overall used dependencies
  • the direct dependencies of the project and also other @dlr-eoc/projects are listed here as dependencies

Dependencies related to the Build process

Only use npm workspaces is not enough to build all the projects. Projects can also depend on other projects.

1. To create a build currently we get the list of all projects from angular.json
2. Then we get its dependencies (with scope @dlr-eoc) from the package.json (by using project.root from angular.json)
3. To check that all the projects which depend on other projects are listed correctly we use depcheck
4. Then we build a 'dependencies graph'
5. To get a legal build execution order we use toposort
6. To build the projects then we build each project in this order by ng build <project> --prod=true --watch=false

Description

VectorLayers have the property attribution, but it is not displayed on the map.

• What is missing? It would be nice to add an attribution to a vector-dataset.
• What is it useful for? Many datasets are served from our application, but stem from a third party.
• Does this change impact existing behaviors? If so how? No.

Relevant Package

This feature request is for @dlr-eoc/map-ol
Or if it is not fitting anywhere then a new @dlr-eoc/

Examples

In route-example-layers/route-map.component.ts add an attribution to the layer GeoJSON Vector Layer. It's not shown on the map.

Describe alternatives you've considered

We can add an attribution to the actions, but that would not be visible on the map.

Layer Popup only working on Custom Layers where the OpenLayers Layer in not instance of
ol/layer/Vector or ol/layer/VectorTile.

see:

• ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts

  Line 1047 in 63c4c8f

  } else if (layer instanceof olVectorLayer) {

• ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts

  Line 1049 in 63c4c8f

  } else if (layer instanceof olVectorTileLayer) {

• ukis-frontend-libraries/projects/map-ol/src/lib/map-ol.service.ts

  Line 884 in 63c4c8f

  if (layer instanceof olVectorLayer) {

Description

In our current workflow, it can take quite a long time until a new version is published.
Sometimes people need Stuff which is already in the master but we don't have created a new version for it.

Our current workflow to create a new version is described in DEVELOPMENT.md

In short:

1. If the master passes all tests and the build works without errors
2. We create a pull request with a release-<version> branch including
   • Update of CHANGELOG.md
   • Set NPM version according to Semantic Versioning
3. If the pull request is merged, push the tag (created from npm version)
4. The tag triggers the github actions Node.js Package

Relevant Package

This feature request is for @dlr-eoc/....

• all @dlr-eoc/

Examples

Prereleases Versions:

• https://semver.npmjs.com/
• https://semver.org/#spec-item-9
• https://medium.com/@mbostock/prereleases-and-npm-e778fc5e2420

Semver uses something like

alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1

We could try to allow pushing tags without the pull request procedure which are in a form like vX.X.X-<identifier>
Angular e.g. uses something like

11.1.0-next.0 < 11.1.0-next.3 < 11.1.0-rc.0 < 11.1.0

A 'Next' Version

• https://docs.npmjs.com/cli/v6/commands/npm-dist-tag#purpose

Furthermore we could tag all this prereleases versions with npm --tag next.

Maybe we can accomplish this all with

• https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-including-branches-and-tags
• https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-ignoring-branches-and-tags
• https://github.community/t/how-to-create-filter-on-both-tag-and-branch/16936/4

Description

A clear and concise description of the problem or missing capability...

• #103

Relevant Package

This feature request is for @dlr-eoc/....
Or if it is not fitting anywhere then a new @dlr-eoc/

Examples

Are there any examples in other projects that demonstrate this feature or enhancement?

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

Describe the bug

There appears to be an error in our current popup-typing.
The current master throws errors when building:

ERROR in projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:95:7 - error TS2322: Type '{ asyncPupup: (obj: any, cb: (html: any) => void) => void; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ asyncPupup: (obj: any, cb: (html: any) => void) => void; }' is not assignable to type 'false'.

95       popup: {
         ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'IRasterLayerOptions'
projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:272:7 - error TS2322: Type '{ properties: { title: string; type: string; }; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ properties: { title: string; type: string; }; }' is not assignable to type 'false'.

272       popup: { properties: { title: 'Title', type: 'Type' } }
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'IVectorLayerOptions'
projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:359:7 - error TS2322: Type '{ pupupFunktion: (obj: IAnyObject) => string; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ pupupFunktion: (obj: IAnyObject) => string; }' is not assignable to type 'false'.

359       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'IoptionalIWmtsOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:101:7 - error TS2322: Type '{ single: true; }' is not assignable to type 'boolean
| string[] | popup'.
  Type '{ single: true; }' is not assignable to type 'false'.

101       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'IVectorLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:126:7 - error TS2322: Type '{ event: "move"; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ event: "move"; }' is not assignable to type 'false'.

126       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:172:7 - error TS2322: Type '{ event: "move"; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ event: "move"; }' is not assignable to type 'false'.

172       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3m
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:201:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ filterkeys: string[]; }' is not assignable to type 'false'.

201       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:218:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ filterkeys: string[]; }' is not assignable to type 'false'.

218       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:281:7 - error TS2322: Type '{ event: "move"; filterkeys: string[]; properties: { name: string; }; options: { autoPan: false; }; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ event: "move"; filterkeys: string[]; properties: { name: string; }; options: {
autoPan: false; }; }' is not assignable to type 'false'.

281       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:337:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
  Type '{ filterkeys: string[]; }' is not assignable to type 'false'.

337       popup: {
          ~~~~~

  projects/services-layers/src/lib/types/Layers.ts:120:3
    120   popup?: boolean | Array<string> | popup;
          ~~~~~
    The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'

To Reproduce

Steps to reproduce the behavior:

1. Git pull the latest master
2. npm install and npm run start
3. Go to DemoMaps/layers
4. See error

If possible provide a link to a reproduction scenario.

Expected behavior

The compiler should not complain.

Versions

App

• Angular: 10.0.14
• Node: v12.13.0
• Clarity: 4.0.0
• UKIS: master
• Typescript: 3.9.7 (as per package-lock; project-specific)

Device:

• Type: [e.g. MacBook]
• OS: Windows 10 (1809)
• Browser: Chrome
• Version: 87.0.4280.141

Description

Currently, OlLayers are created from UkisLayers in map-ol.service.ts via the create_*_layer methods.
At the same time, updates to OlLayers from UkisLayers happen in map-ol.component.ts via the update*LayerParamsWith methods.

• This is inconsistent. It would be better for new developers to see all UkisLayer/OlLayer conversion in just one place.
• While changing (or even removing) the public methods update*LayerParamsWith would, strictly speaking, be an API change, I couldn't find any call to those methods from outside of map-ol.component at any point. In other words: this would, in my eyes, not constitute a significant change in API.

Relevant Package

This feature request is for @dlr-eoc/map-ol

Describe the bug

When you create an instance of InterpolationLayer, just like in the example shown in route-map4.component.ts

in the current master branch olMap complains that there is no renderDeclutter defined:

ERROR TypeError: this.getRenderer().renderDeclutter is not a function
    renderDeclutter BaseVector.js:226
    renderFrame Composite.js:135
    renderFrame_ PluggableMap.js:1402
    animationDelay_ PluggableMap.js:186
...

To Reproduce

Steps to reproduce the behavior:

run mentioned above example

Expected behavior

no error and working interpolation renderer

Versions

App

• Node: [e.g. 4.15.0]
• UKIS and dependencies as in the master branch of this repo

Device:

• Type: DELL notebook
• OS: Windows 10
• Browser Chrome, Edge, Firefox

Additional context

as a temporal workaround I use following after constructing the layer:

InterpolationLayer.custom_layer.renderDeclutter = () => {};

Description

Allow to pass a Angular Component in the layer popup so a user can create custom content in popups.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/map-ol

Description

We have the owc-json.service.ts to parse ows context json files and create layers from them.

In the beginning we created a typings file by hand using the following resources

• http://www.owscontext.org/
• https://docs.opengeospatial.org/is/14-055r2/14-055r2.html#40
• https://github.com/opengeospatial/owscontext/tree/master/json/dev/trax/json
• https://github.com/opengeospatial/owscontext/blob/master/json/dev/validation/owc-schema.json

The we created some extensions for our need. About a month ago we got a more complete json schema from Open Geospatial Consortium. Now we should try to use existing properties in the standard and only extend the schema if there is nothing which fits our needs.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-ogc

Description

Allow to merge some layers in LayerGroup so the are displayed in the UI as one.
E.g. for Baselayers which should be created of multiple layers together or a group which should display a map and text overlays as one layer.

Relevant Package

This feature request is for

• @dlr-eoc/services-layers
• @dlr-eoc/map-ol

Examples

// @dlr-eoc/services-layers
new LayerGroup({
  id: ...,
  name: ...,
  layers: [ layer1, layer2, layer3, layer4,  layer5, layer6]
  mergedLayers?: [ [layer1.id, layer2.id], [layer5.id, layer6.id] ]
  filtertype: ...
})

// @dlr-eoc/map-ol
const layer1and2 = new olLayerGroup({
    layers: [
      new olTileLayer({
        source: new olTileWMS({
          url: 'https://geoservice.dlr.de/eoc/basemap/wms',
          params: { LAYERS: 'litemap', TILED: true },
          serverType: 'geoserver',
          transition: 0,
        }),
      }),
      new olTileLayer({
        source: new olTileWMS({
          url: 'https://geoservice.dlr.de/eoc/basemap/wms',
          params: { LAYERS: 'liteoverlay', TILED: true },
          serverType: 'geoserver',
          transition: 0,
        }),
      })
    ]
  })

CustomLayer({
  ...
  custom_layer: layer1and2
})
...

// recreate layers
LayerGroup.layers 

Description

The services-ogc implements a lot of functionality https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v7.2.0/projects/services-ogc/src/lib.
Currently only owc, wps and wmts are exported.

• https://github.com/dlr-eoc/ukis-frontend-libraries/blob/v7.2.0/projects/services-ogc/src/lib/services-ogc.module.ts
• https://github.com/dlr-eoc/ukis-frontend-libraries/blob/v7.2.0/projects/services-ogc/src/public-api.ts

At least the wms service should also be exported. Otherwise the not available in the npm package!

Relevant Package

@dlr-eoc/services-ogc

Describe the bug

Running the demo-maps project in ukis-frontend-libraries fails with the error-message:

error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add `node` to the types field in your tsconfig.
190           data.content.map(c => Buffer.from(c, 'base64').toString('ascii'));

To Reproduce

Steps to reproduce the behavior:

1. Run 'npm run start'
2. See error

Versions

App

• Angular: 11.2.14
• Node: 16.7.0
• Clarity: 5.1.1
• UKIS: 7.3.2-next.3

Device:

• Type: Notebook
• OS: Windows
• Browser Chrome 93.0.4577.63

Additional context

The error is quickly fixed by adding "types": ["node"] to demo-map's tsconfig.app.json. But: we cannot expect every user of our libraries to alter their tsconfig for us. Instead it would likely make sense to use a browser- and node-compatible version of Buffer, like this one, as suggested here

Describe the bug

If a custom olControl is added with the MapOlService on ngOnInit it gets removed by 'MapOlService' because of this.map.getControls().clear which was added to prevent duplicates in the Controls array.

This should be done later in the MapOlComponent so Controls added before AfterViewInit can be saved and restored.

package: @dlr-eoc/map-ol

To Reproduce

In e.g. demo-maps custom-layers:

1. Add a custom olControl on ngOnInit

ngOnInit(): void {
    ...
    this.mapSvc.map.addControl(new CustomOlControl());
  }

2. The Control is not displayed.

Expected behavior

It should add the Control on ngOnInit and not only on AfterViewInit.

Describe the bug

When using a dynamic component on the layer-control, the Input for layer lost its type/Instance.

To Reproduce

Steps to reproduce the behavior:

1. Create a component for e.g.

new VectorLayer({
...
  action: {
    component: LayerTimeSliderComponent
  }
...
});
...

2. In this component try to test for the instance of the layer Input

...
// or other layer types e.g. CustomLayer, Layer...
if (this.layer instanceof VectorLayer) {

}
...

3. Then the layer is not of the same instance like it was bevor.

Expected behavior

The layer in the component should have its original instance/type.

Versions

App

• UKIS: [v7.3.0-next.3]

Additional context

Looks like the problem was introduced due to 5fdf8f8#diff-2423eff9797ad539c788180b6491bc59b135313011967ce6b2bce186538e5063 so the instance is only a object.

...
const layerClone = Object.assign({}, layer);
...

Description

The property CustomLayer.custom_layer is of type any so it is hard to get code completion for this object.

It would be helpful if a user could set a optional type via. Generics https://learntypescript.dev/06/l6-generic-parameter-defaults

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers

Examples

export interface ICustomLayerOptions<T = any> extends Omit<ILayerOptions, 'type'> {
  type?: TLayertype;
  custom_layer: T;
}


export class CustomLayer<T = any> extends Layer implements ICustomLayerOptions<T> {
  type = CustomLayertype;
  custom_layer: T = {} as T;
  constructor(options: ICustomLayerOptions<T>) {
    super(options as ILayerOptions);
    Object.assign(this, options);
  }
}

so it could be used like below

const customHeatmapLayer = new CustomLayer<olHeatmapLayer>({
      id: 'heatmap_layer',
      name: 'Heatmap Layer',
      custom_layer: new olHeatmapLayer({
        ...
      })
});

Describe the bug (1)

When using the new array interface popup[]

...
popup: [{
  event: 'move',
  options: { autoPan: false }
}]

the options object of popup is not merged with overlayoptions

Expected behavior

The options object of popup should be merged with overlayoptions.

Versions

App

• UKIS: 7.3.2-next.3

Description

Create a documentation with css classes are useful (e.g. <clr-vertical-nav class="right">) and how the structure of the layout is created by the core-ui schematics.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/core-ui

Describe the bug

The Package ukis-libraries-scripts uses depcheck, to check for missing dependencies before building libraries.

The options parsers are not correct, as noticed in this Issue depcheck/depcheck#319 (comment)

It should be

...
parsers: { // the target parsers
    '**/*.ts': depcheck.parser.typescript
  },
...

Versions

• ukis-libraries-scripts: 2.0.0

Description

While there is a LayerType 'wfs' in services-layers, currently when adding a new VectorLayer of type 'wfs', nothing is being displayed in a ol-map. The reason is that map-ol does not currently support the conversion of UkisLayers of type 'wfs' to OlLayers.

We're currently in the process of adding support, but there are a few design decisions that I'd like to discuss.

CQL-filters

Occasionally, we want a user to be able to specify filters with their request. The question is, then, where we should specify those filters?

Naively, one option would be to add a new field to services-layers/IVectorLayerOptions like so:

export interface IVectorLayerOptions extends ILayerOptions {
  /** data: geojson data */
  data?: any;
  url?: string;
  subdomains?: Array<string>;
  /** vector options like style, pointToLayer... depends on the map-library */
  options?: {
    /** ol/style/Style */
    style: any;
    [k: string]: any;
  };
  /** Only if type is 'wfs'. Allows user to only select certain properties of a  WFS-feature */
  cqlFilter?: string;
  /** if true clusters points | or set a Object with cluster options e.g. distance ... depends on the map-library */
  cluster?: boolean | IAnyObject;
  type: TVectorLayertype;
}

But there may be a better place for this - I'm very happy for all feedback on this!

Dimensions

services-layers/ILayerOptions already has a field dimensions.
In our timeslider this field is used for WMS-Layers to create dots where time-values are.
The WFS protocol, contrary to WMS, does not have a TIME parameter. Yet the case can come up where a WFS-feature has different properties that are associated with different timesteps.

Maybe we should reflect this case in the dimensions property. For example, the interface ILayerTimeDimension might contain a field mapping feature-properties to timestamps.

Again, I'm not biased here - this idea has pro's and con's.

• Pro: allows to time-enable WFS'es just like WMS'es, so we can use them in the timeslider.
• Con: Quite complicated. Mostly it bugs me that this might be non-orthagonal to the CqlFilter property discussed above.

• Does this change impact existing behaviors? If so how?
  This would only extend map-ol functionality to WFS'es, not impact any existing features.

Relevant Package

This feature request is for @dlr-eoc/map-ol

Examples

Are there any examples in other projects that demonstrate this feature or enhancement?

This issue arose from the currently ongoing work in WUEKIS, but also on CoastalX, both of which use a timeslider.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

Yes, the obvious alternative to adding WFS support to map-ol is using CustomLayers.

Before, when using WFS'es in openlayers maps, we have created instances of CustomLayer. However, CustomLayer is designed to allow the programmer to manually create a ol-layer. That is quite specific.

In many of our projects, we read layers, including WFS'es, from configuration files (like OWC-json). We might want to use those UkisLayers in cesium or threejs-maps as well, so creating a CustomLayer here is not really a sustainable solution.

In other words, this works easily:
owc-json -> UkisVectorLayer -> any mapping library
Whereas this requires custom work for each mapping library:

owc-json -> CustomLayer<ol> -> map-ol
owc-json -> CustomLayer<three> -> map-three
owc-json -> CustomLayer<cesium> -> map-cesium

Description

The LayerGroup and Layer should have an optional attribute 'css-class' which can be used for custom styling in the layer-control.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/layer-control

Describe the bug

If there are too many navigation- or action-elements in the HeaderComponent or they too long then the header has a overflow.
See Clarity Issue Put overflow items in a dropdown and Clarity Top Level Navigation max items

packages:

• @dlr-eoc/core-ui
• demo-maps
• demo-auth

To Reproduce

Serve *demo-maps and set the Screen width between 768px and width of the header e.g. 1170px.

Expected behavior

The elements should be placed in the burger menu if they are taking too much width or there should be some kind of expand possibility so the header does not overflow.

Versions

App

• Angular: ~9.0.5
• Node: v12.13.0
• Clarity: 3.0.0
• UKIS: 7.0.0

Device:

• Type: Dell Notebook
• OS: Windows 10
• Browser Chrome(80), Firefox(68.5.0esr)

Additional context

A temporary workaround can be to use a scrollbar witch works but dont looks nice.

$max-header-width: ...px;
@media screen and (min-width: 768px + 1) and (max-width: $max-header-width) {
  .header-1 {
    overflow-x: auto;
    overflow-y: hidden;
    height: 3.7rem;
  }
}

Description

It looks like Clarity is not bringing any new Features into Clarity Angular and Only provides bug fixes for currently implemented stuff.

Our strategy with Clarity Angular is to support by addressing bugs and focus on stability...

• vmware-archive/clarity#2056 (comment)
• vmware-archive/clarity#2713 (comment)
• vmware-archive/clarity#3008 (comment)
• vmware-archive/clarity#1985 (comment)

So maybe we should also try to avoid the angular specific components end try to use Clarity Core when possible https://clarity.design/get-started/developing.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

So far none.

Description

The dynamic component provided from core-ui is not synchronising the changes of their inputs.

So if we pass some objects as input, work with this objects in the component, then the parent is not getting notified.
Or when the component is created with initial inputs and updated later this inputs are not set.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/core-ui

Additional context

As a workaround it would be possible to use the Angular Dependency injection e.g. a ValueProvider to bind an object between the parent component and the dynamic component.

Describe the bug

If the Popup for the Layer is configured with a object and event is set to move, sometimes the popup is not removed when the user leaves the feature/layer.

new Layer({
      ...
      popup: {
        event: 'move',
      }
}
      

To Reproduce

Check the VectorTileLayer in demo-maps .

Expected behavior

The Popup should be removed for a move event when the user leaves the feature/layer.

Versions

App

• Angular: [10]
• Clarity: [4.0.0]
• UKIS: [7.2.0]

Describe the bug

If a CustomLayer is used with a olLayerGroup an error is generated when addUpdateLayers is called because olLayerGroup don't have a get source function.

package: @dlr-eoc/map-ol

To Reproduce

In e.g. demo-maps custom-layers:

1. Add a CustomLayer with a olLayerGroup

... 
  new CustomLayer({
      id: 'customLayerOlGroup',
      name: 'cluster Layer OlGroup',
      visible: false,
      popup: true,
      custom_layer: new olLayerGroup({
        layers: [
          new olTileLayer({
            ...
          }),
          new olTileLayer({
            ...
          })
        ]
      })
    });

...

2. See dev tools logs.

Expected behavior

It should be possible to use a olLayerGroup in the CustomLayer without getting errors.

Describe the bug

Calling layersSvc.updateLayer(someVectorLayer) has no effect. The reason is that MapOlComponent.updateLayerParamsWith has no case for VectorLayers.

To Reproduce

A testcase has been set up in Route 3 (Events) of the demo-maps in the new branch feature-update (https://github.com/dlr-eoc/ukis-frontend-libraries/tree/feature-update)

Expected behavior

Upon calling updateLayer, the given layer should be updated.

Observations & attempted fixes

It initially seemed simple to just add another case to the method updateLayerParamsWith, which I have done in this branch.
But remarkably, now the updated layer disappears from the map altogether. I could so far not figure out what is going wrong there. Note that calling layer.setSource works perfectly fine in a simple ol-only-application.

Versions

App

• Angular: 10.0.14
• Node: v12.13.0
• Clarity: 4.0.0
• UKIS: HEAD

Device:

• Type: Laptop
• OS: Windows
• Browser Chrome
• Version 86.0.4240.193

Description

Right now all packages are only published on GitHub.
In some cases it would be good to have them on Npm as well e.g. Stackblitz Templates also Npm don't needs authentication for downloading packages.

Relevant Package

• All packages @dlr-eoc

Description

Allow to pass a Angular Component in the layer settings div so a user can trigger functions and UI elements which are only for that layer.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/layer-control

Describe the bug

The getting started section of our documentation describes how to set up a ukis project. Unfortunately, the current version of angular (13) and the current version of @clr/angular (12) are not compatible with each other

To Reproduce

ng new proj
cd proj
ng add @clr/angular

Yields error message:

‼ Unable to find compatible package.  Using 'latest' tag.
‼ Package has unmet peer dependencies. Adding the package may not succeed.

The package @clr/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.0" from @clr/[email protected]
npm ERR! node_modules/@clr/angular
npm ERR!   @clr/angular@"12.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\lang_m13\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lang_m13\AppData\Local\npm-cache\_logs\2021-11-15T10_49_26_348Z-debug.log
× Package install failed, see above.

Expected behavior

We should either document that we currently require angular 12, or update ukis to use the latest version of clarity (probably with webcomponents only).

Versions

App

• Angular: @angular/[email protected]
• Node: v.16.13.0
• Clarity: @clr/[email protected]
• UKIS: not yet installed at this point of the reproduction

Additional context

Add any other context about the problem here.

Describe the bug

Min and max Resolution is only set for CustomLayer but it should be set for all other ukis-layers which create a type olBaseLayer.

Furthermore it would also be helpful if the user can set min/max Zoom for the layer as well.

package: @dlr-eoc/map-ol and @dlr-eoc/services-layers

To Reproduce

In e.g. demo-maps layers:

1. Set min/max Resolution on e.g. a WmtsLayer

   WmtsLayer({
      ...
      maxZoom: 8
      ...
    });

2. The Layer is displayed for all zoom steps.

Expected behavior

The layer should not be displayed on zoom higher 8.

Describe the bug

The Attribution Control is displayed twice if one layer forces non collapsible Attributions.

package: @dlr-eoc/map-ol

To Reproduce

In demo-maps custom-layers:

1. Add a Layer which don't forces collapsible Attributions e.g. EocLitemapTile
2. Add a second Layer which forces collapsible Attributions e.g. CustomLayer with source OSM.

Expected behavior

There should only be one Attribution Control.

Versions

App

• Angular: ~9.0.5
• Node: v12.13.0
• Clarity: 3.0.0
• UKIS: 7.0.0

Device:

• Type: Dell Notebook
• OS: Windows 10
• Browser Chrome(80), Firefox(68.5.0esr)

Describe the bug

With the current master branch, executing

npx ng generate library <library-name>

fails with the error-message:

Cannot find base TypeScript configuration file 'tsconfig.base.json'.

A little research brought up evidence that others, too, have experienced a similar issue, and - with a little luck - a way to resolve it. In short, it seems that angular's update did not separate our tsconfig.json into a tsconfig.base.json (which all projects inherit from) and a stub tsconfig.json (which seems to only remain there for the sake of IDE's like VSCode).

I'll attempt to properly split our config in those two files.

To Reproduce

From the root-directory, run

npx ng generate library <library-name> (--dry-run)

Expected behavior

Putting it a little matter-of-fact-ly: generating libraries should work.

Versions

App

• Angular: [10.0.8]
• Node: [v12.13.0]
• Clarity: [3.1.5]
• UKIS: [7.1.0]

Device:

• Type: [Notebook]
• OS: [Windows]

Additional context

As a side note, this issue only occurs when generating libraries. I didn't encounter any errors in e.g. generating components - which makes sense, since new components don't need a new tsconfig-file.

Description

Right now there is no possibility to translate some of the used strings for titles and default values in our components e.g.:
in @dlr-eoc/layer-control - 'Opacity', 'Layer Setting', 'Layer Legend', 'Layer Info'...

We need a general way how to translate the components we provide in your library so it is possible to create applications with multiple languages.

Relevant Package

• All packages which include fix strings in templates.

Examples

Clarity Design uses something like a 'CommonStringsService' (so bindings to all labels and text)

• https://github.com/vmware/clarity/blob/96ed85abd18db0087c8489cfd9614ab9baecc154/packages/angular/projects/clr-angular/src/forms/datepicker/daypicker.ts#L25
• https://github.com/vmware/clarity/blob/96ed85abd18db0087c8489cfd9614ab9baecc154/packages/angular/projects/clr-angular/src/forms/datepicker/daypicker.html#L28

Clarity Design Core
vmware-archive/clarity#4502 -> https://clarity.design/storybook/core/?path=/story/foundation-internationalization--page

Angular Material uses something like a 'class instance' extension

• https://github.com/angular/components/blob/ecf41053970fdafefce4b0533b161fe241a7051a/src/material/paginator/paginator-intl.ts#L18
• https://github.com/angular/components/blob/ecf41053970fdafefce4b0533b161fe241a7051a/src/material/paginator/paginator.html#L37
• https://stackoverflow.com/a/60127007

ng-bootstrap uses angular i18n

• https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/pagination/pagination.ts#L124
• https://ng-bootstrap.github.io/#/getting-started#i18n

ag-grid

• https://www.ag-grid.com/documentation/javascript/localisation/

...object of key/value pairs via the localeText property...

Angular Ant Design

• https://ng.ant.design/docs/i18n/en

Carbon Components Angular

• https://angular.carbondesignsystem.com/documentation/classes/src_i18n.i18n.html

...internal singleton service...

Angular DevExtreme

• https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/Angular/Light/

npm https://www.npmjs.com/package/globalize

Angular Fancy grid

• https://fancygrid.com/docs/grid-concepts/localization

init config object

Ignite UI for Angular

• https://www.infragistics.com/products/ignite-ui-angular/angular/components/localization

Angular Kendo

• https://www.telerik.com/kendo-angular-ui/components/globalization/localization/

Angular Nebular

• akveo/nebular#398

ng-lightning

• https://github.com/ng-lightning/ng-lightning/issues?q=is%3Aissue+i18n

Angular PrimeNG

• https://primefaces.org/primeng/showcase/#/i18n

Angular TrulyUI

• https://truly-ui.com/i18n

Angular vaadin

• https://vaadin.com/docs/v14/flow/advanced/tutorial-i18n-localization.html

Angular wijmo

• https://www.grapecity.com/wijmo/docs/GettingStarted/Globalization

Describe alternatives you've considered

• https://angular.io/guide/i18n
• https://github.com/ttag-org/ttag
• https://github.com/ngx-translate/core
• https://github.com/Romanchuk/angular-i18next

Description

• Add possibility to hide Layers/Groups in @dlr-eoc/layer-control without removing them from the LayersService.
• Allow dynamic Angular Components for Groups (like for Layers with action?: IDynamicComponent) // #12

Relevant Package

• @dlr-eoc/layer-control
• @dlr-eoc/services-layers

Describe alternatives you've considered

Set the Layer/Group cssClass property and then hide the item with style

::ng-deep ukis-layerentry-group.hide {
   height: 0;
   margin: 0;
   padding: 0;
   border: none;
   visibility: hidden;
   z-index: -1;
}

Description

The LayerGroup and Layer should have an attribute to expand there 'settings' in an UI component - e.g. set propperty 'expanded' in LayerentryComponent and 'openProperties' in LayerentryGroupComponent.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/layer-control

Description

We're close to issuing a ukis-version 8.0. To this occasion, maybe cleaning up some places in the code could be useful.
Last time we did that, there were just too many changes coming together at once, so here I'll try to handle things on a small-issue basis, so that things don't go out of hand.

Concretely, here is a potential chance for some cleaning up: in the method LayersService.addLayer, to we still need the toGroup parameter?
I don't really understand toGroup anyway. I don't think that this method does anything when toGroup is given!

/**
   * Adds a ukis Layer to the Layerservice Store
   * filtertype: TFiltertypes
   * if filtertype is not provided the filtertype of the Layer is used!
   *
   * if toGroup is true the layer is not added to the list of Layers and storeItems. Only used  internally.
   */
  public addLayer(layer: Layer, filtertype?: TFiltertypes, toGroup?: boolean) {
    if (!this.isInLayergroups(layer)) {

      if (!filtertype) {
        filtertype = layer.filtertype;
      } else {
        // set filtertype of Layer!!
        layer.filtertype = filtertype;
      }

      const storeItems = this.store.getValue();

      if (toGroup) {
        this.filterFiltertype(filtertype);  // <-- updates baselayers, layers and overlays with store's current contents.
      } else {
        storeItems.push(layer);

        this.store.next(storeItems);
        this.filterFiltertype(filtertype);  // <-- updates baselayers, layers and overlays with store's current contents.
      }
    } else {
      console.error(`layer or Group with id: ${layer.id} already exists!`);
    }
  }

• Removing this parameter would make the code a lot more readable and understandable for new users.
• I've grepped for any usage of toGroups in the libraries and couldn't find any. Neither was it used in any ukis-project that I've ever worked on. I'm almost positive that this option is no longer used.

Relevant Package

This feature request is for @dlr-eoc/services-layers

Description

Update the licenses for the current dependencies used in demo maps and check how to do this automatically (e.g. on a new build of all libraries).

Relevant Package

This feature request is for @dlr-eoc/....

• demo-maps

Describe the bug

TypeError: args.dynamicPopup.getAttributes is not a function

occurs when adding a dynamic popup to a ukis-WmsLayer

To Reproduce

1. Code:

layer.popup = {
            dynamicPopup: {
                component: WindparkPopupComponent,
                // getAttributes: 
            }
        };

2. Error:

ERROR TypeError: args.dynamicPopup.getAttributes is not a function
    at MapOlService.createDynamicPopupComponent (dlr-eoc-map-ol.js:1443)

Expected behavior

Should work without getAttributes - or, less optimal, make getAttributes required.

Versions

App

• Angular: [11.2]
• UKIS: [7.3.1]

Describe the bug

I just red the discussion here regarding memory leaks in openlayers due to raster-sources: openlayers/openlayers#10856

The gist of it seems to be that we, the user, need to make sure that a raster-source-worker is disposed of when we no longer need a source.
Citing:

If your application is creating many new sources over time (case 1), then it is the responsibility of your application to call source.dispose() when you no longer need an old source.

I don’t think that we already do this in ukis.

To Reproduce

Steps to reproduce the behavior:

I haven't created a reproduction yet, but wanted to document this potential problem in the form of an issue before it gets forgotten.
Theoretically, to reproduce the problem:

• add a raster-source layer that uses webworkers (that is, one with threads: >0
• remove it from the map
• measure memory usage and note that the layer's memory has not been freed up

Expected behavior

Openlayers does not seem to want to take responsibility for the webworker memory-management... so the expected behavior is for us, the application developers, to discard of webworkers when no longer required.

Versions

• "@angular/core": "~12.2.5",
• @dlr-eoc/[email protected]

Description

Allow layer.legendImg to be a Angular Component so legends can be created dynamically.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/layer-control

Describe the bug

The LayerentryComponent showsa misleading title on hover state when radio button is used with the BaseLayerControlComponent.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/clarity-v4-dlr-eoc-ukis-v7-map
2. Hover a selected 'baselayer'
3. Then it shows Hide layer

Expected behavior

Something like choose another layer would be better and also use other icons e.g. circle and dot-circle which look more like normal radio buttons.

Versions

App

• Angular: [e.g. 10.0.14]
• Clarity: [e.g. 4.0.1]
• UKIS: [e.g. 7.2.0]

Relevant Package

This feature request is for @dlr-eoc/....

@dlr-eoc/layer-control

Description

Popups don't appear on transparent features - not even if they have non-transparent outlines.

• What is missing? Popups on the bodies of polygons with transparent fill
• What is it useful for? Polygons may become more transparent upon zoom. Or they may be deliberately set fully transparent to allow inspecting the underlying layer (like osm)

Relevant Package

This feature request is for @dlr-eoc/map-ol

Examples

Steps to reproduce the behavior:

1. In route-map4.component.ts, edit GeoJson - VectorImageLayer ocean by set alpha to 0 for the olFill. Leave olStroke untouched.
2. Hover over the layer
3. A popup appears briefly when touching the outline of a polygon, but no popup is shown over the bolygon-fill.

Describe alternatives you've considered

Just using a very low alpha is possible, but not quite intuitive.

Description

Get the native layer (e.g. ol/layer/...) from the ukis-layer in the LayersService, so there is the possibility to work with the object reference of this layer later, so for some use cases (like to trigger a change in the layer) all functionality of the native layer can be used and has not to be integrated in the generic 'ukis-layer'.

Describe alternatives you've considered

As a workaround now we have to use a CustomLayer so we can get the custom_layer property back to use it.

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/services-layers
• @dlr-eoc/map-ol

Description

• Update the angular packages to the new version 11
• Update all other dependencies if possible