GraphQL @searchable sorting on Float incorrect order #1276

txmazing · 2023-02-20T16:44:08Z

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication, Analytics, GraphQL API

Amplify Categories

auth, function, api, analytics, hosting

Environment information

  System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 20.57 GB / 31.92 GB
  Binaries:
    Node: 18.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.50)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4
    @edge-runtime/primitives:  1.1.0-beta.31
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @hapi/accept:  undefined ()
    @hookform/resolvers: ^2.9.10 => 2.9.10
    @hookform/resolvers/ajv:  1.0.0
    @hookform/resolvers/class-validator:  1.0.0
    @hookform/resolvers/computed-types:  1.0.0
    @hookform/resolvers/io-ts:  1.0.0
    @hookform/resolvers/joi:  1.0.0
    @hookform/resolvers/nope:  1.0.0
    @hookform/resolvers/superstruct:  1.0.0
    @hookform/resolvers/typanion:  1.0.0
    @hookform/resolvers/vest:  1.0.0
    @hookform/resolvers/yup:  1.0.0
    @hookform/resolvers/zod:  1.0.0
    @mui/icons-material: ^5.11.0 => 5.11.0
    @mui/lab: ^5.0.0-alpha.108 => 5.0.0-alpha.116
    @mui/material: ^5.11.4 => 5.11.5
    @mui/x-date-pickers: ^5.0.16 => 5.0.16
    @napi-rs/triples:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @paypal/react-paypal-js: ^7.8.1 => 7.8.2
    @segment/ajv-human-errors:  undefined ()
    @vercel/nft:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^5.0.7 => 5.0.10
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chalk:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    clsx: ^1.2.1 => 1.2.1
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    cssnano-simple:  undefined ()
    dayjs: ^1.11.6 => 1.11.7
    debug:  undefined ()
    devalue:  undefined ()
    disable-scroll: ^0.6.0 => 0.6.0
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.23.1 => 8.32.0
    eslint-config-google: ^0.14.0 => 0.14.0
    eslint-config-next: ^12.3.0 => 12.3.4
    eslint-config-prettier: ^8.5.0 => 8.6.0
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    hamburger-react: ^2.4.1 => 2.5.0
    http-proxy:  undefined ()
    https-browserify:  undefined ()
    iconv-lite: ^0.6.3 => 0.6.3
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    material-icons: ^1.13.1 => 1.13.1
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^12.1.6 => 12.3.4
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    prettier: ^2.6.0 => 2.8.3
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^18.1.0 => 18.2.0
    react-bootstrap: ^2.2.2 => 2.7.0
    react-bootstrap/AbstractModalHeader:  undefined ()
    react-bootstrap/Accordion:  undefined ()
    react-bootstrap/AccordionBody:  undefined ()
    react-bootstrap/AccordionButton:  undefined ()
    react-bootstrap/AccordionCollapse:  undefined ()
    react-bootstrap/AccordionContext:  undefined ()
    react-bootstrap/AccordionHeader:  undefined ()
    react-bootstrap/AccordionItem:  undefined ()
    react-bootstrap/AccordionItemContext:  undefined ()
    react-bootstrap/Alert:  undefined ()
    react-bootstrap/Anchor:  undefined ()
    react-bootstrap/Badge:  undefined ()
    react-bootstrap/BootstrapModalManager:  undefined ()
    react-bootstrap/Breadcrumb:  undefined ()
    react-bootstrap/BreadcrumbItem:  undefined ()
    react-bootstrap/Button:  undefined ()
    react-bootstrap/ButtonGroup:  undefined ()
    react-bootstrap/ButtonToolbar:  undefined ()
    react-bootstrap/Card:  undefined ()
    react-bootstrap/CardGroup:  undefined ()
    react-bootstrap/CardHeader:  undefined ()
    react-bootstrap/CardHeaderContext:  undefined ()
    react-bootstrap/CardImg:  undefined ()
    react-bootstrap/Carousel:  undefined ()
    react-bootstrap/CarouselCaption:  undefined ()
    react-bootstrap/CarouselItem:  undefined ()
    react-bootstrap/CloseButton:  undefined ()
    react-bootstrap/Col:  undefined ()
    react-bootstrap/Collapse:  undefined ()
    react-bootstrap/Container:  undefined ()
    react-bootstrap/Dropdown:  undefined ()
    react-bootstrap/DropdownButton:  undefined ()
    react-bootstrap/DropdownContext:  undefined ()
    react-bootstrap/DropdownItem:  undefined ()
    react-bootstrap/DropdownMenu:  undefined ()
    react-bootstrap/DropdownToggle:  undefined ()
    react-bootstrap/ElementChildren:  undefined ()
    react-bootstrap/Fade:  undefined ()
    react-bootstrap/Feedback:  undefined ()
    react-bootstrap/Figure:  undefined ()
    react-bootstrap/FigureCaption:  undefined ()
    react-bootstrap/FigureImage:  undefined ()
    react-bootstrap/FloatingLabel:  undefined ()
    react-bootstrap/Form:  undefined ()
    react-bootstrap/FormCheck:  undefined ()
    react-bootstrap/FormCheckInput:  undefined ()
    react-bootstrap/FormCheckLabel:  undefined ()
    react-bootstrap/FormContext:  undefined ()
    react-bootstrap/FormControl:  undefined ()
    react-bootstrap/FormFloating:  undefined ()
    react-bootstrap/FormGroup:  undefined ()
    react-bootstrap/FormLabel:  undefined ()
    react-bootstrap/FormRange:  undefined ()
    react-bootstrap/FormSelect:  undefined ()
    react-bootstrap/FormText:  undefined ()
    react-bootstrap/Image:  undefined ()
    react-bootstrap/InputGroup:  undefined ()
    react-bootstrap/InputGroupContext:  undefined ()
    react-bootstrap/ListGroup:  undefined ()
    react-bootstrap/ListGroupItem:  undefined ()
    react-bootstrap/Modal:  undefined ()
    react-bootstrap/ModalBody:  undefined ()
    react-bootstrap/ModalContext:  undefined ()
    react-bootstrap/ModalDialog:  undefined ()
    react-bootstrap/ModalFooter:  undefined ()
    react-bootstrap/ModalHeader:  undefined ()
    react-bootstrap/ModalTitle:  undefined ()
    react-bootstrap/Nav:  undefined ()
    react-bootstrap/NavContext:  undefined ()
    react-bootstrap/NavDropdown:  undefined ()
    react-bootstrap/NavItem:  undefined ()
    react-bootstrap/NavLink:  undefined ()
    react-bootstrap/Navbar:  undefined ()
    react-bootstrap/NavbarBrand:  undefined ()
    react-bootstrap/NavbarCollapse:  undefined ()
    react-bootstrap/NavbarContext:  undefined ()
    react-bootstrap/NavbarOffcanvas:  undefined ()
    react-bootstrap/NavbarToggle:  undefined ()
    react-bootstrap/Offcanvas:  undefined ()
    react-bootstrap/OffcanvasBody:  undefined ()
    react-bootstrap/OffcanvasHeader:  undefined ()
    react-bootstrap/OffcanvasTitle:  undefined ()
    react-bootstrap/OffcanvasToggling:  undefined ()
    react-bootstrap/Overlay:  undefined ()
    react-bootstrap/OverlayTrigger:  undefined ()
    react-bootstrap/PageItem:  undefined ()
    react-bootstrap/Pagination:  undefined ()
    react-bootstrap/Placeholder:  undefined ()
    react-bootstrap/PlaceholderButton:  undefined ()
    react-bootstrap/Popover:  undefined ()
    react-bootstrap/PopoverBody:  undefined ()
    react-bootstrap/PopoverHeader:  undefined ()
    react-bootstrap/ProgressBar:  undefined ()
    react-bootstrap/Ratio:  undefined ()
    react-bootstrap/Row:  undefined ()
    react-bootstrap/SSRProvider:  undefined ()
    react-bootstrap/Spinner:  undefined ()
    react-bootstrap/SplitButton:  undefined ()
    react-bootstrap/Stack:  undefined ()
    react-bootstrap/Switch:  undefined ()
    react-bootstrap/Tab:  undefined ()
    react-bootstrap/TabContainer:  undefined ()
    react-bootstrap/TabContent:  undefined ()
    react-bootstrap/TabPane:  undefined ()
    react-bootstrap/Table:  undefined ()
    react-bootstrap/Tabs:  undefined ()
    react-bootstrap/ThemeProvider:  undefined ()
    react-bootstrap/Toast:  undefined ()
    react-bootstrap/ToastBody:  undefined ()
    react-bootstrap/ToastContainer:  undefined ()
    react-bootstrap/ToastContext:  undefined ()
    react-bootstrap/ToastFade:  undefined ()
    react-bootstrap/ToastHeader:  undefined ()
    react-bootstrap/ToggleButton:  undefined ()
    react-bootstrap/ToggleButtonGroup:  undefined ()
    react-bootstrap/Tooltip:  undefined ()
    react-bootstrap/TransitionWrapper:  undefined ()
    react-bootstrap/createChainedFunction:  undefined ()
    react-bootstrap/createUtilityClasses:  undefined ()
    react-bootstrap/createWithBsPrefix:  undefined ()
    react-bootstrap/divWithClassName:  undefined ()
    react-bootstrap/getTabTransitionComponent:  undefined ()
    react-bootstrap/helpers:  undefined ()
    react-bootstrap/safeFindDOMNode:  undefined ()
    react-bootstrap/transitionEndListener:  undefined ()
    react-bootstrap/triggerBrowserReflow:  undefined ()
    react-bootstrap/types:  undefined ()
    react-bootstrap/useOverlayOffset:  undefined ()
    react-bootstrap/usePlaceholder:  undefined ()
    react-bootstrap/useWrappedRefWithWarning:  undefined ()
    react-dom: ^18.1.0 => 18.2.0
    react-hook-form: ^7.39.3 => 7.42.1
    react-is:  17.0.2
    react-refresh:  0.12.0
    react-server-dom-webpack:  undefined ()
    react-to-print: ^2.14.10 => 2.14.11
    react-transition-group: ^4.4.5 => 4.4.5
    react-transition-group/CSSTransition:  undefined ()
    react-transition-group/ReplaceTransition:  undefined ()
    react-transition-group/SwitchTransition:  undefined ()
    react-transition-group/Transition:  undefined ()
    react-transition-group/TransitionGroup:  undefined ()
    react-transition-group/TransitionGroupContext:  undefined ()
    react-transition-group/config:  undefined ()
    regenerator-runtime:  0.13.4
    sass: ^1.57.1 => 1.57.1
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    setimmediate:  undefined ()
    source-map:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    swiper: ^8.4.7 => 8.4.7
    swiper_angular:  0.0.1
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    validator: ^13.7.0 => 13.7.0
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    yup: ^0.32.11 => 0.32.11
  npmGlobalPackages:
    @aws-amplify/cli: 10.5.2
    mjml: 4.13.0

