looker-open-source / components

Looker's UI Components, Design Infrastructure and more

This repository hosts the Looker UI Components library and the platform needed to generate our style guide. If you're looking for documentation for using Looker UI Components within your own application, you can view the documentation online on our web site.

Bugs & Feature Requests

Please file issues on Github Issues

Packages

• @looker/components — The shared component library which powers various Looker applications
• @looker/design-tokens — Default design values as well as our connection to styled-system
• @looker/icons — SVG icon library, normally consumed by the <Icon /> component in our shared component library
• @looker/components-test-utils — Useful functions for mocking values and testing components.

components's Issues

Duplicated tooltip for titleIcon in DataTable

Hello,

When titleIcon prop is used to replace title with icon in DataTable, when icon is hovered both system and custom tooltip are rendered. The bug occurs in Safari, Firefox and Chrome.

https://codesandbox.io/s/unruffled-bose-5k3km?file=/src/index.tsx

Display visualisation of version controlled dashboard

We are trying to load a dashboard we have in version control eg. customer_lifetime_value

I am using model::dashboard as an example

                    <DataProvider sdk={sdk}>
                        {/* Change this query slug to match your query slug */}
                        <Query dashboard="prod_report::customer_lifetime_value">
                            <Visualization/>
                        </Query>
                    </DataProvider>

I can see it successfully make a call and get the dashboard_elements from the looker API.

However most of the info eg. query_id etc is blank.

Do you know a way around this?

Pagination component disables "first page of results" button when on second page

https://components.looker.com/components/actions/pagination

It does however enable the button once on third page of results.

Add more vis config options

Hi,

Are there any plans to add more vis config options to the Visualization components config prop to match the edit options when exploring data in looker itself?
Things like creating multiple y-axes, hiding view names, choosing the rendered values rather than the raw ones?
e.g '20%' instead of 0.2

I have tested adding multi y-axis to the to the vis_config object when creating a query. The visualization component ignores them, however after saving the visualization to a dashboard with the api, the vis renders as expected.

Our use case is to build our own visualization editor so we can see what a graph looks like after configuring things like the y-axes before saving it to a dashboard

Support for new endpoint query ID behavior

We recently received the notice regarding changes to how query IDs are handled. It appears that the SDK uses numeric query IDs for calls to the affected endpoints in some instances, such as

components/packages/components-data/src/hooks/useQueryMetadata.ts

Line 71 in bff6103

return await sdk.query(String(id));

Are there plans to release an updated SDK that's compatible with these changes?

Thanks!

Invisible or shifted option lists in the Select component

Since using Looker Components (a few months), I struggle with unexpected paddings in components having overlays, like option lists in the Select component or tooltips. It significantly affects the user experience as users click on the Select component, and nothing happens, OR the list shows up in a random place - then usually zooming in or zooming out helps to find the opened list.

The issue is present only within the Looker context, so everything works on CodeSandbox and the components.looker.com page.

I have prepared a simplified version of my extension; the code is available on CodeSandbox - https://codesandbox.io/s/looker-select-issue-etkj0

In order to reproduce the issue, please copy the BugDemo.tsx file and use it as <BugDemo /> inside <ExtensionProvider2> component in the Looker extension. I am using Macbook Pro 13", so please shrink the browser window if you have a bigger display.

@looker/components version = 2.7.0
Looker instance version = 21.16.15

"Theme" no matching export from @looker/design-tokens

Hello, I'm trying to render some UI elements in my react application using the @looker/components library. It appears that "Theme"'s export from "node_modules/@looker/design-tokens/lib/module/index.js" was not found. More specifically, the @looker/components package exports "Theme" from @looker/design-tokens. In order to do so, it should first import that interface before exporting it, but it is unable to locate a compatible export from @looker/design-tokens package.

`
"@looker/components": "^4.1.3",
"@looker/components-data": "^1.0.3",
"@looker/embed-sdk": "^1.8.4",
"@looker/filter-components": "^1.0.3",
"@looker/sdk": "^23.10.0",
"@looker/sdk-node": "^23.10.0",
"@looker/sdk-rtl": "^21.6.1",
"@looker/visualizations": "^1.1.4",
"@looker/visualizations-adapters": "^1.0.3",

`
These are package versions that I'm using. All of them are latest stable versions according to npm.
Here are dependensios of @looker/component v4.1.3 lib:

`
"dependencies": {
"@looker/components-providers": "^1.5.31",
"@looker/design-tokens": "^3.1.1",
"@looker/i18n": "^1.0.0",
"@popperjs/core": "^2.6.0",
"@styled-icons/material": "10.34.0",
"@styled-icons/material-outlined": "10.34.0",
"@styled-icons/material-rounded": "10.34.0",
"@styled-icons/styled-icon": "^10.6.3",
"d3-color": "3.1.0",
"d3-hsv": "^0.1.0",
"date-fns": "^2.10.0",
"date-fns-tz": "^1.0.12",
"i18next": "20.3.1",
"react-i18next": "11.8.15",
"uuid": "*"
},

`
As can be seen, the @looker/components v4.1.3 package uses the @looker/design-tokens v3.1.1 library, which npm lists as the most recent stable version.

The error:

Is there a workaround or a future potential fix?
Thank you ahead of time.

High number of dependency vulnerabilities

Installing many looker packages leads to warnings around vulnerable packages.

Are these packages still supported?

Running fix doesn't fix the errors...

PM looker-playground % npm install @looker/filter-components

removed 940 packages, and audited 165 packages in 32s

12 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (6 moderate, 4 high)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
PM looker-playground % npm audit fix

up to date, audited 165 packages in 1s

12 packages are looking for funding
  run `npm fund` for details

# npm audit report

d3-color  <3.1.0
Severity: high
d3-color vulnerable to ReDoS - https://github.com/advisories/GHSA-36jr-mh4h-2g58
fix available via `npm audit fix`
node_modules/d3-hsv/node_modules/d3-color
  d3-hsv  *
  Depends on vulnerable versions of d3-color
  node_modules/d3-hsv
    @looker/components  *
    Depends on vulnerable versions of d3-hsv
    node_modules/@looker/components

request  *
Severity: moderate
Server-Side Request Forgery in Request - https://github.com/advisories/GHSA-p8p7-x288-28g6
No fix available
node_modules/request
  @looker/sdk  *
  Depends on vulnerable versions of @looker/sdk-rtl
  Depends on vulnerable versions of request
  Depends on vulnerable versions of request-promise-native
  node_modules/@looker/sdk
    @looker/filter-components  *
    Depends on vulnerable versions of @looker/components
    Depends on vulnerable versions of @looker/filter-expressions
    Depends on vulnerable versions of @looker/sdk
    Depends on vulnerable versions of @looker/sdk-rtl
    node_modules/@looker/filter-components
    @looker/filter-expressions  *
    Depends on vulnerable versions of @looker/sdk
    node_modules/@looker/filter-expressions
  @looker/sdk-rtl  *
  Depends on vulnerable versions of request
  Depends on vulnerable versions of request-promise-native
  node_modules/@looker/sdk-rtl
  request-promise-core  *
  Depends on vulnerable versions of request
  node_modules/request-promise-core
    request-promise-native  >=1.0.0
    Depends on vulnerable versions of request
    Depends on vulnerable versions of request-promise-core
    node_modules/request-promise-native

10 vulnerabilities (6 moderate, 4 high)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

New design of Tabs2

Hello,

Is there any way to remove the rectangle background for focused and hovered Tabs2 introduced recently?
Everything in @looker/components has rounded corners and usually also solid border.
I would prefer playing with the bottom border color for hover/focus effects, as it was before.
Currently Tabs2 component looks like something under development, as it stands out from the appearance of other components.

https://codesandbox.io/s/friendly-http-eg41o?file=/src/index.tsx

All the documentation links in components/packages/visualizations are 404s

ie from https://github.com/looker-open-source/components/blob/ec11d41fec6a79d8095b19b3213c5d3339a17965/packages/visualizations/README.md

current text with the 404 links..