Describe the bug

We use @serchable for our data. We have a float "rating" according to which should be sorted in descending order.

Instead of sorting "ratings" like 3, 3.5 and 3 in descending order (as 3.5, 3, 3) only the digit before the comma is taken into account and then sorted alphabetically (i.e. 3. 3.5, 3 or even 3, 3, 3.5). In this case all "3.X" entries are simply queried after "4.X" and before "2.X" entries and then ordered alphabetically.

Expected behavior

The digits after the decimal point should also be taken into account, so that if 3.5 is queried 2 times, sorting by name only takes place afterwards.

Reproduction steps

Install GraphQL API
Use "@searchable" on a model with a "Float"

Code Snippet

query MyQuery {
  searchItems(sort: {direction: desc, field: rating}) {
    items {
      id
      name
      rating
    }
  }
}

{
  "data": {
    "searchItems": {
      "items": [
        {
          "id": "91c7014e-3017-4991-90ab-69a5c73444cb",
          "name": "Test1",
          "rating": 4
        },
        {
          "id": "3b7e16b1-a772-4ab1-ac7f-bbf9e4e1fb7e",
          "name": "Test2",
          "rating": 4
        },
        {
          "id": "329e3d2a-56aa-4898-85d8-22c321ce3d32",
          "name": "Test3",
          "rating": 3 <============
        },
        {
          "id": "08777189-cac1-4e5d-baf2-90b51a2014d0",
          "name": "Test4",
          "rating": 3.5 <============
        },
        {
          "id": "e9c1ee6e-ae52-49e7-9902-e643a30f1149",
          "name": "Test5",
          "rating": 2.5
        },
        {
          "id": "d940ff0d-4c3f-4b35-850e-b1a550998733",
          "name": "Test6",
          "rating": null
        },
        {
          "id": "bc2d812a-56a9-41ad-8ec1-49f5fbe8b812",
          "name": "Test7",
          "rating": null
        },
        {
          "id": "4e9a9c43-6f09-4b1d-b6da-b0f327c4aa8a",
          "name": "Test8",
          "rating": null
        }
      ]
    }
  }
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

The text was updated successfully, but these errors were encountered:

chrisbonifacio · 2023-02-20T19:36:15Z

Hi @txmazing , can you share your schema and also check in your OpenSearch instance what the type for that rating field was set as?

txmazing · 2023-02-20T19:55:08Z

type Item
@model
@auth(
	rules: [
		{ allow: private, operations: [read] }
		{ allow: public, operations: [read], provider: iam }
		{
			allow: groups
			groups: ["admin"]
			operations: [read, create, update, delete]
		}
	]
)
@searchable
{
	id: ID!
	name: String!
	picture: AWSURL!
	strength: Int!
	urlname: String!
	rating: Float
}

rating is set as a long.

chrisbonifacio · 2023-02-24T18:04:16Z

Thank you, @txmazing. This sounds very similar to the issue detailed here:

#866 (comment)

It might be the case that the first record created had a rating without a decimal point like 1 or even 1.0 which both result in the type being mapped to long when it should be float. The solution might be to recreate the opensearch instance and ensure that the first Item record streamed to OpenSearch has a non zero decimal point (ex: 1.5 instead of 1.0) so that the field gets mapped correctly to float.

Can you try this and see if it helps?

txmazing · 2023-02-26T16:40:06Z

Thank you, @txmazing. This sounds very similar to the issue detailed here:

#866 (comment)

It might be the case that the first record created had a rating without a decimal point like 1 or even 1.0 which both result in the type being mapped to long when it should be float. The solution might be to recreate the opensearch instance and ensure that the first Item record streamed to OpenSearch has a non zero decimal point (ex: 1.5 instead of 1.0) so that the field gets mapped correctly to float.

Can you try this and see if it helps?

This seems to work. Thank you :)