API: https://cloud.google.com/looker/docs/reference/api-and-integration/api-getting-started
Looker extension framework: https://cloud.google.com/looker/docs/data-modeling/extension-framework/extension-framework-intro
standard charts: https://cloud.google.com/looker/docs/exploring-data/visualizing-query-results/visualization-types
Looker Visualization Components documentation: https://cloud.google.com/looker/docs/data-modeling/extension-framework/vis-components

Thank you

DashboardFilters display as inline even when popover is specified

I'm trying to have a minimal popover display for all my filters but the DashboardFilter component renders them as inline - the default is popover but it is still rendered as inline. Even if I manually change the UI config to be popover they are rendered as inline.

VisConfig `hiddenFields`

I would like to use the hiddenField part of the visConfig, but it looks like it is being sanitized

Select component inside Dialog loses focus after changing value

Hi,

We utilize Dialog component to create many kinds of forms in Looker, however we struggle with the weird behaviour of the Select component when used inside Dialog - every time the value of Select is changed, the component loses focus and the first form field in the Dialog gets it. Apart of this being confusing it also trigger scrolling to the top if dialong content is long. Is is possible to somehow disable this behaviour?

https://codesandbox.io/s/xenodochial-colden-t6zb7n?file=/src/index.tsx

Change Filter component options

Hi,

Is it possible to change the Filter component's available options? We want to use @looker/components library but we don't need all available options in the component.

Not working with vite (react js)

Hi there !

I'm currently integrating the @looker/visualizations library into a project that uses Vite(React). However, I've encountered an export error related to @looker/design-tokens.

Here's the error message that appears when I try to run the project with npm run dev:

✘ [ERROR] No matching export in "node_modules/@looker/design-tokens/dist/esm/index.js" for import "Theme"

    node_modules/@looker/components/lib/module/index.js:58:16:
      58 │ export { theme, Theme } from '@looker/design-tokens';
         │                 ~~~~~
         ╵                 theme

  Did you mean to import "theme" instead?

    node_modules/@looker/design-tokens/dist/esm/theme/theme.js:7:13:
      7 │ export const theme = {

To reproduce the problem, I've set up a StackBlitz here: Vite + @looker/components Example

Could you please advise on how to resolve this issue or if there's a workaround available? Thank you for your help!

Best regards

Tree indicator should allow to specify color

Hi Components team, ( @jhardy @lukelooker )

When trying to build a tree, the root Tree component has a default text4 color, that is used for text and indicator.
When you add a TreeGroup under the root tree with a different color, that color will override all the downstream use of the color, including the any subtree indicator present on that tree group.
The problem happens when you pass a label to the Tree with a different color than the TreeGroup, the colors between label and indicator will mismatch, creating an unpleasant UI.

Code example:

import React from "react";
import {
  Tree,
  TreeItem,
  TreeGroup,
  ComponentsProvider,
  Span,
  Text
} from "@looker/components";

export default function Example() {
  return (
    <ComponentsProvider>
      <div className="App">
        <Tree label="Root Tree" color="critical">
          <TreeItem>Item 1</TreeItem>
          <TreeGroup label="Blue TreeGroup" color="critical">
            <TreeItem>
              <Span color="text5">Group Item</Span>
            </TreeItem>
            <Tree label={<Text color="text5">Inner tree</Text>}>
              <TreeItem>
                <Span color="critical" variant="critical">
                  Nest Tree Item
                </Span>
              </TreeItem>
            </Tree>
          </TreeGroup>
        </Tree>
      </div>
    </ComponentsProvider>
  );
}

Screenshot

Code Sandbox

https://codesandbox.io/s/great-drake-uukss?file=/src/App.js

Solution suggestions

1. Change the indicator color

Today the AccordionIndicatorProps doesn't have a color property:

export interface AccordionIndicatorProps {
  indicatorPosition?: 'left' | 'right'
  indicatorSize?: IconSize
  indicatorGap?: SpacingSizes
  indicatorIcons?: IndicatorIcons
}

Adding a support to a color to the AccordionIndicatorProps and using it to set the color will solve the problem. Proliferation of props could be a problem here, since the interface is increasing.

2. Change the Tree component to receive a color

Instead of hierarch the color from the closes tree context, allow the tree to receive a color propriety to overwritten any default.

Filter suggestions don't work if your model name is different from your project name

When using the <DashboardFilter> component, suggestions never work if your model name is different from your project name. Reproduce with the following setup:

• Create a project called my-project-name
• Create a model called my-model-name.model
• Create a user-defined dashboard with a single filter on it and get the dashboard id - in my case the dashboard id is 153
• Create an extension app and try to add a <DashboardFilter> that points to the filter on the above dashboard

Project Setup

Dashboard Setup

Extension Framework Code

Here is the extension framework code I am trying to use to add the filter to a blank page. I fetch the filter from dashboard created above (id = 153) and then try to render the filter to the page. The filter gets rendered correctly but the suggestions do not show:

import React, {useEffect, useState, useContext} from 'react'
import {ComponentsProvider} from '@looker/components'
import {ExtensionContext2} from '@looker/extension-sdk-react'
import {DashboardFilter} from '@looker/filter-components'

export const FiltersDemo = () => {
  const [filter, setFilter] = useState(undefined)
  const {coreSDK, extensionSDK} = useContext(ExtensionContext2)

  // Get the first filter from sample dashboard 153 and od it into the 'filter' state
  useEffect(() => {
    const dashboard = '153';
    const loadFilter = async (id) => {
      const result = await coreSDK.ok(coreSDK.dashboard(id));
      const filter = result.dashboard_filters[0]
      setFilter(filter);
    };

    loadFilter(dashboard);
  }, [coreSDK])

  return (
    <ComponentsProvider>
      <div style={{width: '200px'}}>
        {filter ?
          <DashboardFilter
            key={filter.id}
            sdk={coreSDK}
            filter={filter}
          /> : 'Loading Filter'
        }
      </div>
    </ComponentsProvider>
  )
}

I get the following error on the filter and the suggestions do not show.

I think the problem is in the useSuggestable hook. Here you can see that the field.project_name is being passed through to model_fieldname_suggestions instead of the filter.model.

  model_fieldname_suggestions(sdk, {
    field_name: field?.suggest_dimension || '',
    model_name: field?.project_name || '', // <-------- issue here?
    term: searchTerm,
    view_name: field?.suggest_explore || field?.view || '',
  })

Apply components to Looker custom viz explore UI

Hello!

I'm looking to build some custom visualizations in Looker. I would like to apply components to organize chart options as the current set up is pretty limiting (see this old issue in the custom_visualizations repo: looker/custom_visualizations_v2#130) compared to the standard UI for native Looker charts. However -- and this may because I'm more of a data scientist than a FE SWE -- it's unclear to me whether components can be applied to custom visualizations in a Looker project or if they are only meant for external applications? If someone can advise, that would be fantastic.

Thanks!
Zoe

Load time for visualization

Hello!

I know this isn't the right repo, but the custom_visualizations_v2 has been archived. I have a custom visualization in Looker where all of the content, including the graph, loads very quickly. But the custom viz loading spinner in Looker is still spinning for ~a minute -- that's the 60s of dead time until the tile view is visible. And then after that to trigger an async update, I (as the user/viewer of the dashboard) have to physically do something to trigger the update (or render the graph, in other words).

I don't have control over the spinner or tile load times, so who can I talk to at Looker about this/where can I flag the issue? Support was unable to help because they can't help out with custom viz, although this is really adjacent to custom visualizations, given that I have no control over anything outside of the sandboxed iframe.

Any help would be greatly appreciated!

useSuggestable doesnt work

Hi,

when using useSuggetable im getting the following error:

i18next__WEBPACK_IMPORTED_MODULE_0__.default.hasResourceBundle is not a function

is there a way to fix this is there some important setting missing?

React version as a dependency

Hi,

we would like to utilize this library to implement our interface for looker dashboards, but I see that the published npm package requires a peer dependency with react@"^16.11", and to make things worse in the main branch of the repo, in package.json react 16 is set as a dependency.

Since this will cause 2 react versions in the dependency tree, would it be possible to make this UI library independent of the installed react version?

Some of the @looker packages are not on the npm registry anymore

I was trying to clone this repo to customize some of the components and I found out that you have some packages that may not be public?
@looker/babel-preset-prebuild-locales
@looker/babel-preset-react
@looker/babel-preset-styled-components
@looker/babel-preset-typescript
@looker/components-scripts
@looker/jest-config
@looker/storybook
@looker/test-utils

I wonder if this was intended, just to know if I should create them from scratch.
Please let me know, thanks!

onChange has undefined event

Within this code

`{dashboardFilters?.map((filter) => {

          return (

            <DashFilters 

              filter={filter || {}}

              expression={filterValues[filter.name] || filter.default_value}

              onChange={(event) => handleFilterChange(event, filter.name)}

              key={filter.id}

              token={currentDashboard.token}

            />

          );

        })}`

my event is always undefined (and thus I cannot use the value of the component in the function). Any idea as to why?

Button component sizing issue

Starting from version 2.8.7 Button component behaves unexpectedly, it shrinks too much when used inside Space along with other components. Maybe the bug was introduced in 2.8.6 as a part of adding ripple effect (according to the changelog), but I cannot choose 2.8.6 on codesandbox.

https://codesandbox.io/s/beautiful-hill-oxs3f?file=/src/index.tsx

Workaround is to wrap Button in div, like

<Space>
    <div><Button iconBefore={<Pivot />}>Add something</Button></div>
    ...
</Space>

home page link to Develop not working

Quick issue on the Home page.
When opening https://looker-open-source.github.io/components/latest/

there is an item in the center left:

Install
Visit the Develop page for instructions on installing @looker/components

However that link to Develop does not work.

It links to https://looker-open-source.github.io/develop/
but should link to https://looker-open-source.github.io/components/latest/develop/

Link to code: https://github.com/looker-open-source/components/blob/main/www/src/pages/index.tsx#L100

InputFilters docs page doesn't seem to work

https://components.looker.com/components/forms/input-filters

Clicking the first input and selecting "group" presents a radio select that I can't click on - it doesn't appear to be doing the right thing.

Additionally, note word "aditable" in first paragraph.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Filter cascading doesn't work

I am using using the FilterCollection and DashboardFilter to implement filter cascading.

Already having selected some values in multiple filters, if I select and deselect a value in one of the cascaded filter(with no selections made) and run .updateFilters function of embedded dashboard then the cascaded filter shows all values instead of only the cascaded values i.e. cascading disappears.

I can see the updateFilters is taking an empty object.
Can you please explain why this happens?

listens_to_filters not working in looker extension project

am referred the filterdemo project based on that project am calling the dashboard api with input parameters as id, and dashboard_filters .. i can able to render the dashboard filters in the looker extension project but the listens_to_filters are not working..

simple example :- in my case i have 4 filters .. when the user change the country value based on that Geo market and Region should change but its not happened . am sharing the code snippets
looker API method to get the dashboard filters :- var filtersvalues = await extensionContext.coreSDK.ok(extensionContext.coreSDK.dashboard(id.toString(), 'dashboard_filters'));

render the dashboard filters:-

{sortedFilters.map(filter =>
filter.id ? (
<DashboardFilter
key={filter.id}
sdk={extensionContext?.coreSDK}
filter={filter}
onChange={getChangeHandler(filter.name)}
expression={filter?.name ? filterValues[filter?.name] : ''}
/>
) : null
)}

Broken dependency on @looker/[email protected]

@looker/[email protected] depends on @looker/[email protected] which is not released on npmjs

4.0.3 available on npm but not on GitHub

Hello, is there a reason for not publishing new versions of Looker Components here on GitHub?
Where can I find a changelog for 4.0.3? The last update in the repo was five months ago.

React 18+ Providers error when FC is using children

package	version
typescript	4.9.4
react	18.2.0
@looker/components	4.0.4

I am getting a typescript error when using the <ComponentsProvider>:

Type '{ children: Element }' has no properties in common with type 'IntrinsicAttributes & ComponentsProviderProps'

See here:

Fix:
I personally ran into this problem when upgrading to react 18. FC properties no longer expect children, so custom properties need to be more explicit:

export interface ComponentsProviderProps extends ThemeProviderProps, ExtendComponentsTheme, UseI18nProps {
  // ...
}

// Should extend an additional React.PropsWithChildren<{}> type:
export interface ComponentsProviderProps extends ThemeProviderProps, ExtendComponentsTheme, UseI18nProps, React.PropsWithChidlren<{}> {
  // ...
}

I can make a PR for this if that helps.

Discrepancy in Table Calculation Handling Between Looker and Library (Single Value Component)

Hello,

I've noticed a discrepancy in how table calculations are handled in Looker compared to the library implementation for single value.

Issue Summary:

In Looker: When there's a table calculation, Looker displays this value as a priority.
In Library Implementation: This prioritization of table calculation values does not seem to occur.

Thank you for your attention to this matter.

components/packages/visualizations-single-value/src/SingleValue/SingleValue.tsx

Line 27 in 12cf1d9

const value: number = data[0][name || ''];

DashboardFilter Component isn't automatically encoding the special character in filter values

The DashboardFilter Component is not recognizing the filter values from suggestions having special characters such as '&' or '+'.
For Example:

If value selected is 'A&B Area Ltd+P Co',
then in network console, under suggestions?term=&filters= it is shows that payload is passed as
filters: {"view_name.example_filter":"\"A
B Area Ltd P Co\""}:

The filter cascading fails as well as a result and filters are not passed properly to dashboard as well.

Version 1.0.0 and 0.3.0 of @looker/visualization causing TS errors in project

Problem

Trying to add @looker/visualizations to a basic CRA project (with TS support) and running into issues just starting the project:

Uncaught Error: Module parse failed: Unexpected token (27:12)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|  */
| 
> import type { CBar, CLine, CPie, CScatter, CTable } from '../adapters'
| 
| export const mockBarConfig: CBar = {
    at ./node_modules/@looker/visualizations/node_modules/@looker/visualizations-adapters/src/__mocks__/mockConfig.ts

Also noticed dozens of errors during typechecking. Specifically surfacing from within node_modules/@looker/visualizations/....

$ tsc --noEmit

ERROR in ./node_modules/@looker/visualizations/node_modules/@looker/visualizations-adapters/src/Debug/Debug.tsx 27:12

Module parse failed: Unexpected token (27:12)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|  */
| 
> import type { FC } from 'react'
| import React from 'react'
| import { Accordion2 } from '@looker/components'

....

Found 61 errors in 32 files.

Investigaton

At first glance it seemed like an issue with my tsconfig.json, or an issue with webpack/babel loaders. But after diving down that rabbit-hole and not finding a good solution I decided to take a look in the actual source for @looker/visualizations in node_modules and discovered it's currently published with just the raw .tsx files, rather than compiled down to .js with declaration files:

From there I tried looking at the version history in npmjs and went back to the two previous versions 0.3.0 and 0.2.15:

Workaround

Downgrading to 0.3.0 still has the same issue, but going back to 0.2.15 I get it all working again. Specifically seems to be because the package being downloaded has been published correctly by supplying .js files rather than the raw .ts files:

Findings

From here I took a look at your releases/tags page and noticed that both versions 0.3.0 and 1.0.0 for @looker/visualizations are not listed anywhere. And looking at the npmjs page again we see the dates for those two broken versions are "a month ago" and "19 days ago". But looking at your git history for the visualization package, there hasn't been a change in about 5 months (which matches the npmjs date for 0.2.15).

Are versions 0.3.0 and 1.0.0 accidental releases? Perhaps something upstream in your repo publishing config changed causing the publishing issue of raw .ts files; combined with lerna marking that package as changed twice leading to these two "phantom" releases?

Support for AND/OR filter sections in filter components for Looker 24.0+

With the rollout of Looker 24.0 (~1 Feb 2024) nested AND/OR filters are available in the Looker for all users[1]. This was previously a labs feature, and while in labs we noticed it broke our use of filter components

The change means filters can be grouped into AND/OR sections in the expression. This means applications using looker filter components also need to support the grouping.

i.e. a list of filter components is no longer sufficient to represent the filter expressions Looker uses.

Are there any plans to implement a new component type / component group to handle AND/OR groups/sections?
Or do applications that use filter components need to change the pay they parse expressions and group filter components the same way themselves?

[1] https://cloud.google.com/looker/docs/and-or-filters-in-explores

FilterToken not rendering proper summary string

Hello I'm trying to utilize the FilterToken component to render out a date type expression in the example below

<FilterToken
  name="Age"
  expressionType="date"
  expression="10 month"
/>

However it renders an empty string within my application, I have tested the code block above on the StoryBook example sandbox and it correctly does render there as

but when used in my extension application it shows up as

in addition I also did try the summary function provided from @looker/filter-expressions shown in the docs on https://www.npmjs.com/package/@looker/filter-expressions, however again an empty string is rendered. Example code below

summary('date', '7 month')}
summary('number', '[0,20],>30') // example from docs did not work either

I do have both the following packages installed

@looker/filter-components
@looker/filter-expressions

I would also like to add a note that internationalization of Filter does not appear to be working either

                      <ComponentsProvider resources={i18nResources}>
                          <Filter
                            expression={dateFilterExpression}
                            expressionType="date"
                            onChange={(value) => {
                              console.log(value.expression);
                            }}
                          />
                      </ComponentsProvider>

Thank you

Popover onClose not working

Hello,

I can not make the Popover's onClose prop to work

https://codesandbox.io/s/prod-worker-qjxh8f?file=/src/index.tsx

Docs example not functional

https://components.looker.com/components/dialogs/drawer

Second example, useDrawer, clicking the button does nothing for me

Typescript errors using Menu component.

package	version
@looker/components	4.1.3
typescript	4.9.4
react	18.0.0

It appears every single possible Menu and Popover property is now required. Ironically, some properties are mutually exclusive (ie: children and dangerouslySetInnerHTML). The current workaround is to add @ts-expect-error before using Menu.

Dialog Component Feedback

Trying to use example in the dialog page, on 0.9.30:
const { open, dialog } = useDialog({ content: 'My Neat Dialog' })

This results in an error: "Property 'open' does not exist on type 'UseDialogResponse'."

Additionally, https://components.looker.com/components/dialogs/#hook-usedialog is a broken link (the link is in the sidebar)

CVE-2023-28155 security vulnerability

There's vulnerability introduces is related to the https://www.npmjs.com/package/request is
https://www.cvedetails.com/cve/CVE-2023-28155/

request is not directly connected to @looker/filter-components but through @looker/filter-components -> @looker/sdk -> request

Here @looker/sdk uses request v^2.88.0 which when installed get to version 2.88.2.

As per vulnerability check - CVE-2023-28155 is introduced through v2.88.1 and greater.

A possible solution to vulnerability is to lower the version related to the request from ^2.88.0 to fixed 2.88.0 or depending on another package instead of request.

Value labels in Select Multi component disappear during filtering

Currently values parameter of SelectMulti is used for both rendering selected options and dropdown list. If filtering is active and currently selection option is filtered out then it starts being represented using value instead of label, which causes bad user experience.

working example: https://codesandbox.io/s/selectmulti-labels-filtering-52bs6

@looker/components version = 2.1.0

Failed to resolve entry for package "@looker/components-providers"

Hi after adding @looker/components I am getting the following error:

Error: Failed to resolve entry for package "@looker/components-providers".
The package may have incorrect main/module/exports specified in its package.json.

I am using node v18.15.0.

Is there a workaround or any particular version of node that I should be using?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Minimal example fails with 'Element Type is Invalid'

I'm implementing the minimal Visualization Component example:

<Query sdk={sdk} query={queryNumber}>
      <Visualization  />
    </Query>

This minimal example fails when rendered. The page will display successfully the query results, dimensions and measures, but no visualization.

Below is the console error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of VisualizationComponent.
in VisualizationComponent (created by Visualization)
in ErrorBoundary (created by Visualization)
in Visualization (created by EmbedComponent)
in Query (created by EmbedComponent)
in EmbedComponent (created by VizComponent)

Is there a required property for the element?

To reproduce, you could try running this embedded Looker frontend: https://github.com/bytecodeio/LookerEmbeddedReference-Frontend . Then navigate to the context https://localhost:3001/viz-component Installation instructions include running a backend server also sorry for the hassle. I've granted access to the contributors of this code. Let me know if anyone else needs access..