chrisbonifacio · 2023-02-27T16:28:44Z

Awesome! Thank you for confirming 😃

I'll close this issue as resolved then.

txmazing added the pending-triage label Feb 20, 2023

txmazing changed the title g GraphQL @searchable sorting on Float incorrect order Feb 20, 2023

chrisbonifacio transferred this issue from aws-amplify/amplify-js Feb 20, 2023

chrisbonifacio self-assigned this Feb 20, 2023

chrisbonifacio closed this as completed Feb 27, 2023

chrisbonifacio added @searchable question Further information is requested p4 and removed pending-triage labels Feb 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GraphQL @searchable sorting on Float incorrect order #1276

GraphQL @searchable sorting on Float incorrect order #1276

txmazing commented Feb 20, 2023 •

edited

Loading

chrisbonifacio commented Feb 20, 2023

txmazing commented Feb 20, 2023

chrisbonifacio commented Feb 24, 2023 •

edited

Loading

txmazing commented Feb 26, 2023 •

edited

Loading

chrisbonifacio commented Feb 27, 2023

GraphQL @searchable sorting on Float incorrect order #1276

GraphQL @searchable sorting on Float incorrect order #1276

Comments

txmazing commented Feb 20, 2023 • edited Loading

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Categories

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

chrisbonifacio commented Feb 20, 2023

txmazing commented Feb 20, 2023

chrisbonifacio commented Feb 24, 2023 • edited Loading

txmazing commented Feb 26, 2023 • edited Loading

chrisbonifacio commented Feb 27, 2023

txmazing commented Feb 20, 2023 •

edited

Loading

chrisbonifacio commented Feb 24, 2023 •

edited

Loading

txmazing commented Feb 26, 2023 •

edited

Loading